HTML：用对 preload、prefetch提升网页加载速度
在HTML中，<link> 标签的 rel 属性可以设置为 preload 或 prefetch 来优化网页加载性能。
preload 用于指定在页面加载生命周期中需要尽早加载的资源，例如样式表、脚本或字体。浏览器会在解析 HTML 时开始预加载这些资源。
prefetch 用于指定页面可能会在未来某个时间点需要但当前不必要的资源。浏览器会在空闲时间预先获取这些资源，并将它们存储在缓存中，以便当用户导航到其他页面时可以更快地使用这些资源。
以下是使用 preload 和 prefetch 的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Preload and Prefetch Example</title>
<!-- 预加载关键的CSS样式表 -->
<link rel="preload" href="styles.css" as="style">
<!-- 预加载关键的JavaScript脚本 -->
<link rel="preload" href="main.js" as="script">
<!-- 预取其他可能会用到的资源 -->
<link rel="prefetch" href="icons.svg" as="image">
<link rel="prefetch" href="other-script.js" as="script">
</head>
<body>
<header>
<!-- 页面内容 -->
</header>
<main>
<!-- 页面内容 -->
</main>
<footer>
<!-- 页面内容 -->
</footer>
</body>
</html>在这个例子中，preload 被用于提示浏览器立即开始下载并执行与页面当前加载相关的关键资源。prefetch 被用于指示浏览器在空闲时间下载可能在将来某个时间点需要的资源。这样可以加速页面的加载速度，提升用户体验。
评论已关闭