2018.5面试总结

问题1：前端性能优化

优化图

参考:掘金

511.png

1.1. http请求优化

优化手段1：合并请求
合并请求的主要目的是减少浏览器对服务器发起的请求数，从而减少在发起请求过程中花费的时间。
优化手段2：域名拆分
域名拆分主要是为了增加浏览器下载的并行度，让浏览器能同时发起更多的请求
域名拆分为3到5个比较合适，过多的域名会带来DNS解析时间的损耗，可能会降低性能
优化手段3：开启Gzip
Gzip是一种压缩技术，可以将资源在服务端进行压缩，然后发送给浏览器后再进行解压，这种方式会降低传输大小，提高网页加载性能。
化手段4：开启KeepAlive
开启KeepAlive能够减少浏览器与服务器建立连接的次数，从而节省建立连接时间。
优化手段5：MinifyMinify
指的是将JS和CSS等文本文件进行最小化处理，一般对于CSS来说就是去除空格去除换行去除注释等，对于JS，除了上述方法外，还可以进行变量名替换，将长变量名替换为短变量名。目前有很多用户做Minify的工具，例如uglifyjs等。
其他：
请求数量——合并脚本和样式表，CSS Sprites，拆分初始化负载，
划分主域
请求带宽——开启Gzip，精简JavaScript，移除重复脚本，
图像优化
缓存利用——使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，
使Ajax可缓存
页面结构——将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出代码校验——避免CSS表达式，避免重定向
其他答案2

内容层面

• 使用CDN
• 单域名、多域名，单域名可以减少DNS查找次数，多域名可以增加浏览器并行下载数量，这需要权衡，一般同一个域下不要超过四个资源。
• 避免重定向(分场景)
• 避免404

网络层面

• 利用缓存，可以参考另一篇文章手写文件服务器，说说前后端交互
• 文件压缩(通过响应头Accept-Encoding: gzip, deflate, br告诉服务器你支持的压缩类型)
• 按需加载，提取公共代码，tree-shaking等(都可以通过webpack来实现)
• 减少cookie大小
• 文件合并，通过css雪碧图合并图片
• 文件预加载、图片懒加载

渲染层间

• js放底部，css放顶部
• 减少reflow(回流)和repaint(重绘)
• 减少dom节点

代码层面

• 缓存dom节点，减少节点查找，css选择器层级优化
• 减少dom节点操作
• 合理使用break、continue、return等，优化循环
• 像react用到的事件委托、对象池等手段

1.2 js性能优化

参考1
参考2

问题2：不通过脚手架配置项目

分支1：配置vue项目
分支2：配置react项目

补充1：阿里电面

1，js与其他语言的区别java等
2，tcp连接三次握手做了什么？
3，react和vue性能对比
4，算法复杂度与稳定性

补充2

1 http请求头和响应头有哪些东西？
2 Generator是什么？
3 symbol是什么？