揭开 JS 和 CSS 的神秘面纱：如何避免阻塞，让网页加载更顺畅

2023-12-28 09:11:38

优化网页加载性能：消除 JS 和 CSS 阻塞

现代网页离不开 JavaScript (JS) 和 Cascading Style Sheets (CSS)，但它们也可能成为网页加载性能的罪魁祸首。本文将深入探讨 JS 和 CSS 如何阻塞网页加载，并提供一系列优化策略，帮助您消除阻塞，让网页加载更顺畅。

JS 和 CSS 的阻塞原理

了解浏览器渲染机制对于理解 JS 和 CSS 如何阻塞网页加载至关重要。当浏览器加载网页时，它遵循以下步骤：

解析 HTML： 浏览器首先解析 HTML 代码，构建代表页面结构的 DOM（文档对象模型）树。
解析 CSS： 接下来，浏览器解析 CSS 样式表，构建 CSSOM（CSS 对象模型）树，其中包含有关元素如何显示的样式信息。
构建渲染树： 最后，浏览器将 DOM 树和 CSSOM 树合并，形成渲染树。渲染树是浏览器用来决定如何将内容显示在屏幕上的数据结构。

JS 脚本的执行会阻塞渲染树的构建。当浏览器遇到 JS 脚本时，它会停止构建渲染树，等待 JS 脚本执行完毕。这会导致页面上的部分内容无法立即显示，出现白屏或闪烁的情况。

CSS 样式表也可能会阻塞渲染树的构建。当浏览器遇到 CSS 样式表时，它会停止构建渲染树，等待 CSS 样式表加载完毕。这可能会导致页面上的部分内容无法立即显示，出现白屏或闪烁的情况。

优化策略

为了消除 JS 和 CSS 的阻塞，我们可以采用以下优化策略：

1. 异步加载

异步加载允许 JS 脚本和 CSS 样式表在不阻塞渲染树构建的情况下加载。这样可以大大减少白屏或闪烁的情况。

<script async src="script.js"></script>
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

2. 延迟加载

延迟加载可以推迟加载不必要的 JS 脚本和 CSS 样式表。

<script defer src="script.js"></script>
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

3. 预加载和预连接

预加载可以告诉浏览器在页面加载时立即加载 JS 脚本和 CSS 样式表，而预连接可以告诉浏览器在页面加载之前建立与 JS 脚本和 CSS 样式表所在服务器的连接。

<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="cdn.example.com">

4. 减少 HTTP 请求

减少 HTTP 请求可以减少浏览器与服务器之间的通信次数，从而减少页面加载时间。

<!-- 合并 JS 脚本 -->
<script src="scripts/script1.js"></script>
<script src="scripts/script2.js"></script>
<!-- 合并 CSS 样式表 -->
<link rel="stylesheet" href="styles/style1.css">
<link rel="stylesheet" href="styles/style2.css">

5. 使用压缩

压缩可以减小 JS 脚本和 CSS 样式表的大小，从而减少浏览器下载它们所需的时间。

<!-- GZIP 压缩 -->
<script src="script.js.gz"></script>
<link rel="stylesheet" href="style.css.gz">
<!-- Brotli 压缩 -->
<script src="script.js.br"></script>
<link rel="stylesheet" href="style.css.br">