Link prefetch 预加载

面试时被问过 link prefetch，发现我还是对 HTML5 的内容有所小瞧，那就做一篇笔记吧。

什么是预加载

借助 MDN-Link prefetching FAQ 的描述

链接预取是一种浏览器机制，其利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到。

简单来说，就是浏览器空闲时加载指定内容，缓存起来，这样用户想取的时候，能直接从缓存里得到。节省了时间。举个例子

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.baidu.com/" />

<!-- 预加载图片 -->
<link rel="prefetch" href="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/06/07/ChMkJlo50b6IBlQLAAFGULqiVhcAAjUpgN-M7wAAUZo647.jpg?downfile=1513861639609.jpg" />

浏览器会在 DOM 加载完之后找一个空闲的时间，去把上文里的 baidu 首页 HTML 的资源和图片的资源预先得到缓存，那么当你点击页面某个按钮跳转去百度，能直接从缓存里得到。图片也是同理，页面中如果有个下一页的功能，你也可以提前让浏览器准备好这张图片。

还可以进行 DNS prefetch，省去到目标页面时查找 IP 的时间。

<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'>
<link rel='dns-prefetch' href='http://fls-na.amazon.com'>

除了预加载资源，预解析 DNS，还能办到预渲染，可以提前加载好用户即将访问的下一个页面的全部内容。

<!-- chrome -->
<link rel='prerender' href='http://www.pagetoprerender.com'>

<!-- ff -->
<link rel="next" href="http://www.pagetoprerender.com">  

有了浏览器缓存，为何还要预加载

1. 用户可能是第一次访问网站，此时还无缓存
2. 用户可能清空了缓存
3. 缓存可能已经过期，资源将重新加载
4. 用户访问的缓存文件可能不是最新的，需要重新加载

浏览器的空闲时间？

顶层文档的 onLoad 方法后(window.onload)。

预加载的限制

1. URL 中包含下载资源
2. 页面中包含音频、视频
3. POST、PUT 和 DELETE 操作的 ajax 请求
4. HTTP 认证(Authentication)
5. HTTPS 页面（从 Gecko 1.9.1 (Firefox 3.5) 开始，才支持获取 https 内容）
6. 含恶意软件的页面
7. 弹窗页面
8. 占用资源很多的页面
9. 打开了 chrome developer tools 开发工具

资源正在被预载中点击了某个链接会发生什么？

当用户点击一个连接，或开始任何形式的页面加载时，预取操作将被停止且任何预取提示将被丢弃。

如果后台正在进行下载任务会发生什么？预取会争夺带宽吗？

视情况而定。如果你正在使用 Mozilla 下载某些东西，预取将被推迟到下载结束。