如何做一个合格的Web前端面试官（面试者）-2021

最近面试不少，自己作为某易的前端TL面试官，也作为某鹅某巴等的面试者，总结了一些大厂以及小公司2020年的面试经验。希望对你有用！

该文仅针对WEB前端工程师岗位（ !TeamLeader ）。文内具体实现方式请自行度娘/GG（或等我发原创）
…
…
进入正题-2021.1.6 持续更新

一面/平级面（基本必考）

---

Vue

1、Vue的函数式组件是什么？
2、关于Vue的$set，怎么用的？会改变watch监听的对象或者数组吗？
3、Vue3.0有哪些优化的点？

• Vue3.0使用Proxy进行响应式的监听(默认行为数据处理/多次触发set/Proxy只能代理一层)
• 模板编译和virtual DOM runtime 性能方面的优化
• 关于Vue和diff比较方面的优化

4、Promise如何解决回调地狱

网络协议相关

1、Http底层、TCP/IP协议、TCP、UDP区别；
2、客户端通讯，Client Server；
3、http1.1新增、http2.0新增、http头部属性；
4、http和https的区别；
5、http和https的不对称加密是如何进行的；
6、http的headers都有哪些属性？作用分别是什么？
（cache-control,expires,connection,last-modify,if-modified-since,etag,if-none-match,cookie,accept-ranges,content-type…）

Node

1、Node的中间件是什么；

面向对象

1、对象的深拷贝；

• JSON.parse & JSON.stringify
• Object.create
• $.extends方法
• loadash中的深拷贝

2、toString()

• {}.toString()，会报错的原因

ES6

基本特性？遍历方式？
1、Set、WeakSet数据结构；
2、Map、WeakMap数据结构；
3、Proxy、Object.defineProperty差异；

H5与原生App通信

1、JSBridge
2、离线包的加载问题
3、热更新的问题

项目与实操

1、如何做断点续传；
2、从一次网页请求，到渲染完成，经历了哪些阶段

• 输入域名，先进行域名解析，使用DNS协议，获取对应的IP地址
• 这个IP地址可能不相同，不同地区用户一般访问一个资源，先去CDN托管上找
• 如果在CDN上没有找到该资源，该主机会向中央服务器加载对应的资源，这个资源会缓存在CDN上，以后该地区的所有用户，都会享受该福利
• 首先会拿到html文件
• 浏览器自上而下解析html文件
• html中加载其他资源，最终页面渲染完成

3、浏览器渲染DOM的过程

• 处理HTML标记并标记为DOM树
• 处理CSS标记并标记为CSSOM树
• 将DOM和CSSOM合并形成一个渲染树
• 根据渲染树来布局，计算每个节点的几何信息
• 将各个节点绘制到屏幕上
  跳链大神支招

4、阻塞问题方式

• css是阻塞渲染的
• javascript加载，是阻塞型的
• async和defer是解决js阻塞最好的的方式

5、前端如何做监控和埋点sdk

• 性能监控&异常监控
• 第三方jssdk埋点统计用户uv pv 事件等行为分析，不能保证网站数据安全。

6、如果作视频和音频的优化，以及兼容问题

二面/TL或主管面

---

性能如何优化？

1、体积：体积压缩、代码切割、js代码懒加载；
2、缓存：资源的请求设置缓存，cookie减肥，前端静态资源缓存策略[超链]；
3、网络传输：CDN网络加速；
4、预解析DNS，预先告知浏览器某些资源可能在将来会被使用到；
5、图片：图片懒加载技术，雪碧图技术（CSS Sprite）；
6、webview：打成离线包，在webview创建阶段进行预加载；

富文本编辑器

1、一个富文本编辑器如何实现？

项目打包

1、项目打包，内部发生了哪些过程；
2、webpack插件的执行流程是怎么样的；

CDN托管加速的原理

1、中央服务器，每次代码更新，需要部署在中央服务器上；
2、托管服务器，用户量过大，为了缓解中央服务器的压力，很多资源会放到托管服务器上，用户进行资源加载的时候，优先从托管服务器加载；
3、用户解析一个域名，会得到一个ip地址，这个ip一般就是离你最近的cdn托管服务器，在这个服务器上下载你的资源，如果资源不存在，这个托管服务器会自动去往中央服务器下载；

Weex渲染机制、Flutter渲染机制的区别

1、…

跨域代理，cookie如何传输？

1、…

WEB安全是什么？什么叫CSRF？

1、XSS（跨站脚本攻击）- 非持久型和持久型；
2、CSRF（跨站请求伪造）；
3、点击劫持；
4、URL跳转漏洞；
5、SQL注入；
6、OS命令注入攻击；
7、cookie安全问题

React

1、虚拟DOM在react和vue中的区别
2、diff算法在react和vue中的区别

三面/总监面

---

哪个项目是你当前做的比较满意的项目？攻克的难点是什么？

主要考察面试者对新项目、新业务，对过往项目的认可度认同感，解决问题的思路，是否有亮点。

如何进行跨部门沟通合作，以及抢功劳如何调解（大企）

大厂考验沟通能力，以及职场情商的考核。

四面/HR面

---

该处请自行度娘和GG…