📅 最后修改于: 2023-12-03 15:01:15.986000 🧑 作者: Mango
HTML 预加载属性 <link> 和 <script> 元素都包含一个 preload 属性，当您希望在浏览器渲染首屏时预先加载页头资源时，可以使用预加载属性。
预加载元素应该在页面 content 展现之前声明。这有助于确保浏览器有充足的时间预取和缓存资源，以便能够快速呈现页面。
预加载的资源不会阻止页面的 initial paint，但它们会阻止首次有意义的交互行为的时间（例如第一次触摸链接或滚动时间），直到预加载资源加载完毕。
以下是 preload 属性的语法：
<link rel="preload" href="your-resource" as="type">
rel 属性告诉浏览器链接的关系，href 是资源 URL，as 属性告诉浏览器资源类型。
下面列举了 as 属性支持的类型：
fetch: 对于在未来执行 JavaScript 的案例，我们总会需要在（现在）开始时预先加载数据
image: 图片文件，SVG、jpg、png 等
script: JavaScript 文件
style: CSS 文件
下面是完整的示例代码：
<!doctype html>
<html>
<head>
<title>Preload Attribute Example</title>
<link rel="preload" href="your-stylesheet" as="style">
<link rel="preload" href="your-javascript" as="script">
<link rel="preload" href="your-image" as="image">
</head>
<body>
<h1>Welcome to My Site</h1>
<p>This is an example site for the preload attribute.</p>
</body>
</html>
总之，当您需要在让浏览器更好地缓存您的资源并加速页面加载时，使用预加载属性是一个非常好的方法。
注意：
如果您的页面没有使用大量的 CSS、JavaScript 或图片，预加载的效果是微不足道的。
使用预加载属性来管理资源的加载顺序并不是万无一失、不会失灵的，它不会像某些优化那样带来大幅度的性能提升。
您可以在 Chrome DevTools 的 Network 面板中查看资源是否已被预加载和使用 preload attribute 对文件大小的影响。