1.什么是资源预加载？

在打开一个应用或者网站的时候，一般都会有一个资源加载的进度条，资源加载完成后，才会打开页面，这个过程其实就是一个资源预加载的过程，资源预加载是我们可以使用的一种性能优化技术，用于提前告知浏览器某些资源可能在当前页面用到或者某些资源可能在将来的某些页面用到。预加载也可以简单理解为提前请求所有需要的资源在本地加载，以便后续使用，当需要用到的时候，直接从缓存中取出资源，从而加快响​​应速度。

2.为什么需要使用预加载？

在网页整体加载完成之前，会先加载部分主要内容，以便为用户提供更好的体验，减少等待时间。否则，如果一个页面的内容过多，可能需要几秒甚至更长时间才能加载完成。如果不使用预加载技术，在加载完成所有内容之前，页面会有一段时间是空白的。这会给用户带来不好的浏览体验。

3. 可预加载的内容

1.Script：JavaScript文件。

2.样式：css样式表。

3.Front：字体文件。

4.Image：图片文件。

5.Video：视频文件。

6.Audio：音频文件。

7. 文档：要嵌入或在内部的 HTML 文档。

8.Enbed：将嵌入到元素中的资源，例如插件。

9.FFetch：通过fetch和XHR请求获取的资源，比如ArrayBuffer或者JSON文件。

10.对象：将嵌入到元素中的文件。

11.Track：WebVTT 文件。

4. 预压的定义和特点

preload 是 link 元素中 rel 属性的值：

Preload 提供了一种声明式命令，允许浏览器预先加载指定的资源，而不是在加载后执行，而是在需要时执行。这样就将加载和执行分开，而不会阻塞渲染和文档 onload 事件。

使用preload之后，资源无论是否使用都会被提前加载，对于一些不确定是否需要加载的资源，尽量不要使用proload，避免增加页面加载负担。

Preload基本使用格式：

该文件表示需要预加载的内容。

type表示需要加载的内容类型

使用 as 指定类型的好处：

1.更精准的资源加载优先级优化

2. 满足未来的负载要求并在适当的情况下重复使用相同的资源

3. 对资源应用正确的内容安全策略

4. 为资源设置正确的 Accept 请求标头

5. 预加载用例

1.预加载js和css

这里我们预加载js和css，以便在后续的页面渲染需要用到它们的时候可以立即使用。

2. 使用图像对象

var 图像 = 新图像（）

图像.src = “a.png”

3. 脚本

首先创建一个 HTMLLinkElement 实例，然后将其附加到 DOM：

浏览器预加载此文件但不会执行它。

如果需要执行可以使用如下方法：

4.使用 PreloadJS 库

PreloadJS 提供了一种一致的方式来预加载内容，供在 HTML 应用程序中使用。预加载可以使用 HTML 标签以及 XHR 进行。默认情况下，PreloadJS 会尝试使用 XHR 加载内容，因为它提供了对进度的控制和对完成事件的更好支持，但由于跨域问题，使用基于标签的加载可能会更好。详细使用方法请参考：

6. 其他资源预加载机制

1. 已经被很多浏览器支持了相当长一段时间，但它的目的是为了下一次导航/页面（比如当你进入下一个页面时）预取一些资源。这个做法很好，但是对于 当前页面 来说并没有什么帮助。另外，浏览器会给使用 prefetch 的资源相对比使用 preload 的资源更低的优先级，毕竟当前页面相对比下一个页面重要。

2. Chrome 已经支持它一段时间了。但它无法处理获取内容的优先级（因为不存在），所以这些资源将以非常低的优先级加载，这使得它的作用相当有限。

了解全新 Titanium 云服务

鑫泰云服务制作的一些精品技术资料

,