加速网站速度的建议之内容篇

最小化 Http 请求数目

这是优化过程中非常重要的一点，尤其是针对「首次访问网站的用户」，此时浏览器中无相关缓存，所有资源均需从网络加载。每次建立连接，都是需要耗费时间和网络资源。而且 Http 1.0/1.1 协议下，浏览器对每个域名同时只能建立 6 个连接，其他连接则需要排队与阻塞。页面显示的大部分时间都用于下载页面中的组件：图像、样式表、脚本、Flash 等，减少组件的数量反过来会减少呈现页面所需的 HTTP 请求数量，这是加快页面速度的关键。

相关的技术包括：

「组合文件」（通过将所有脚本组合到一个脚本中来减少 HTTP 请求数量的方法）；

「CSS Sprites」（减少图像请求数量的首选方法，您的背景图像组合成单个图像，并使用 CSS background-image 和 background-position 属性来显示所需的图像片段）、「图像映射」（将多个图像组合成一个图像，不推荐使用）

减少 DNS 解析时间

It typically takes 20-120 milliseconds for DNS to lookup the IP address for a given hostname.

一次 DNS 解析大约需要 20-120 毫秒。

DNS 解析时间与网站资源上的域名数量有关，通过降低网站资源的域名数量，可以减少 DNS 解析时间。但另一方面，降低网站资源数量也会降低页面上并发下载的数量。「建议将网站组件拆分为 2~4 个域名下」。

避免重定向

重定向是通过 HTTP 状态码 301,302 实现的。

重定向会降低用户体验。重定向时，嵌入重定向的 HTML 文档下载完，才可能开始真正的页面下载。

一个非常常见的重定向是，URL 尾部的 \ 被遗漏。如 http://xxxx/file ，当其获取响应为 301 时，会重定向至 http://xxxx/file/。

缓存 Ajax

即缓存从后台服务器请求的数据。通过在 Response 中设置和添加 Expires 或 Cache-Control。

延迟加载组件

这一点很好理解。熟悉 <img> 的知道，它有一个属性为loading，当设置为

loading="lazy"

时，只有当图片在视窗中出现时，图片才会实际加载，而不在视窗体内，图片实际不会加载。

预加载组件

通过预加载组件，你可以利用浏览器闲置的时间，请求你将来需要的组件（如图片、样式和脚本）。这样，当用户访问下一个页面时，你可以在缓存中已经有了大部分的组件，你的页面将为用户加载得更快。现在手机浏览器分页时，普遍有预加载下一页的功能。

减少 DOM 元素的数量

DOM 元素多会使得在 JavaScript 中的 DOM 访问速度更慢。例如，当你想添加一个事件处理程序时，如果你在页面上循环浏览 500 或 5000 个 DOM 元素，就会有不同的效果。

在浏览器 console 中输入

document.getElementsByTagName('*').length

可以查看页面 dom 数量。

建议：检查类似页面的 dom 数量。

拆分组件到多个域名

拆分可以更大程度的实现并行下载。在“DNS 解析”中我们有过介绍，确保使用的域名不超过 2 - 4 个。

最小化 iframes 的数量

<iframe>的优点包括：有助于处理缓慢的第三方内容，如广告；是一个安全的沙盒；可以并行的下载脚本；

<iframe>的缺点是：即使空白成本也很高；阻碍页面运行；非语义。

避免 404 错误

执行一个 HTTP 请求而得到一个无用响应浪费资源。