资源预加载 Preload

　　当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip 压缩等，这使得页面加载更快，用户可以尽快使用我们的 Web 应用来达到他们的目标。

　　资源预加载 是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

　　这种做法曾经被称为 prebrowsing，但这并不是一项单一的技术，可以细分为几个不同的技术：DNS-prefetch、subresource 和标准的 prefetch、preconnect、prerender。

　　本文将对 Preload 这一新标准的介绍。Preload 作为一个新的web标准，旨在提高性能和为web开发人员提供更细粒度的加载控制。Preload使开发者能够自定义资源的加载逻辑，且无需忍受基于脚本的资源加载器带来的性能损失。目前只有Chrome支持Preload。

　　Preload是为处理当前页面所生。Preload 有 as 属性，这让浏览器可做一些 subresource 和 prefetch 无法实现的事：

• 浏览器可以设置正确的资源加载优先级，这种方式可以确保资源根据其重要性依次加载， 所以，Preload既不会影响重要资源的加载，又不会让次要资源影响自身的加载。
• 浏览器可以确保请求是符合内容安全策略的，比如，如果我们的安全策略是 Content-Security-Policy: script-src 'self' ，只允许浏览器执行自家服务器的脚本，as 值为 script 的外部服务器资源就不会被加载。
• 浏览器能根据 as 的值发送适当的 Accept 头部信息
• 浏览器通过 as 值能得知资源类型，因此当获取的资源相同时，浏览器能够判断前面获取的资源是否能重用。

　特点：

　　（1）不会阻塞页面加载（window onload）

　　（2）只下载不执行（除非指定了 onload，定义资源加载完毕后的回调函数。）

　　　　

　　（3）使用as属性可以指定资源的类型

　　忽略 as 属性，或者错误的 as 属性会使 preload 等同于 XHR 请求，浏览器不知道加载的是什么，因此会赋予此类资源非常低的加载优先级。　　　

　　（4）可以传递 Media 信息。

　preload 带来的新功能：

　　（1）资源的提前加载

　　preload 一个基本的用法是提前加载资源，尽管大多数基于标记语言的资源能被浏览器的预加载器（ Preloader ）尽早发现，但不是所有的资源都是基于标记语言的，比如一些隐藏在 CSS 和 Javascript 中的资源。当浏览器发现自己需要这些资源时已经为时已晚，所以大多数情况，这些资源的加载都会对页面渲染造成延迟。

　　现在，有了 preload，你可以通过一段类似下面的代码对浏览器说，”嗨，浏览器！这个资源你后面会用到，现在就加载它吧。“

　　（2）对字体的提前加载

　　web 字体是较晚才能被发现的关键资源（late-discovered critical resources）中常见的一类 。web 字体对页面文字的渲染资至关重要，但却被深埋 CSS 中，即便是预加载器有解析 CSS，也无法确定包含字体信息的选择器是否会真正应用在 DOM 节点上。而且，即便浏览器能对字体文件做出合理的预加载，一旦有新的 css 规则覆盖了现有字体规则，前面的预加载就多余了。

但有了 preload 这个标准，简单的一段代码就能搞定字体的预加载。

　　需要注意的一点是：crossorigin 属性是必须的，即便是字体资源在自家服务器上，因为用户代理必须采用匿名模式来获取字体资源。Chrome 支持 WOFF2，也是目前唯一支持 preload 的浏览器。

　　（3）动态加载，但不执行

　　在 preload 出现之前，你能做的很有限。如果你的方法是在希望脚本执行的位置插入脚本，由于脚本只有在加载完成以后才能被浏览器执行，也就是说你得等上一会儿。如果采用 XHR 提前加载脚本，浏览器会拒绝重用这段脚本，有些情况下，你可以使用 eval 函数来执行这段脚本，但该方法并不总是行得通，也不是完全没有副作用。

　　（4）基于标记语言的异步加载

　　preload 的 onload 事件可以在资源加载完成后修改 rel 属性，从而实现非常酷的异步资源加载。

　　　举个例子，你想尽可能快的加载一段统计页面访问量的代码，但又不愿意这段代码的加载给页面渲染造成延迟从而影响用户体验，关键是，你不想延迟 window 的 onload 事件。有了preload， 分分钟搞定。

　　（5）响应式加载

　　preload 是一个link，根据规范有一个media 属性（现在 Chrome 还不支持，不过快了），该属性使得选择性加载成为可能。

　　假设你的站点同时支持桌面和移动端的访问，在使用桌面浏览器访问时，你希望呈现一张可交互的大地图，而在移动端，一张较小的静态地图就足够了。你肯定不想同时加载两个资源，现在常见的做法是通过 JS 判断当前浏览器类型动态地加载资源，但这样一来，浏览器的预加载器就无法及时发现他们，可能耽误加载时机，影响用户体验。

　　通过 Preload，我们可以提前加载资源，利用 media 属性，浏览器只会加载需要的资源。

   使用方式：

　　 （1）HTML中定义：

　　  （2）Javascript中定义：（只是动态加载但不执行）

 

————————————————

参考文章：http://www.tuicool.com/articles/QbiEJbI