了解 preload 和 prefetch，用预加载优化你的前端性能
2024-02-08 07:09:22
在前端开发中，优化性能至关重要。preload 和 prefetch 都是使用 <link> 进行 js 预加载的两种方式，它们都可以帮助浏览器提前加载资源，从而减少加载时间。但是，这两种方式有什么不一样呢？它们会不会阻塞 DOM 就绪和 load 呢？
preload 和 prefetch 的区别
preload 和 prefetch 的主要区别在于它们加载资源的方式不同。preload 会立即加载资源，而 prefetch 则会等到浏览器空闲时再加载资源。因此，preload 会阻塞 DOM 就绪和 load，而 prefetch 不会。
preload
preload 是通过在 <head> 标签中添加 <link> 标签来加载资源的。例如：
<link rel="preload" href="script.js" as="script">
这段代码会告诉浏览器立即加载 script.js 文件。一旦资源加载完成，它就会被缓存起来，以便以后使用。
prefetch
prefetch 是通过在 <head> 标签中添加 <link> 标签来加载资源的。例如：
<link rel="prefetch" href="script.js" as="script">
这段代码会告诉浏览器等到浏览器空闲时再加载 script.js 文件。一旦资源加载完成，它就会被缓存起来，以便以后使用。
preload 和 prefetch 会不会阻塞 DOM 就绪和 load？
preload 会阻塞 DOM 就绪和 load，而 prefetch 不会。这是因为 preload 会立即加载资源，而 prefetch 则会等到浏览器空闲时再加载资源。
preload
preload 会阻塞 DOM 就绪和 load，这是因为浏览器在加载资源之前必须解析 HTML 文档。如果资源加载时间过长，那么 DOM 就绪和 load 事件就会被阻塞。
prefetch
prefetch 不会阻塞 DOM 就绪和 load，这是因为浏览器会在空闲时加载资源。因此，即使资源加载时间过长，DOM 就绪和 load 事件也不会被阻塞。
何时使用 preload 和 prefetch？
preload 和 prefetch 都可以用来预加载脚本，但是它们的使用场景不同。
preload
preload 适用于那些需要立即加载的脚本，例如：
- 网站的主脚本
- 第三方库
- 大型脚本
prefetch
prefetch 适用于那些不需要立即加载的脚本，例如：
- 分析脚本
- 广告脚本
- 社交媒体脚本
结论
preload 和 prefetch 都是预加载脚本的两种有效方式。preload 会立即加载资源，而 prefetch 则会等到浏览器空闲时再加载资源。preload 会阻塞 DOM 就绪和 load，而 prefetch 不会。因此，在使用 preload 和 prefetch 时，需要根据具体情况选择合适的方式。
