一文带你深入理解Preload机制
一、Preload 是什么？
<link rel="preload"> 是 HTML 中的一种资源预加载机制，它允许浏览器在解析页面时预先加载特定的资源（如样式表、脚本、图像等），以提高页面加载性能。
二、Preload 的原理
为了详细分析 preload 的加载原理，我们首先需要理解浏览器渲染网页的基本原理和过程。这个过程可以分为以下几个主要阶段：
在这个简化的流程图中，preload 资源的加载发生在 解析HTML 的阶段，并优先于构建DOM树和CSSOM树的过程。通过提前加载这些关键资源，preload 帮助浏览器更高效地完成页面渲染。
预加载的原理流程分析
- 在 HTML 中声明: 当你在 HTML 中使用
<link rel="preload">标签并指定资源的类型和地址时，浏览器会意识到这个资源是需要优先加载的。 - 触发时机：
preload标签会在浏览器解析 HTML 文件时就开始加载资源，即在 HTML 解析的过程中就会被识别和触发。 - 加载优先级：
preload提供的资源加载优先级高于普通的外部资源加载（例如常规的 JS 或 CSS 文件）。它会在浏览器的资源加载队列中占据优先位置。 - 提高性能：通过
preload提前加载当前页面关键的资源（如 CSS、JS、字体等），在构建渲染树时，这些资源已准备就绪，可以减少后续请求中的延迟，从而避免页面渲染的阻塞，提高页面加载的效率。
三、使用
<link rel="preload"> 的基本用法如下：
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="app.js" as="script">
<link rel="preload" href="image.jpg" as="image">
主要属性：
总共有3种，分别为href、as和crossorigin，它们对应的功能说明分别如下：
href: 指向预加载资源的URL，是必填标识符。as: 指定资源的类型，这可以帮助浏览器更好地优化请求和缓存。常见的类型有：
script: JavaScript 文件style: CSS 文件image: 图片font: 字体
document: HTML 文档crossorigin: 这个比较少见，经常用在内嵌的iframe或微前端中，用于指定跨域请求的凭证（如anonymous或use-credentials）。这在涉及 CORS（跨域资源共享）资源时是必需的。
加载过程示例
下面是一个简单的示例，说明如何利用预加载提高页面性能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preload Example</title>
<!-- 预加载样式表 -->
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" href="styles.css">
<!-- 预加载脚本 -->
<link rel="preload" href="main.js" as="script">
</head>
<body>
<h1>Hello, World!</h1>
<script src="main.js"></script>
</body>
</html>
四、预加载与其他加载策略的比较
Preload vs Prefetch:
这也是面试题常见的问题，相信大家在八股文中也经常碰到。preload 和 prefetch 都是 HTML 中用于优化资源加载的技术，但它们的用途和时机有所不同。具体区别如下：
| 特性 | preload | prefetch |
|---|---|---|
| 目标不同 | 提前加载当前页面需要的关键资源 | 提前加载将来可能需要的资源 |
| 优先级不同 | 高，资源优先加载并阻塞页面渲染 | 低，资源在空闲时间加载，不会阻塞页面渲染 |
| 用途不同 | 加载当前页面需要的资源（如样式、脚本、字体） | 加载未来可能需要的资源（如下一页的 JS 文件） |
| 加载时机不同 | 在页面加载时，确保资源尽早可用 | 页面渲染完成后，在空闲时间加载 |
在这里，为了让大家有更清晰的了解，我们进一步对preload、prefetch和普通加载资源，三者之间在渲染流程上的对比，如下：
Preload vs async/defer:
async 和 defer 是用来优化 JavaScript 文件的加载，它们不属于 preload 的机制。使用这两个属性可以让 JavaScript 文件异步加载并避免阻塞页面渲染。
async 和 defer的关系，有点像Preload 和 Prefetch的关系，它们的区别都是资源加载后使用时机的问题。
注意事项
-
预加载并不会指示浏览器立即使用该资源，只有当有实际的使用需求时，浏览器才会利用这些已加载的资源。
-
不要过度使用预加载，过多的资源预加载会导致网络拥塞，因此应根据实际需求合理配置。
-
确保资源的
as属性设置正确，以便浏览器优化请求，这点与SEO的优化有着异曲同工之妙，有点类似dom的语意化标签，帮助SEO更快速的识别和搜索。
五、总结
通过以上的介绍，相信你对preload有着更深的理解，合理运用 <link rel="preload">，可以有效提升网页的加载性能与用户体验。
在开发过程中，建议根据页面结构和用户交互模式，智能地选择需要预加载的资源，以达到最佳效果。同时，切记勿要滥用，否则过度地使用预加载preload，同样会导致网络堵塞。
