前端全链路优化总结

1. 减少http请求
   http请求每次都需要建立通信链路，进行数据传输，在服务端每个http都需要启动独立的线程去处理，这些开销很昂贵，减少请求的数量可有效的提高访问性能。例如：
   1. 合并公用的小css/js块
   2. 雪碧图、字体图标、base64图标
   3. 使用http2.0及其以上版本
2. 使用浏览器缓存
   通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。可改变文件名来进行更新，进行避免一次性过多的更新，那样会导致服务器负载骤增，网络阻塞等问题。
3. 启用压缩
   1.  代码压缩：css代替空Dom、去除分号空格，js压缩和混淆
   2. 服务器Gzip压缩
4. 图片使用合适的格式和大小
   1. 根据场景选择合适的格式jpegpngwebpsvg，如色彩丰富和透明场景选png
   2. 优化大小（配合后端裁剪），根据场景选择合适的大小：如4G网图片400*400，2G100*100大小
5. 懒加载和预加载
   网站中图片相对大小还是较大，响应式加载图片，也可先渲染图片占位符，然后加载图片
6. css放在头部 js放在body闭合标签前
   css尽量都放在一起且位于头部，如果在页面渲染的过程中再次遇到css会导致dom回流，位于javascript下方的css样式会被阻塞影响页面。
7. 避免页面回流和重绘
   回流是会导致页面重新渲染的一些元素，从而影响性能，回流是元素大小位置发生变化，重绘是字体颜色，背景颜色等发生变化相对回流性能影响较小
   1. 多次重绘的元素使用绝对定位脱离文档流减少整体重绘，如动画元素
   2. 多个元素变化后，再一次性渲染到dom中（vue等框架的虚拟dom）
8. 减少cookie传输
   cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，对于静态资源来说不需要存在cookie 可使用独立的域名访问。
9. javascript 代码优化
   1. 避免使用 eval和 Function
   2. HTML Collection请转为数组使用
   3. 减少作用域链查找
   4. 数据访问
      　　Javascript中的数据访问包括直接量 (字符串、正则表达式 )、变量、对象属性以及数组，其中对直接量和局部变量的访问是最快的，对对象属性以及数组的访问需要更大的开销。当出现以下情况时，建议将数据放入局部变量：
      　　a. 对任何对象属性的访问超过 1次
      　　b. 对任何数组成员的访问次数超过 1次
      　　另外，还应当尽可能的减少对对象以及数组深度查找。
   5. 字符串拼接推荐使用数组的join
   6. 异步加载：

      <script defer src="index.js"></script>

10. css选择器优化
    1. css选择符的解析是由右到左，尽量层级不要多
    2. 单个元素样式尽量使用id（效率最高）,避免使用子选择器
    3. 多个相同样式才使用class
    4. 选择器性能排序：

       id选择器（#myid）
       类选择器（.myclassname）
       标签选择器（div,h1,p）
       相邻选择器（h1+p）
       子选择器（ul > li）
       后代选择器（li a）
       通配符选择器（*）
       属性选择器（a[rel="external"]）
       伪类选择器（a:hover,li:nth-child）

11. 使用cdn(内容分发网络)
    就近访问，加快用户访问速度，减少数据中心负载压力，部分cdn支持自动优化图片
12. 避免重定向
13. Ajax请求使用缓存
14. javascript按需加载，webpack打包有插件帮助分割和优化
15. 根据文件内容产生hash串
    如果文件发生改变则文件名改变，没有改变则可进行缓存，尽量将一些不常改动的文件合并到一起，常改动的单独分开。
16. 加快DNS的解析速度
    Dns预加载，

    <link rel="dns-prefetch" href="www.baidu.com" />

17. 动态页面静态化：后端是动态页面的话，提前静态化常用页面
18. 其他编码优化
    1. 避免较深的dom结构，减少dom节点数量
    2. 不适用table布局
    3. 给元素适当添加默认尺寸，避免动态元素载入时大规模重绘
    4. 不使用CSS @import，css表达式等耗资源的语法
    5. 使用硬件渲染
19. 防抖和节流：使用函数节流（throttle）或函数去抖（debounce），限制某一个方法的频繁触发
20. 及时清理环境：及时消除对象引用，清除定时器，清除事件监听器，创建最小作用域变量，可以及时回收内存
21. 事件代理
    1. 事件代理是指将事件监听器注册在父级元素上，由于子元素的事件会通过事件冒泡的方式向上传播到父节点，因此，可以由父节点的监听函数统一处理多个子元素的事件
    2. 利用事件代理，可以减少内存使用，提高性能及降低代码复杂度
22. 使用requestAnimationFrame来替代setTimeout和setInterval
    1. 希望在每一帧刚开始的时候对页面进行更改，目前只有使用 requestAnimationFrame 能够保证这一点。使用 setTimeout 或者 setInterval 来触发更新页面的函数，该函数可能在一帧的中间或者结束的时间点上调用，进而导致该帧后面需要进行的事情没有完成，引发丢帧

参考：https://www.cnblogs.com/xiaohuochai/p/9178390.html