预取的概念相当简单。我们通常能知道在浏览器运行之前可能需要的资源。预取技术包括将可能需要的页面或资源信息传达给浏览器以便其提前下载,或者在浏览器调用之前将资源下载到浏览器缓存里,这样请求和下载对象这些系统开销可以优先得到处理或以一个无阻碍的方式完成。
预取内容有很多方法,这里有三个简单的选择。
DNS预解析
DNS是实现人类可读的域名(mysite.com)到计算机可读的IP(123.123.123.123)的映射的协议。DNS解析非常快,每次都在100毫秒内,它必须在任何请求发送到服务器之前进行,这就会引起一个对页面整体加载时间有实际影响的级联反应。我们都知道其他一些域名在随后的页面或者用户会话需要加载资源,例如静态内容的二级域名(images.mydomain.com)或第三方内容的域名。有一些浏览器支持使用meta标签来识别需要被解析的域名,这样一来浏览器可以提前解析它们。通过使用下列的标签做到这一点是十分简单的。
<!– IE9+ –>
添加这一标签使得浏览器可以提前解析DNS,而不是等到资源请求之后才开始解析。对网站上游客可能会访问的其他页面进行DNS预取可能是最有价值的一项技术。Chrome、Firefox以及9.0以上版本的IE浏览器都支持这一特性。
尽管减少几百毫秒看起来微不足道,但汇总起来之后就是一个值得注意的收益。这也是一个安全的优化方法并且易于实现。我很好奇这种技术的使用率,于是我访问了Alexa网站上排名前十万的网站。事实表明只有552个网站(0.55%)目前正在使用DNS预解析技术。这只是成功的一小步,还有更多的网站需利用这种技术。
资源预取
现在,图像占据了很多主流网站总字节数的一大部分。通常,发出请求和下载图像这两个系统开销对性能有显著的影响。不过许多情况下,网站开发人员都知道在什么情况下图像需要不被浏览器过早地检测到,例如通过ajax请求或其他用户在页面操作而加载的图像。资源预取是提前将图像、脚本、样式表或其他资源加载进浏览器。这经常用来处理图像,但也可以处理其他可放在浏览器缓存的资源。
我在这里所提到的三种技术目前为止都是最经典和最常用的。可惜我不能给出一个具体的使用数,因为通过我在访问Alexa时检测到有太多方法可以实现。然而,许多网站没有正确利用这种技术,甚至只预加载一些会引起巨大的用户体验差异的图像。
页面预取/预渲染
页面预取和资源预取十分相似,除了我们实际上让新页面提前自行加载这一点之外。Firefox是第一个使用此技术的浏览器。通过使用下列的标签,你可以提示浏览器预取某个页面(或个别资源)。
在预渲染的情况下,浏览器不仅下载页面还下载页面所需的资源。它也开始在内存里渲染页面(用户不可见),如此一来当页面请求发出时,浏览器就能将页面瞬时呈现给用户。Chrome是首个采用这种技术的浏览器。通过使用下列的标签,你可以提示浏览器预渲染某个页面。
目前为止,与另外两种技术相比,这一技术目是风险最高并最饱受争议的。只有在十分确定用户接下来将浏览哪一个页面的情况下才能进行预渲染。谷歌在这方面是最有名的例子,在有十足把握的情况下它将会预渲染第一个结果页。在我所访问Alexa排名前十万的网站中,我仅发现有95个这样做的网站。尽管这一技术显然不是针对每一个用例,但我认为更多的网站应充分利用这种技术以便改善用户体验。
缺点
通常情况下,预取往往是一个有争议的话题。很多人认为预取不仅效率低下,还导致了带宽的浪费。它还使用了不必要的客户端资源(特别是在移动设备上)。另外值得一提的是,在某些情况下,由于没有明显的方式去辨别是用户访问页面(并浏览它)还是浏览器在用户不知情的情况下预渲染的,预取或预渲染页面会对分析和日志跟踪造成不良影响。
结论
不管所有这些警告,预取可以算得上是一个巨大的胜利。我们永远不必追求最快,但通过将更多的数据储存在缓存里这一技术,我们能更接近这一目标。通过在用户操作之前发起这些巨量的请求,即使是用最慢的网络访问最慢的网站,我们也能大大提高它的感知性能。如果你尚未确定这样做,在你的网站使用这些技术是值得一试的。结果会有所不同,请确保使用真实的用户测量(如Torbit这一网站)找出你的网站还有多少改善预取的空间。
最新内容请见作者的GitHub页:http://qaseven.github.io/