前端性能优化小结

前端性能优化

借助各种工具和http相关原理使前端代码在运行时更快

为什么要进行性能优化

使页面运行更快，减少页面卡顿，提高用户体验;
减少不必要的请求，节省用户带宽。

如何进行性能优化

前端性能优化基本可以归结于两个方面

• 少加载文件
• 加载的文件越小越好

减少http请求

• 使用雪碧图（多张图片合并成一张图片）
• 打包css，js等静态资源
• 避免使用@import(同步请求css样式文件)导入css文件
• 尽量使用原生js，避免过多的第三方插件
• 图片(组件)懒加载

合理利用http缓存

• 强缓存
  使用Expires和Cache-Control（优先级高）来实现强缓存，
  如果命中强缓存直接使用缓存中的文件，不会再向服务器请求文件

  Expires: Wed, 06 Feb 2030 09:05:30 GMT
  Cache-Control: max-age=315360000
  

• 协商缓存
  没有修改过，使用缓存，code码： 304 not Modified

  If-Modified-Since: Fri, 27 Oct 2017 06:35:57 GMT
  Etag: "2c1-4a6473f6030c0"  // 文件指纹
  

减小文件体积

• 对css，js等文件进行压缩
• 背景图使用jpg或者jpeg等格式，图标使用png格式

DOM级别优化

• 减少DOM操作
• 使用事件冒泡将目标元素的事件用父元素进行代码
• 在DOM节点进行修改时，考虑使用documentFragement
• 对页面某些组件（比如弹窗）使用绝对定位，使其脱离文档流，不会触发重绘和回流。
• 使用语义化标签，减少无意义标签的使用
• script标签放在body后面,使用defer 或者async属性

js优化

• 减少递归的使用，使用尾递归对递归进行优化
• 减少计算量，比如在字符串长度校验时，对相同的字符串的长度进行记录，下次再进行计算时直接返回结果，避免再次计算
• 函数节流
• 函数防抖
• 合理使用定时器，及时销毁定时器
• 合理使用闭包

css优化

• 避免使用@import
• 避免使用复杂的选择器以及层次很多的选择器
• 对于margin,padding 等属性避免分开声明（上下左右）
• 清除没有用到的css选择器