加速网站速度的35条建议

发表于 更新于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

这是我参与更文挑战的第25天，活动详情查看： 更文挑战

起源

继上次学习Httpwatch与DynaTrace Ajax工具之后，继续查找能帮助提升网站速度的建议或方法。

仍然是在书籍《精通软件性能测试与LoadRunner实战》中，其中提到了35条实用建议，另外提到了Yahoo Developer上的详细文档，方向覆盖Content，服务，Cookie，CSS，JavaScript，图片，移动端。

我们一一探讨与思量！

Content

最小化Http请求数目

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

相关的技术包括：

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

CSS Sprites（减少图像请求数量的首选方法，您的背景图像组合成单个图像，并使用 CSSbackground-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数量。

文中提到雅虎主页DOM数量小于700。

拆分组件到多个域名

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

最小化iframes的数量

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

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

避免404错误

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