当前位置：首页 > 行业动态 > 正文

CSS和JS的页面加载顺序如何影响网页性能？

admin
行业动态
2025-01-26
4884

### ，，cssjs页面加载顺序：浏览器从上到下解析HTML，遇到标签并行下载CSS，不阻塞HTML解析；遇到无defer或async属性的标签，会暂停HTML解析执行JS，直到脚本执行完毕；有defer属性的JS并行下载，页面加载完成后才执行；有async属性的JS异步加载并立即执行，不保证执行顺序。

在网页开发中，CSS 和 JS 的加载顺序对页面性能和用户体验有着重要影响，以下是关于 CSS 和 JS 页面加载顺序的详细解答：

CSS和JS的页面加载顺序如何影响网页性能？第1张

一、CSS 加载顺序

1、外部样式表：通过<link> 标签引入的外部 CSS 文件通常放在 HTML 文档的头部，浏览器会按照从上到下的顺序解析 HTML 代码，当遇到<link> 标签时，会并行下载对应的 CSS 文件，以下代码中的两个外部样式表将按照它们在 HTML 中的顺序依次加载：

   <!DOCTYPE html>
   <html>
   <head>
     <link rel="stylesheet" type="text/css" href="styles.css">
     <link rel="stylesheet" type="text/css" href="normalize.css">
   </head>
   <body>
     <!-页面内容 -->
   </body>
   </html>

2、内嵌样式：直接在 HTML 文件中使用<style> 标签定义的 CSS 样式，其加载顺序取决于它们在 HTML 文档中的位置，位于文档头部或前面的<style> 标签会先被加载和解析，后面的则会覆盖前面的相同选择器的样式。

   <!DOCTYPE html>
   <html>
   <head>
     <style>
       body { background-color: #f0f0f0; }
     </style>
   </head>
   <body>
     <style>
       p { color: red; }
     </style>
     <p>这是一个红色的段落。</p>
   </body>
   </html>

3、行内样式：写在 HTML 标签中的style 属性里的样式会优先于外部样式表和内嵌样式进行加载和应用，因为行内样式直接作用于特定的 HTML 元素，具有最高的优先级。

   <!DOCTYPE html>
   <html>
   <head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
     <div >这个文本是蓝色的。</div>
   </body>
   </html>

二、JS 加载顺序

1、正常非异步脚本：当浏览器解析到<script> 标签时，会暂停 HTML 的解析和 DOM 树的构建，直到该脚本文件完全加载并执行完毕，才会继续往下解析 HTML 文档，如果脚本文件较大或者网络延迟较高，可能会导致页面显示滞后，出现 “假死” 状态，影响用户体验。

   <!DOCTYPE html>
   <html>
   <head>
     <script src="script1.js"></script>
   </head>
   <body>
     <!-页面内容 -->
   </body>
   </html>

2、：如果<script> 标签包含defer 属性，浏览器会在解析完 HTML 文档后，再执行这些脚本，不会阻塞 HTML 的解析和 DOM 树的构建，多个带有defer 属性的脚本会按照它们在 HTML 中出现的顺序依次执行。

   <!DOCTYPE html>
   <html>
   <head>
     <script src="script1.js" defer></script>
     <script src="script2.js" defer></script>
   </head>
   <body>
     <!-页面内容 -->
   </body>
   </html>

3、：带有async 属性的脚本会在下载完成后立即执行，不依赖于其他脚本的加载顺序，也不保证按照书写的顺序执行，浏览器可能会在解析 HTML 文档的同时并行下载这些脚本，一旦下载完成就尽快执行，可能会在 DOM 还未完全生成时就运行脚本，因此需要确保脚本中不依赖 DOM 元素的操作。

   <!DOCTYPE html>
   <html>
   <head>
     <script src="script1.js" async></script>
     <script src="script2.js" async></script>
   </head>
   <body>
     <!-页面内容 -->
   </body>
   </html>

三、常见问题及解答

1、为什么 CSS 会阻塞渲染？

原因：CSS 会影响页面的显示效果，浏览器需要根据 CSS 规则来确定每个元素的样式，从而构建完整的渲染树，如果在 HTML 内容加载后才请求 CSS 文件，浏览器需要等待 CSS 加载完成后才能构建渲染树，导致页面无法及时呈现，出现白屏或无样式的状态，这就是所谓的阻塞渲染。

解决方法：可以使用<link rel="preload"> 提前加载 CSS 文件，让浏览器在开始渲染 HTML 时就请求 CSS，避免渲染过程的阻塞；对于关键样式，可以采用内联 CSS 的方式，使其立即生效。

2、如何优化 JS 的加载顺序以提高页面性能？

方法：尽量避免在<head> 标签中同步加载大型的 JS 文件，以免阻塞页面的渲染，根据脚本之间的依赖关系，合理使用defer 和async 属性，如果有多个脚本之间没有依赖关系，可以使用async 属性让它们并行加载和执行；如果脚本之间存在依赖关系，则使用defer 属性确保它们按照正确的顺序执行，还可以将 JS 文件放在页面底部，即</body> 标签之前，这样可以让浏览器先加载和渲染 HTML 和 CSS，最后再执行 JS，减少页面的初始加载时间。

合理安排 CSS 和 JS 的加载顺序对于优化网页性能至关重要，开发者应根据具体情况选择合适的加载方式和优化策略，以提供更好的用户体验。