2020年前端面试题总结(一)

930 阅读4分钟

楼主面试了几家一线教育互联网公司,对自己记得比较清楚的面试题大概梳理了一下,各位看官有兴趣可以查漏补缺,楼主非科班出身三年经验,对题目具体答案不做解答,有兴趣可以私下给我要具体题目的文章。题目面试回合没有问题,只是可能某个回合的题目并非一家公司的。

2020年前端面试题总结(二)

一面:

1. 盒模型了解吗?

  • IE和标准盒模型 box-sizing:border-box | content-box;

  • 哪个平时用的多(IE盒模型)以及为啥用的多?

2. 介绍下事件循环机制?

3. 数组去重?

  • for循环
  • new Set
  • 对象或者new Map
  • filter

等等 说了6种方式

4. Promise的API都有哪些?分别哪个规范出的?

问规范目的就是害怕你平时写的时候ES6环境用ES6+的API

静态方法:resolve,reject,all,race,any,allSettled,try

原型方法:then,catch,finally

有几个比较生僻的方法记得看下

5. async/await一个同步任务,如何执行?

其实也是异步执行,被Promise.resolve包装了

6. 如何编写一个下拉加载组件,说下思路?

  • 通过监听滚动,getBoundingClientRect以及其他几何属性算出元素可见性,然后根据可见性加载,加载完重新复原位置
  • 当然还有dom节点的复用,比如上面不可见的可以插入下面不可见(频繁操作出现内存内存抖动),常见库react-virtualized, react-window
  • 可以借用react的调和子节点,保持同样key复用节点

7.打开网页去吃饭,回来发现页面崩溃了,如何排查和精准定位问题?

内存泄漏,可以查看performance和Memory,截图对比heapSize看是否有持续上升,当然可以command + shift + p打开控制面板 输入monitor查看实时的

  • 查看newWork面板和console控制台看是否有些页面的轮询任务和服务端推送接口导致错误

二面

1. 写过canvas吗

本人不太写,但我说了用svg写过仪表盘之类的,并说了位图和矢量图的差异性

2. 移动端布局

我们公司采用px2rem

比如

window.devicePixelRatio = 2

iphone6s的window.client = 750

我们设计的图纸也是750px;

设定html的font-size: window.client/750等于1rem,相等于1rem = 1px物理像素;

但设备像素为375,所以initial-scale=1/dpr;

<meta name="viewport" content="width=device-width, initial-scale=0.5">

这样其实也解决了设计稿的1px线相当于实际0.5px除了iPhone8s以下及其安卓手机不认识0.5px的问题

3.说说position的属性

static/fixed/absolute/relative/sticky

4.webpack了解吗

巴拉巴拉一堆,说了说整个编译过程,compile/complication以及loader和plugin的写法,tapable

5.说几个webpack的hooks

忘完了

6.如何实现撤销命令,就是返回上一步

简单说了下队列和LRU缓存机制 (自己完全瞎想的)

7.如何实现跑马灯,就那种匀速横向或者竖向滚动 谁谁谁几分钟前中奖XXX

第一个列表节点复制一份到最后,然后用定时器或者transition,巴拉巴拉一堆

8.说下你了解的图片格式及其优缺点

辛亏看过,png/svg/gif/jpg|jpeg/base64/webp等优缺点,一般用在哪里

重点说了下webp的好处以及兼容性

三面

1. 尽可能多的列举网络请求报文字段

请求行 巴拉巴拉一堆

请求头 巴拉巴拉一堆

2.列举请求方式

看过图解http,巴拉一堆

get/post/head/delete/put/options/trace/connect/link/unlink

3.说下cookie的属性

expires/max-Age/domin/path/secure/httpOnly/sameSite

说完着重扯了下Chrome80的sameSite|strict/lax/none的区别

顺便说道网络安全的xss攻击和csrf跨站请求伪造

4.说下Https

太繁琐了 没让我展开说CA认证那一坨,就扯了扯几种加密以及TSL/SSL

5.说下快速排序思路

由于电话面,直说思路 分治思想,说了时间复杂度O(nlogn) 问我怎么算的,我没说出来...

四面

1. 看了看我们公司网站代码

1-1. react写的webpack打包为啥有define那种代码

因为上个大版本用的fis3打包,所以有部分代码是AMD格式的

1-2. 说下commonJS和ESmodule区别

其实就是es6的模块和node的common模块区别

1-3. 看你们网站用到http2.0说一下

  • 2.0的采用二进制分帧层的多路复用机制,解决了头部阻塞、慢启动,竞态问题

  • 2.0可以服务端推送以及头部压缩

顺便说了http0.9/1.1/2.0/3.0的区别

2. 说下头部压缩的类型有哪些?

我只知道gizp

3. 说下node如何解决高并发

我说pm2采用集群,主进程管理子进程,心跳检测乱七八糟的

4. 如何解决node错误

ERK日志打印

uncaughtException和domin模块

5.看你写了SSO单点登录说一下流程

巴拉巴拉一堆

6.你们node并发量和吞吐量多少

平时不关心这些,只知道大概的pv量(尴尬)

7. 说说工作中遇到的问题,如何解决

巴拉巴拉

8. 然后扯了扯项目