前端相关

使用预加载提速你的网站

  • 原文：Speed Up Your Site Using Prefetching
  • 原作者：Jon Fox 译者：潜行者m
  • 版权声明：版权归原作者所有，翻译仅供学习使用，内容有修改，转载请先开启节操模式，保留上面信息。
    预加载（prefetching）这个东西很好理解。我们都知道浏览器可能会在渲染之前需要一些资源。预加载不仅仅提前告诉浏览器这个页面或者可能用到的资源，而且还通常提前保存这个资源到浏览器的缓存，这样就可以以非阻塞的方式请求、下载对应资源提高效率。

有很多方法可以实现预加载，但是这里有三种比较简单实用的方法。

DNS 预加载

DNS 是将域名转换成服务器 IP 地址的协议。DNS 的解析速度通常是非常快的一般在 100ms 以内，但是因为 DNS 解析要发生在任何对服务器的请求之前，这样会造成一个级联效应（cascade effect），这样就会增加页面加载的时间。浏览器解析页面或者 session 的时候会访问静态文件加速服务器的域名，会使用诸如 images.mydomin.com 等域名来加载静态文件。有些浏览器支持 meta 标签可以提前声明这些需要用到的静态加速服务器域名，这样浏览器就可以预先解析它们，调用资源直接通过解析后的 IP ，不需要再进行 DNS 解析。写法如下：

<link href=”//my.domain.com” rel=”dns-prefetch” />
<link href=”http://my.domain.com/" rel=”prefetch” /> <!– IE9+ –>

增加了这个标签之后，支持它的浏览器将会提前进行域名的 DNS 解析，而不用等待请求资源的时候再去解析它。这项技术一般用在浏览者有可能去的页面，提前对页面进行 DNS 的预加载。Chrome、Firefox 和 IE9+ 支持这个功能。

即使看上去只是节省了几百毫秒而已，但是合计起来也是不少的时间。它是一种安全的优化方法同时很容易实现。我很好奇有多少网站使用了这项技术，我打开了 Alexa 排名前 100K 的网站。但是只有 552 个网站（使用率 0.55%）正确的使用了 DNS 预加载技术。这么简单的技术应该被更多的网站使用。

资源预加载

在现在的网站中，网页的大小很大程度上取决于网页中图片的大小。如果提前请求并且下载这些图片，可以有明显的提速效果。大多数情况下，网页作者知道一个图片什么时候需要加载这样就不需要提前在浏览器中声明，例如使用 ajax 或者浏览者浏览页面时触发的一些事件来加载一个图片。资源预加载就是提前让浏览器加载图片、脚本、样式或者其他资源。不仅仅用于加载图片，可以让所有类型的资源提前被缓存在浏览器的缓存中。

这项技术是最久远古老和最经常使用的，抱歉，我无法给出具体的统计数字。仍然有很多网站没有正确的使用这项技术，然而仅仅预加载几张图片就可以制造巨大的用户体验差异。

页面预加载、预渲染

页面预加载就像资源预加载，不同的是页面预加载提前加载了它本身。这项技术首先在 Firefox 浏览器中可以使用。你可以使用下面的标签来测试一下别的浏览器看看这个页面（或者相关资源）能否被提前加载：

    <link href=”/my-next-page.htm” rel=”prefetch” />

不同于预渲染，浏览器不仅仅会下载这个页面，而且还会把这个页面需要用到的资源一块下载下来。通常在内存中渲染这个页面（不会被浏览者看到）这样当请求这个页面的时候就可以很快显示在浏览者面前。预渲染最先在 chrome 中可以使用。你可以在页面中添加下面标签来实现预渲染：

    <link href=”http://mydomain.com/my-next-page.htm" rel=”prerender” />

这项技术在目前非常有争议，在其他技术中也很有风险。预渲染的那个页面必须非常确定是浏览者即将浏览的页面。比较常见的例子是 Google 搜索，它将会预渲染页第一个返回页面。在 Alexa 排行榜前 100K 个站点中，我只发现了 95 个使用这项技术的例子。即使这项技术还不是很成熟也无法适应所有需求，但是我认为很多网站应该用一下来提升用户体验。

争议

预加载一直是有争议的话题。很多人们认为它没有效果而且在浪费宽带。而且它还用到一些不重要的客户端的资源（尤其是很多手机设备）。此外值得一提的是，预加载、预渲染页面可能会导致一些浏览者统计和访问日志记录的问题，因为系统不知道浏览者是否真正访问过这个页面还是通过预加载请求的。

总结

尽管有一些问题，但是预加载还是有很大优势的。请求的速度我们一般无法控制，所以把资源提前尽可能多的放入缓存是我们解决问题的方法。当用户在等待请求的时候，成本太高了，我们可以使用这些技术大大的提升性能。如果你还没有做这些，建议你去应用这些技术到你的网站上。结果可能不一样，所以你可以使用专业工具（例如：Torbit)来检查预加载技术帮你做了多少。