async/defer/preload性能优化
这两个是前端性能优化中非常重要的技术点。以下是详细解释和示例代码，帮助你理解它们的用途和实现方式：
1. 使用 async 或 defer 属性优化 <script> 标签的加载
问题背景
- 默认情况下，浏览器在解析到
<script>标签时会暂停 HTML 解析，下载并执行脚本，这会导致页面渲染阻塞，影响加载性能。 - 使用
async或defer属性可以优化脚本的加载行为，减少对页面渲染的影响。
async 属性
- 作用：异步加载脚本，脚本下载完成后立即执行，不会阻塞 HTML 解析。
- 特点：
- 脚本的执行顺序不确定（先下载完的先执行）。
- 适用于不依赖其他脚本的独立脚本。
- 示例：
<script src="script1.js" async></script> <script src="script2.js" async></script>
defer 属性
- 作用：延迟加载脚本，脚本会在 HTML 解析完成后、
DOMContentLoaded事件触发前执行。 - 特点：
- 脚本的执行顺序与它们在文档中的顺序一致。
- 适用于依赖 DOM 或其他脚本的脚本。
- 示例：
<script src="script1.js" defer></script> <script src="script2.js" defer></script>
对比
| 属性 | 加载行为 | 执行时机 | 适用场景 |
|---|---|---|---|
| 默认 | 阻塞 HTML 解析 | 下载完成后立即执行 | 无特殊需求 |
async | 异步加载，不阻塞解析 | 下载完成后立即执行 | 独立脚本，不依赖其他脚本 |
defer | 异步加载，不阻塞解析 | HTML 解析完成后执行 | 依赖 DOM 或其他脚本的脚本 |
2. 使用 <link rel="preload"> 预加载关键资源
问题背景
- 浏览器默认的资源加载优先级可能无法满足某些关键资源的需求，导致页面渲染延迟。
- 使用
<link rel="preload">可以提前加载关键资源，优化页面性能。
<link rel="preload">
- 作用：告诉浏览器提前加载指定资源，确保资源在需要时已经可用。
- 特点：
- 不会自动执行或应用资源，只是提前加载。
- 适用于字体、图片、脚本、样式等关键资源。
- 示例：
<!-- 预加载 CSS 文件 --> <link rel="preload" href="styles.css" as="style"> <!-- 预加载 JavaScript 文件 --> <link rel="preload" href="script.js" as="script"> <!-- 预加载字体文件 --> <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> <!-- 预加载图片 --> <link rel="preload" href="image.jpg" as="image">
as 属性
- 用于指定资源的类型，帮助浏览器正确设置优先级和缓存策略。
- 常见值：
style、script、font、image、document等。
注意事项
- 预加载的资源应在页面中实际使用，否则会造成资源浪费。
- 对于跨域资源（如字体），需要添加
crossorigin属性。
3. 实际应用场景
async/defer：- 第三方分析脚本（如 Google Analytics）通常使用
async。 - 依赖 DOM 的脚本（如初始化组件）通常使用
defer。
- 第三方分析脚本（如 Google Analytics）通常使用
<link rel="preload">：- 预加载首屏关键 CSS 或字体，减少渲染阻塞。
- 预加载首屏图片，提升用户体验。
4. 总结
async和defer：用于优化脚本加载行为，减少页面渲染阻塞。<link rel="preload">：用于提前加载关键资源，确保资源在需要时可用。- 这些技术可以显著提升页面加载性能，是现代前端开发中常用的优化手段。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimization Example</title>
<!-- 预加载关键资源 -->
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<!-- 使用 defer 加载依赖 DOM 的脚本 -->
<script src="script.js" defer></script>
<!-- 使用 async 加载独立脚本 -->
<script src="analytics.js" async></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
通过理解并应用这些技术，你可以显著提升页面的加载速度和用户体验。