一文读懂preload：快人一步，抢先加载

2023-12-02 08:40:18

preload，是 HTML5 中新增的一个链接属性，它允许你指定某个资源应该在页面加载时立即加载，而不必等到它被实际使用时才加载。这可以减少页面加载时间，提高用户体验。

preload 的基本用法如下：

<link rel="preload" href="late_discovered_thing.js" as="script">

这段代码告诉浏览器，立即加载 late_discovered_thing.js 这个 JavaScript 文件，以便在需要使用它时可以立即执行。

preload 可以加载的资源类型包括：

preload 可以显著减少页面加载时间。根据 HTTP Archive 的数据，在 2022 年 1 月份，全球网站的平均加载时间为 2.9 秒。如果使用 preload，这个时间可以减少 0.5 秒以上。

preload 还可以提高用户体验。当用户在访问一个页面时，他们希望页面能够快速加载。如果页面加载缓慢，用户可能会失去兴趣，甚至离开页面。preload 可以帮助你减少页面加载时间，提高用户体验。

preload 是一种简单的技术，但它可以显著提高网站的性能。如果你想提高网站的性能，preload 是一个值得考虑的选项。

preload的具体使用方法

preload 有两个属性：href 和 as。href 属性指定要加载的资源的 URL，as 属性指定要加载的资源的类型。

preload 的 as 属性可以取以下值：

如果省略 as 属性，则 preload 会根据资源的 URL 来猜测资源的类型。

preload 还可以使用 media 属性来指定资源应该在哪些媒体类型下加载。例如，以下代码告诉浏览器，只在屏幕宽度大于 1024 像素的设备上加载 late_discovered_thing.js 这个 JavaScript 文件：

<link rel="preload" href="late_discovered_thing.js" as="script" media="(min-width: 1024px)">

preload 还支持 crossorigin 属性，该属性可以指定是否允许跨域加载资源。例如，以下代码告诉浏览器，允许跨域加载 late_discovered_thing.js 这个 JavaScript 文件：

<link rel="preload" href="late_discovered_thing.js" as="script" crossorigin>

preload 虽然是一种非常有用的技术，但在使用时也需要注意以下几点：

不要滥用 preload。只对那些真正需要提前加载的资源使用 preload。
preload 可能会增加页面的初始加载时间。这是因为浏览器在加载页面时，会同时加载 preload 指定的资源。如果 preload 指定的资源过多，可能会导致页面的初始加载时间增加。
preload 可能会影响页面的缓存。如果 preload 指定的资源在页面加载后被修改，那么浏览器可能会重新加载该资源。这可能会导致页面的加载速度变慢。

总之，preload 是一种非常有用的技术，但它需要谨慎使用。