前端性能优化

性能优化

参考

性能优化是一个发散性问题，对于没有实践经验的人来讲，是比较难把握的。涉及网络相关，JS相关，CSS相关，工程化构建工具。是考察知识深度的好问题。相关资料网上很多，都是很碎片的内容，关键是理清思路。

网络方面考虑

• 使用缓存，不发请求
• DNS域名解析
• 建立TCP连接后，才开始发送请求，使用连接复用。keep-alive，一次通讯完成后，保持TCP连接，下次请求时少一次TCP连接建立的过程。
• 减少http请求

  • 资源加载，CSS，JS，图片等，大量加载时会发出很多请求。将多个文件合并成一个，减少请求数。
  • 图片加载时使用懒加载，或函数节流方式减小请求压力。

• 控制cookie大小，减小请求头的大小
• cdn加速，内容分发网络
• 服务器返回内容

  • Etag 304
  • GZip 内容压缩

浏览器上

• CSS放头部，JS放到尾部。JS是会阻塞页面加载，JS代码执行完后，页面才能继续渲染。
• 减少重排，重绘操作，reflow开销大于repaint

  • 页面dom操作引起重排，尽量减少dom的操作。如documentFragment
  • 渲染的阶段 Layout ,Paint,Composite Layers。越靠前的阶段代价越高昂，最后的阶段由GPU完成
  • -webkit-transform:translate3d(0,0,0)触发GPU加速

• 变量记得释放，避免造成内存泄漏
• 选择器，CSS选择器从右向左匹配

  • 选择器效率从高到低，内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 元素（类型）选择器 = 伪元素选择器

• 代码优化，代码写的烂，别的优化的再好都没用

构建工具

• tree shaking 清理
• code splitting 对代码进行分块，按需进行加载