前端性能优化-资源预加载

前端性能优化-资源预加载

预加载

预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面使用到，一些可能在将来的某些页面中被使用。作为开发人员，我们比浏览器更加了解我们的应用，所以我们可以对我们的核心资源使用该技术。

预加载可以拆分成很多小点：dns-prefetch, subresource, prefetch, preconnect和 prerender

1.dns预解析 dns-prefetch

dns预解析通过指定具体的URL来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析DNS。

1

<link rel="dns-prefetch" href="//www.xxxx.com">

2.预连接 preconnect

预连接与 dns 预解析类似，Preconnect 不仅完成 DNS 预解析，同时还将进行 TCP 握手和建立传输层协议。

1

<link rel="preconnect" href="//www.xxxx.com">

3.预获取 prefetch

预获取指的是如果我们确定某个资源将来一定会被使用到，我们可以让浏览器预先请求该资源并放入浏览器缓存中。与 DNS 预解析不同，预获取真正请求并下载了资源，并储存在缓存中。

1

<link rel="prefetch" href="//www.xxxx.com/style.css">

4.优先级较高的预获取 subresource

1

<link rel="subresource" href="//www.xxxx.com/style.css">

5.预渲染 prerender

预渲染类似于在一个隐藏的 tab 页中打开了某个链接 – 将下载所有资源、创建 DOM 结构、完成页面布局、应用 CSS 样式和执行 JavaScript 脚本等。当用户真正访问该链接时，隐藏的页面就切换为可见，使页面看起来就是瞬间加载完成一样。

1

<link rel="prerender" href="//www.xxxx.com">

探测一个网页是否正在被prerender

1)打开Chrome Task Manager(Chrome浏览器右上角三个点工具栏—>工具—>任务管理器)

2)加载一个包含prerender的页面

3)在Chrome Task Manager中如果看到prerender打头的任务，说明你的页面正在被prerender。