预加载
预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面使用到，一些可能在将来的某些页面中被使用。作为开发人员，我们比浏览器更加了解我们的应用，所以我们可以对我们的核心资源使用该技术
当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip 压缩等，这使得页面加载更快，用户可以尽快使用我们的 Web 应用来达到他们的目标。
资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。
以前这种实践也被称为prebrowsing。但这并不是一种单一的技术，实际上可以拆分成很多小点：dns-prefetch, subresource, prefetch, preconnect和 prerender
DNS 预解析 DNS-Prefetch
DNS-Prefetch通过指定具体的URL来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析DNS。
例如，我们将来可能从 example.com 获取图片或音频资源，那么可以在文档顶部的 <head> 标签中加入以下内容：<link rel="dns-prefetch" href="//example.com">
通过简单的一行代码就可以告知那些兼容的浏览器进行 DNS 预解析，这意味着当浏览器真正请求该域中的某个资源时，DNS 的解析就已经完成了。
项目中有用到第三方的代码时这么做尤其有益；其他的使用场景，比如当静态资源和HTML不在一个域上，而在CDN上；又比如在重定向前可以加上DNS prefetch。
预连接 Preconnect
与 DNS 预解析类似，Preconnect 不仅完成 DNS 预解析，同时还将进行 TCP 握手和建立传输层协议。
用法如下：<link rel="preconnect" href="http://example.com">
现代浏览器都试着预测网站将来需要哪些连接，然后预先建立 socket 连接，从而消除昂贵的 DNS 查找、TCP 握手和 TLS 往返开销。然而，浏览器还不够聪明，并不能准确预测每个网站的所有预链接目标。好在，在 Firefox 39 和 Chrome 46 中我们可以使用 Preconnect 告诉浏览器我们需要进行哪些预连接。
预获取 Prefetch
如果我们确定某个资源将来一定会被使用到，我们可以让浏览器预先请求该资源并放入浏览器缓存中。与 DNS 预解析不同，预获取真正请求并下载了资源，并储存在缓存中。
例如，一个图片和脚本或任何可以被浏览器缓存的资源：<link rel="prefetch" href="image.png">
然而 预获取还依赖于一些条件，某些预获取可能会被浏览器忽略，例如从一个非常缓慢的网络中获取一个庞大的字体文件。并且，Firefox 只会在浏览器闲置时进行资源预获取。
预获取对 webfonts 性能提升非常明显。目前，字体文件必须等到 DOM 和 CSS 构建完成之后才开始下载，使用预获取就可以轻松绕过该瓶颈。
注意：要测试资源的预获取有点困难，但在 Chrome 和 Firefox 的网络面板中都有资源预获取的记录。还需要记住，预获取的资源没有同源策略的限制。
Subresources
Subresources是另一个预获取方式，这种方式指定的预获取资源具有最高的优先级，在所有
prefetch项之前进行
<link rel="subresource" href="styles.css">
rel=prefetch 为将来的页面提供了一种低优先级的资源预加载方式
rel=subresource 为当前页面提供了一种高优先级的资源预加载
所以，如果资源是当前页面必须的，或者资源需要尽快可用，那么最好使用 subresource 而不是 prefetch。
预渲染 Prerender
预渲染类似于在一个隐藏的 tab 页中打开了某个链接 – 将下载所有资源、创建 DOM 结构、完成页面布局、应用 CSS 样式和执行 JavaScript 脚本等。当用户真正访问该链接时，隐藏的页面就切换为可见，使页面看起来就是瞬间加载完成一样。
用法如下：<link rel="prerender" href="http://example.com">
这是一个核武器，因为prerender 可以预先加载文档的所有资源。Google 搜索在其即时搜索页面中已经应用该技术多年了，微软也宣称将在 IE11 中支持该特性。
需要注意的是不要滥用该特性，当你知道用户一定会点击某个链接时才可以进行预渲染，否则浏览器将无条件地下载所有预渲染需要的资源。
Preload
Preload 是一个新规范，该规范还没有被所有浏览器兼容。
Preload 草案建议允许始终预加载某些资源，不像Prefetch有可能被浏览器忽略，浏览器必须请求Preload标记的资源。
用法如下：<link rel="preload" href="image.png">
总结
文章说的大部分预加载技术移动端都不支持，PC支持有限，但我们显然应该知道这些技术的存在，并且持续的关注。
预测用户下一步将访问哪些资源是困难的，需要进行大量的测试，但是这带来的性能提升是明显的。如果我们愿意尝试这些预获取技术，一定会显著提升用户的体验。
作者：阳光的记忆
链接：https://www.jianshu.com/p/c008bae3cb0e
共同学习，写下你的评论
评论加载中...
作者其他优质文章
