元素的rel属性的属性值preload能够让你在你的HTML页面中元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。本文提供了一个如何有效使用preload机制的基本说明。

基础部分

标签最常见的应用情形就是被用来加载CSS文件，进而装饰你的页面：

但是在这里，我们将使用preload作为rel属性的属性值。这种做法将把元素塞入一个预加载器中，这个预加载器也将用于其他我们所需要的，各种各样的，任意类型的资源。为了完成基本的配置，你还需要通过href和as属性指定需要被预加载资源的资源路径及其类型。

一个简单的例子可能看起来像下面这样 （在这里可以查看示例的JS和CSS源代码，或是在线实例）

     
 
bouncing balls
  

在这里，我们预加载了CSS和JavaScript文件，所以在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。这个例子本身可能有些平淡，但预加载的好处可以更清晰直观的得到展示，在随后的渲染过程中，这些资源得到有效使用。对于更大的文件来说，也是如此。 例如那些在CSS文件中指向的资源，比如字体或是图片；再比如更大的图片和视频文件。

preload还有许多其他好处。使用as来指定将要预加载的内容的类型，将使得浏览器能够：

• 更精确地优化资源加载优先级。

• 匹配未来的加载需求，在适当的情况下，重复利用同一资源。

• 为资源应用正确的内容安全策略。

• 为资源设置正确的Accept请求头。

哪些类型的内容可以被预加载？

许多不同类型的内容都可以被预加载，一些主要可用的as属性值列举如下：

• audio: 音频文件。

• document: 一个将要被嵌入到或