脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → CSS和JS文件加载顺序阻塞页面渲染

一文详解HTML文件中CSS文件和JS文件的加载顺序会阻塞页面渲染吗

 更新时间：2025年12月01日 11:08:29   作者：阿珊和她的猫  
CSS和JS都会阻塞页面的关键渲染路径,不同情况下阻塞效果不同,这篇文章主要介绍了HTML文件中CSS文件和JS文件的加载顺序会不会阻塞页面渲染的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、引言

在前端开发中，HTML、CSS 和 JavaScript 是构建网页的三大核心技术。HTML 负责页面的结构，CSS 负责页面的样式，而 JavaScript 则负责页面的交互和动态效果。在 HTML 文件中引入 CSS 文件和 JS 文件时，它们的加载顺序会对页面的渲染产生重要影响。理解它们的加载机制以及是否会阻塞页面渲染，对于优化页面性能和提升用户体验至关重要。

二、CSS 文件的加载顺序及对页面渲染的影响

2.1 CSS 文件的加载机制

当浏览器解析 HTML 文件时，遇到 <link> 标签引入的 CSS 文件，会立即发起对该 CSS 文件的请求。CSS 文件的加载是异步的，也就是说，浏览器不会因为等待 CSS 文件加载完成而停止解析 HTML 文件。

2.2 CSS 文件是否阻塞页面渲染

CSS 文件会阻塞页面的渲染，但不会阻塞 HTML 文件的解析。这意味着，当浏览器遇到 CSS 文件的请求时，会继续解析 HTML 文件，但在 CSS 文件加载完成并解析成 CSSOM（CSS 对象模型）树之前，不会进行页面的渲染。这是因为浏览器需要将 DOM（文档对象模型）树和 CSSOM 树合并成渲染树，才能进行布局计算和绘制，所以必须等待 CSSOM 树构建完成。

例如，以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" rel="external nofollow"  rel="external nofollow" >
</head>

<body>
    <h1>Hello, World!</h1>
</body>

</html>

当浏览器解析到 <link> 标签时，会发起对 styles.css 文件的请求，同时继续解析 HTML 文件。但在 styles.css 文件加载和解析完成之前，页面不会显示任何内容，直到 CSSOM 树构建完成，与 DOM 树合并成渲染树后，才会进行页面的渲染。

2.3 优化建议

为了减少 CSS 文件对页面渲染的阻塞时间，建议将 CSS 文件放在 <head> 标签中尽早引入，这样可以让浏览器尽早开始下载 CSS 文件。同时，尽量压缩和合并 CSS 文件，减少文件大小和请求数量，加快 CSS 文件的加载速度。

三、JS 文件的加载顺序及对页面渲染的影响

3.1 JS 文件的加载机制

默认情况下，当浏览器解析 HTML 文件时，遇到 <script> 标签引入的 JS 文件，会立即停止解析 HTML 文件，发起对 JS 文件的请求，并等待 JS 文件加载和执行完成后，才会继续解析 HTML 文件。这种加载方式称为同步加载。

例如，以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <h1>Before script</h1>
    <script src="script.js"></script>
    <h1>After script</h1>
</body>

</html>

当浏览器解析到 <script> 标签时，会停止解析 HTML 文件，发起对 script.js 文件的请求。在 script.js 文件加载和执行完成之前，不会解析 <h1>After script</h1> 标签。

3.2 JS 文件是否阻塞页面渲染

JS 文件会阻塞 HTML 文件的解析和页面的渲染。因为 JavaScript 可以操作 DOM 和 CSSOM，浏览器为了保证脚本执行的正确性，在执行 JS 文件时会暂停 HTML 解析和页面渲染。

3.3 异步加载和延迟加载

为了避免 JS 文件对页面渲染的阻塞，可以使用异步加载（async）和延迟加载（defer）属性。

  • 异步加载（async）：使用 async 属性的 <script> 标签会异步加载 JS 文件，不会阻塞 HTML 文件的解析。当 JS 文件加载完成后，会立即执行，可能会在 HTML 解析完成之前执行。例如：
<script async src="script.js"></script>
  • 延迟加载（defer）：使用 defer 属性的 <script> 标签会异步加载 JS 文件，同样不会阻塞 HTML 文件的解析。但 JS 文件会在 HTML 解析完成后，DOMContentLoaded 事件触发之前执行，并且会按照 <script> 标签在 HTML 文件中的顺序执行。例如：
<script defer src="script.js"></script>

3.4 优化建议

对于不依赖于 DOM 结构的 JS 文件，可以使用 async 属性进行异步加载；对于依赖于 DOM 结构的 JS 文件，建议使用 defer 属性进行延迟加载。同时，尽量将 JS 文件放在 <body> 标签的底部，这样可以减少对页面渲染的影响。

四、CSS 文件和 JS 文件混合加载的情况

当 HTML 文件中同时引入 CSS 文件和 JS 文件时，它们的加载顺序和执行顺序会相互影响。一般来说，CSS 文件会先于 JS 文件加载和解析，因为浏览器会优先处理 CSS 文件，以构建 CSSOM 树。但如果 JS 文件使用了 async 或 defer 属性，情况会有所不同。

例如，以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" rel="external nofollow"  rel="external nofollow" >
    <script async src="script.js"></script>
</head>

<body>
    <h1>Hello, World!</h1>
</body>

</html>

浏览器会先发起对 styles.css 文件的请求，同时继续解析 HTML 文件。当遇到 <script async src="script.js"></script> 标签时，会异步加载 script.js 文件，不会阻塞 HTML 解析。在 styles.css 文件加载和解析完成后，会构建 CSSOM 树，与 DOM 树合并成渲染树进行页面渲染。而 script.js 文件加载完成后会立即执行。

五、总结

在 HTML 文件中引入 CSS 文件和 JS 文件时，它们的加载顺序和是否阻塞页面渲染取决于其加载机制和使用的属性。CSS 文件会阻塞页面渲染，但不会阻塞 HTML 解析；默认情况下，JS 文件会阻塞 HTML 解析和页面渲染，但可以使用 async 和 defer 属性来避免阻塞。合理安排 CSS 文件和 JS 文件的加载顺序，选择合适的加载方式，对于优化页面性能和提升用户体验具有重要意义。在实际开发中，需要根据具体情况进行权衡和优化。

到此这篇关于HTML文件中CSS文件和JS文件的加载顺序会阻塞页面渲染吗的文章就介绍到这了,更多相关CSS和JS文件加载顺序阻塞页面渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论