前端性能优化

发表于 | 更新于:
字数统计: 13.1k 字 | 阅读时长 ≈ 49 分钟

基础知识认知

http://www.imooc.com/learn/580

Web前端性能优化

https://coding.imooc.com/class/130.html

2018 前端性能优化清单

性能图.png
本文主要考量客户端性能、服务器端和网络性能，内容框架来自 Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容。
同时，建议关注及时更新的 Google 性能优化指南。
目录：

前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。

  • 来自 Google 的数据表明，一个有 10 条数据 0.4 秒能加载完的页面，变成 30 条数据 0.9 秒加载完之后，流量和广告收入下降 90%。
  • Google Map 首页文件大小从 100KB 减小到 70-80KB 后，流量在第一周涨了 10%，接下来的三周涨了 25%。
  • 亚马逊的数据表明：加载时间增加 100 毫秒，销量就下降 1%。

以上数据更说明「加载时间就是金钱」，前端优化主要围绕提高加载速度进行。

页面内容

减少 HTTP 请求数

Web 前端 80% 的响应时间花在图片、样式、脚本等资源下载上。浏览器对每个域名的连接数是有限制的，减少请求次数是缩短响应时间的关键。
通过简洁的设计减少页面所需资源，进而减少 HTTP 请求，这是最直接的方式，前提是你的 Boss、设计师同事不打死你。所以，还是另辟蹊径吧：

  • 合并 JavaScript、CSS 等文件；

    • 服务器端（CDN）自动合并
    • 基于 Node.js 的文件合并工具一抓一大把

  • 使用CSS Sprite：将背景图片合并成一个文件，通过background-image和background-position控制显示；

  • Image Map：合并图片，然后使用坐标映射不同的区域（演示）。

    缺点：仅适用于相连的图片；设置坐标过程乏味且易出错；可访性问题。不推荐使用这种过时的技术。

  • Inline Assets：使用 Data URI scheme 将图片嵌入 HTML 或者 CSS 中；或者将 CSS、JS、图片直接嵌入 HTML 中。

    会增加文件大小，也可能产生浏览器兼容及其他性能问题（有待整理补充）。

  • 未来的趋势是使用内嵌 SVG。

  • 内容分片，将请求划分到不同的域名上。

    HTTP/2 通过多路复用大幅降低了多个请求的开销。通过数据分帧层，客户端和服务器之间只需要建立一个 TCP 连接，即可同时收发多个文件，而且，该连接在相当长的时间周期内保持打开（持久化），以便复用。
    HTTP/2 的新特性意味着上述优化实践不再适用，但考虑到客户端对 HTTP/2 的支持覆盖程度，还需根据实际数据权衡。

减少 DNS 查询

用户输入 URL 以后，浏览器首先要查询域名（hostname）对应服务器的 IP 地址，一般需要耗费 20-120 毫秒 时间。DNS 查询完成之前，浏览器无法从服务器下载任何数据。
基于性能考虑，ISP、局域网、操作系统、浏览器都会有相应的 DNS 缓存机制。

  • IE 缓存 30 分钟，可以通过注册表中 DnsCacheTimeout 项设置；
  • Firefox 混存 1 分钟，通过 network.dnsCacheExpiration 配置；
  • （TODO：补充其他浏览器缓存信息）

首次访问、没有相应的 DNS 缓存时，域名越多，查询时间越长。所以应尽量减少域名数量。但基于并行下载考虑，把资源分布到 2 个域名上（最多不超过 4 个）。这是减少 DNS 查询同时保证并行下载的折衷方案。

避免重定向

HTTP 重定向通过 301/302 状态码实现。

1
2
3
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

客户端收到服务器的重定向响应后，会根据响应头中 Location 的地址再次发送请求。重定向会影响用户体验，尤其是多次重定向时，用户在一段时间内看不到任何内容，只看到浏览器进度条一直在刷新。
有时重定向无法避免，在糟糕也比抛出 404 好。虽然通过 HTML meta refresh 和 JavaScript 也能实现，但首选 HTTP 3xx 跳转，以保证浏览器「后退」功能正常工作（也利于 SEO）。

缓存 Ajax 请求

Ajax 可以提高用户体验。但「异步」不意味着「及时」，优化 Ajax 响应速度提高性能仍是需要关注的主题。
最重要的的优化方式是缓存响应结果，详见 添加 Expires 或 Cache-Control 响应头。
以下规则也关乎 Ajax 响应速度：

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

延迟渲染
将首屏以外的 HTML 放在不渲染的元素中，如隐藏的