浏览器在
加载网页资源时，会根据资源的类型、位置以及开发者指定的方式决定其
加载顺序。为了优化页面性能和用户体验，可以通过多种方式控制资源的
加载顺序，包括使用HTML标签属性、JavaScript脚本以及HTTP头信息等手段。
### 资源
加载顺序控制方法
#### 1. 使用 `<link rel="preload">` 提前
加载关键资源
通过在 `<head>` 中添加 `<link rel="preload">` 标签，可以告诉
浏览器某些资源是当前页面必需的，应以高优先级尽快下载[^2]。例如，预
加载字体文件或关键的 JavaScript 文件：
```html
<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="main.js" as="script">
```
这种方式可以让
浏览器提前知道哪些资源是关键路径上的，并优先
加载这些资源。
#### 2. 使用 `async` 和 `defer` 控制脚本
执行顺序
对于外部 JavaScript 文件，可以通过 `async` 或 `defer` 属性来控制其
加载和
执行行为：
- **`async`**：脚本将异步
加载，不会阻塞 HTML 解析，
加载完成后立即
执行，适用于不依赖页面 DOM 的脚本。
- **`defer`**：脚本会异步
加载，但会在 HTML 文档解析完成之后、`DOMContentLoaded` 事件之前
执行，适用于需要访问完整 DOM 的脚本。
```html
<script src="script1.js" async></script>
<script src="script2.js" defer></script>
```
#### 3. 使用 `loading="lazy"` 延迟
加载非关键资源
图片和 iframe 可以使用 `loading="lazy"` 属性实现延迟
加载，即当用户滚动到接近该资源的位置时才开始
加载：
```html
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">
<iframe src="video.html" loading="lazy"></iframe>
```
此方法可显著减少初始
加载时的资源请求量，提升首屏
加载速度。
#### 4. 利用 HTTP/2 Server Push 推送关键资源
在支持 HTTP/2 的服务器上，可以通过 Server Push 主动推送关键资源（如 CSS、JS）给客户端，避免等待
浏览器发起请求。这通常通过服务器配置实现，例如在 Nginx 或 Apache 中设置推送策略。
#### 5. 使用内联关键资源
将关键 CSS 或 JavaScript 直接写入 HTML 中，可以避免额外的网络请求，加快渲染速度。例如：
```html
<style>
/* Critical CSS */
body { font-family: Arial; }
</style>
<script>
// Inline critical JS
document.addEventListener('DOMContentLoaded', function () {
console.log('DOM is ready');
});
</script>
```
#### 6. 控制资源
加载优先级
浏览器会根据资源类型自动分配
加载优先级，但也可以通过 `<link>` 标签的 `as` 和 `media` 属性影响这一过程。例如，
加载打印样式表时可以将其优先级设为较低：
```html
<link rel="stylesheet" href="print.css" media="print">
```
#### 7. 使用 JavaScript 动态
加载资源
通过脚本动态创建 `<script>` 或 `<link>`
元素，可以在运行时决定何时
加载资源。例如：
```javascript
const script = document.createElement('script');
script.src = 'dynamic.js';
document.head.appendChild(script);
```
这种方法常用于按需
加载模块或根据用户行为触发资源
加载。
---
扫一扫
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
