性能优化

页面性能优化

桌面端性能优化

网络加载

  1. 减少 HTTP 请求次数；
  2. 减小 HTTP 请求大小；
  3. 将 CSS 或 JavaScript 放到外部文件中，避免使用标签直接引入；
  4. 避免页面中空的 href 和 src 属性；
  5. 为 HTML 指定 Cache-Control 或 Expires；
  6. 合理设置 Etag 和 Last-Modified；
  7. 减少页面重定向；
  8. 使用静态资源分域存放来增加下载并行数；
  9. 使用 CDN 存放文件；
  10. 使用 CDN Combo 下载传输内容；
  11. 使用可缓存的 AJAX；
  12. 使用 GET 请求方法来完成获取数据的 AJAX 请求；
  13. 减小 cookie 大小并对其进行隔离；
  14. 缩小 favicon.ico 并缓存；
  15. 推荐使用异步 JavaScript 资源；
  16. 消除阻塞渲染的 CSS 及 JavaScript；
  17. 避免使用 CSS import 引用加载 CSS。

页面渲染

  1. 把 CSS 资源引用放在 HTML 文件顶部；
  2. 把 JavaScript 资源引用放在 HTML 文件底部；
  3. 不要在 HTML 中直接缩放图片；
  4. 减少 DOM 的数量和深度；
  5. 尽量避免使用 <table>、<iframe> 等慢元素；
  6. 避免运行耗时的 JavaScript；
  7. 避免使用 CSS 表达式或滤镜。

移动端性能优化

用于桌面端页面的性能优化建议绝大部分也同样可以用到移动端页面中，这里主要是额外的一些针对移动端页面的优化建议。

网络加载

  1. 首屏数据请求提前，避免 JavaScript 文件加载后才请求数据；
  2. 首屏加载和按需加载，非首屏内容按需加载，保证首屏内容最小化；
  3. 模块化资源并行下载；
  4. 内联首屏必备的 CSS 和 JavaScript；
  5. 通过 meta dns prefetch 设置 DNS 预解析；
  6. 资源预加载；
  7. 合理利用 MTU 策略。

缓存

  1. 合理利用浏览器缓存；
  2. 静态资源离线方案；
  3. 尝试使用 AMP HTML；
  4. 尝试使用 PWA 模式。

图片

  1. 图片压缩处理；
  2. 使用较小的图片，合理使用 Base64 内嵌图片；
  3. 使用更高压缩比格式的图片；
  4. 图片懒加载；
  5. 使用媒体查询或 srcset 根据不同屏幕加载不同大小的图片；
  6. 使用图标字体代替图片图标；
  7. 定义图片大小设置；
  8. 强缓存策略。

JavaScript 脚本

  1. 尽量使用 id 选择器；
  2. 合理缓存 DOM 对象；
  3. 页面元素尽量使用事件代理，避免直接事件绑定；
  4. 使用 touchstart 代替 click；
  5. 避免 touchmove、scroll 连续事件处理；
  6. 避免使用 eval、with；
  7. 使用 [].join() 代替字符串连接符 +，推荐使用 ES6 的字符串模板；
  8. 尽量使用 ES6+ 的特性来编程。

页面渲染

  1. 使用 viewport 固定屏幕渲染，可以加速页面渲染内容；
  2. 避免各种形式重排重绘；
  3. 使用 CSS3 动画，开启 GPU 加速；
  4. 合理使用 Canvas 和 requestAnimationFrame()；
  5. SVG 代替图片；
  6. 不滥用 float；
  7. 不滥用 web 字体或过多的 font-size 声明；
  8. 做好脚本容错。

架构协议

  1. 尝试使用 SPDY 和 HTTP 2；
  2. 使用后端数据渲染；
  3. 使用 NativeView 代替 DOM 的性能劣势。