前端性能优化

1. 原则
   1. 让加载更快；
   2. 让渲染更快；
2. 加载资源优化
   1. 减少资源体积：静态资源压缩；
   2. 减少请求次数：
      1. 合并代码：http 请求由于网络等不确定性因素，可能会导致耗费大量时间；多个小体积资源会发起多个请求，如果合并之后只需要发起单个请求；
      2. 合并静态资源：雪碧图；
      3. 使用服务端渲染：服务端将静态资源直接放到 html 中，不用客户端再请求静态资源，就可以减少请求次数；
      4. 静态资源合理使用缓存；
   3. 使用更快地网络：CDN；
3. 渲染优化
   1. css 放在 head 中，js 放在 body 底部；
      1. 如果将 css 放在其他地方比如 body 中，则浏览器有可能还未下载和解析到 css 就已经开始渲染页面了，这就导致页面由无 css 状态跳转到 css 状态，用户体验比较糟糕。
      2. 加载外部 js 代码时，浏览器会暂停页面渲染，等待脚本下载并执行完毕后，再继续渲染。原因是 js 代码可以修改 DOM ，所以必须把控制权交给 js 引擎，否则会导致复杂的线程竞赛的问题。如果外部 js 代码加载时间很长（一直无法完成下载），那么浏览器就会一直等待脚本下载完成，造成页面长时间失去响应，浏览器就会呈现“假死”状态。
   2. 图片懒加载；
   3. 减少 DOM 操作；
   4. 合并 DOM 操作：
      1. 通过类修改样式；
      2. 使用 DocumentFragment 来操作 DOM ；
   5. 缓存 DOM 查询；
   6. 事件防抖 debounce 和节流 throttle ；