本文主要介绍前端性能优化需要做的事以及需要考虑的问题。

目录

  1. Web性能优化的分析
  2. Web性能优化的对策
    1. 页面内容
      1. 减少HTTP请求数
      2. 减少DNS查询
      3. 延迟加载
      4. 预加载
    2. 服务器
      1. 使用CDN
      2. 添加Expires或Cache-Control响应头
      3. 启用Gzip
      4. 配置 Etag
    3. Cookie
      1. 减少 Cookie 大小
    4. CSS
      1. 把样式表放在中
    5. Javasript
      1. 把脚本放在页面底部
      2. 压缩JavaScript和CSS
  3. 参考资料

首先我们要知道，前端优化的目的是什么？

  1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
  2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
    总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

Web性能优化的分析

首先按下回车加载网页的过程中，会有哪些与前端相关的过程？

  1. 判断网站是否存在缓存
  2. DNS查询
  3. 建立TCP连接
  4. 发送请求
  5. 接收响应
  6. 接收响应完成
  7. 查看DOCTYPE来判断文件类型 html/xml
  8. 逐行解析渲染网页
  9. 下载并解析CSS文件
  10. 下载并解析JS文件

这些过程中，有些步骤我们是可以进行性能优化的。

  1. 我们可以减少DNS的查询，增加域名。因为一个域名只能同时下载4个文件。
  2. TCP连接复用
  3. 发送Http请求过程中，可以减少cookie的使用和使用Cache-Control。
  4. 接收响应过程中，可以使用ETag发出304的响应，不需要重新下载文件。同时还可以使用Gzip。
  5. DOCTYPE类型声明必须要有，因为不写浏览器会自己根据内容判断文件类型，占用时间。
  6. CSS & JS文件使用CDN。CDN全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。 CDN的关键技术主要有内容存储和分发技术。
  7. CSS文件应放在Head标签内，因为CSS文件如果放在后面会造成下载时堵塞页面的渲染。
  8. JS文件应放在body标签最后，因为就算JS文件一开始不加载也不影响网站样式，放在前面会堵塞页面的渲染。
  9. 使用懒加载，一页屏幕一页屏幕的渲染，避免下载内容浪费的时间。

Web性能优化的对策

这里总结了一些前端性能优化的方法

页面内容

减少HTTP请求数

合并JS/CSS文件。服务器端（CDN）自动合并，基于Node.js的文件合并工具，通过把所有脚本放在一个文件中的方式来减少请求数。

减少DNS查询

减少不同的主机名可减少DNS查找，减少不同主机名的数量同时也减少了页面能够并行下载的组件数量，避免DNS查找削减了响应时间，而减少并行下载数量却增加了响应时间。原则是把组件分散在2到4个主机名下，这是同时减少DNS查找和允许高并发下载的折中方案。

延迟加载

页面初始加载时哪些内容是绝对必需的？不在答案之列的资源都可以延迟加载。比如：

  • 非首屏使用的数据、样式、脚本、图片等；
  • 用户交互时才会显示的内容。

遵循「渐进增强」理念开发的网站：JavaScript用于增强用用户体验，但没有（不支持） JavaScript也能正常工作，完全可以延迟加载JavaScript。

预加载

预先加载利用浏览器空闲时间请求将来要使用的资源，以便用户访问下一页面时更快地响应。

服务器

使用CDN

内容分发网络（CDN）是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的。例如：选跳数（hop）最少的或者响应时间最快的服务器。

添加Expires或Cache-Control响应头

  • 静态内容：将 Expires 响应头设置为将来很远的时间，实现「永不过期」策略；
  • 动态内容：设置合适的 Cache-Control 响应头，让浏览器有条件地发起请求。

启用Gzip

Gzip压缩通常可以减少70%的响应大小，对某些文件更可能高达90%，比Deflate更高效。主流 Web 服务器都有相应模块，而且绝大多数浏览器支持gzip解码。所以，应该对HTML、CSS、JS、XML、JSON等文本类型的内容启用压缩。

注意 图片和 PDF 文件不要使用 gzip。它们本身已经压缩过，再使用 gzip 压缩不仅浪费 CPU 资源，而且还可能增加文件体积。

配置 Etag

实体标签（ETags），是服务器和浏览器用来决定浏览器缓存中组件与源服务器中的组件是否匹配的一种机制（“实体”也就是组件：图片，脚本，样式表等等）。添加ETags可以提供一种实体验证机制，比最后修改日期更加灵活。一个ETag是一个字符串，作为一个组件某一具体版本的唯一标识符。唯一的格式约束是字符串必须用引号括起来，源服务器用相应头中的ETag来指定组件的ETag。

Cookie被用于身份认证、个性化设置等诸多用途。Cookie通过HTTP头在服务器和浏览器间来回传送，减少Cookie大小可以降低其对响应速度的影响。

  • 去除不必要的 Cookie；
  • 尽量压缩 Cookie 大小；
  • 注意设置 Cookie 的 domain 级别，如无必要，不要影响到 sub-domain；
  • 设置合适的过期时间。

CSS

把样式表放在中

把样式表放在中可以让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉。
这对内容比较多的页面尤为重要，用户可以先查看已经下载渲染的内容，而不是盯着白屏等待。
如果把样式表放在页面底部，一些浏览器为减少重绘，会在 CSS 加载完成以后才渲染页面，用户只能对着白屏干瞪眼，用户体验极差。把样式表放到文档的HEAD部分能让页面看起来加载地更快。

Javasript

把脚本放在页面底部

浏览器下载脚本时，会阻塞其他资源并行下载，即使是来自不同域名的资源。因此，最好将脚本放在底部，以提高页面加载速度。

压缩JavaScript和CSS

压缩代码可以移除非功能性的字符（注释、空格、空行等），减少文件大小，提高载入速度。

参考资料

《雅虎35条军规——前端性能优化》
https://juejin.im/post/5b73ef38f265da281e048e51