快捷導(dǎo)航

一文詳解HTML文件中CSS文件和JS文件的加載順序會阻塞頁面渲染嗎

更新時(shí)間：2025年12月01日 11:08:29 作者：阿珊和她的貓

CSS和JS都會阻塞頁面的關(guān)鍵渲染路徑,不同情況下阻塞效果不同,這篇文章主要介紹了HTML文件中CSS文件和JS文件的加載順序會不會阻塞頁面渲染的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、引言

在前端開發(fā)中，HTML、CSS 和 JavaScript 是構(gòu)建網(wǎng)頁的三大核心技術(shù)。HTML 負(fù)責(zé)頁面的結(jié)構(gòu)，CSS 負(fù)責(zé)頁面的樣式，而 JavaScript 則負(fù)責(zé)頁面的交互和動(dòng)態(tài)效果。在 HTML 文件中引入 CSS 文件和 JS 文件時(shí)，它們的加載順序會對頁面的渲染產(chǎn)生重要影響。理解它們的加載機(jī)制以及是否會阻塞頁面渲染，對于優(yōu)化頁面性能和提升用戶體驗(yàn)至關(guān)重要。

二、CSS 文件的加載順序及對頁面渲染的影響

2.1 CSS 文件的加載機(jī)制

當(dāng)瀏覽器解析 HTML 文件時(shí)，遇到 <link> 標(biāo)簽引入的 CSS 文件，會立即發(fā)起對該 CSS 文件的請求。CSS 文件的加載是異步的，也就是說，瀏覽器不會因?yàn)榈却?CSS 文件加載完成而停止解析 HTML 文件。

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

CSS 文件會阻塞頁面的渲染，但不會阻塞 HTML 文件的解析。這意味著，當(dāng)瀏覽器遇到 CSS 文件的請求時(shí)，會繼續(xù)解析 HTML 文件，但在 CSS 文件加載完成并解析成 CSSOM（CSS 對象模型）樹之前，不會進(jìn)行頁面的渲染。這是因?yàn)闉g覽器需要將 DOM（文檔對象模型）樹和 CSSOM 樹合并成渲染樹，才能進(jìn)行布局計(jì)算和繪制，所以必須等待 CSSOM 樹構(gòu)建完成。

例如，以下 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>

當(dāng)瀏覽器解析到 <link> 標(biāo)簽時(shí)，會發(fā)起對 styles.css 文件的請求，同時(shí)繼續(xù)解析 HTML 文件。但在 styles.css 文件加載和解析完成之前，頁面不會顯示任何內(nèi)容，直到 CSSOM 樹構(gòu)建完成，與 DOM 樹合并成渲染樹后，才會進(jìn)行頁面的渲染。

2.3 優(yōu)化建議

為了減少 CSS 文件對頁面渲染的阻塞時(shí)間，建議將 CSS 文件放在 <head> 標(biāo)簽中盡早引入，這樣可以讓瀏覽器盡早開始下載 CSS 文件。同時(shí)，盡量壓縮和合并 CSS 文件，減少文件大小和請求數(shù)量，加快 CSS 文件的加載速度。

三、JS 文件的加載順序及對頁面渲染的影響

3.1 JS 文件的加載機(jī)制

默認(rèn)情況下，當(dāng)瀏覽器解析 HTML 文件時(shí)，遇到 <script> 標(biāo)簽引入的 JS 文件，會立即停止解析 HTML 文件，發(fā)起對 JS 文件的請求，并等待 JS 文件加載和執(zhí)行完成后，才會繼續(xù)解析 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>

當(dāng)瀏覽器解析到 <script> 標(biāo)簽時(shí)，會停止解析 HTML 文件，發(fā)起對 script.js 文件的請求。在 script.js 文件加載和執(zhí)行完成之前，不會解析 <h1>After script</h1> 標(biāo)簽。

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

JS 文件會阻塞 HTML 文件的解析和頁面的渲染。因?yàn)?JavaScript 可以操作 DOM 和 CSSOM，瀏覽器為了保證腳本執(zhí)行的正確性，在執(zhí)行 JS 文件時(shí)會暫停 HTML 解析和頁面渲染。

3.3 異步加載和延遲加載

為了避免 JS 文件對頁面渲染的阻塞，可以使用異步加載（async）和延遲加載（defer）屬性。

異步加載（async）：使用 async 屬性的 <script> 標(biāo)簽會異步加載 JS 文件，不會阻塞 HTML 文件的解析。當(dāng) JS 文件加載完成后，會立即執(zhí)行，可能會在 HTML 解析完成之前執(zhí)行。例如：

<script async src="script.js"></script>

延遲加載（defer）：使用 defer 屬性的 <script> 標(biāo)簽會異步加載 JS 文件，同樣不會阻塞 HTML 文件的解析。但 JS 文件會在 HTML 解析完成后，DOMContentLoaded 事件觸發(fā)之前執(zhí)行，并且會按照 <script> 標(biāo)簽在 HTML 文件中的順序執(zhí)行。例如：

<script defer src="script.js"></script>

3.4 優(yōu)化建議

對于不依賴于 DOM 結(jié)構(gòu)的 JS 文件，可以使用 async 屬性進(jìn)行異步加載；對于依賴于 DOM 結(jié)構(gòu)的 JS 文件，建議使用 defer 屬性進(jìn)行延遲加載。同時(shí)，盡量將 JS 文件放在 <body> 標(biāo)簽的底部，這樣可以減少對頁面渲染的影響。

四、CSS 文件和 JS 文件混合加載的情況

當(dāng) HTML 文件中同時(shí)引入 CSS 文件和 JS 文件時(shí)，它們的加載順序和執(zhí)行順序會相互影響。一般來說，CSS 文件會先于 JS 文件加載和解析，因?yàn)闉g覽器會優(yōu)先處理 CSS 文件，以構(gòu)建 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>

瀏覽器會先發(fā)起對 styles.css 文件的請求，同時(shí)繼續(xù)解析 HTML 文件。當(dāng)遇到 <script async src="script.js"></script> 標(biāo)簽時(shí)，會異步加載 script.js 文件，不會阻塞 HTML 解析。在 styles.css 文件加載和解析完成后，會構(gòu)建 CSSOM 樹，與 DOM 樹合并成渲染樹進(jìn)行頁面渲染。而 script.js 文件加載完成后會立即執(zhí)行。

五、總結(jié)

在 HTML 文件中引入 CSS 文件和 JS 文件時(shí)，它們的加載順序和是否阻塞頁面渲染取決于其加載機(jī)制和使用的屬性。CSS 文件會阻塞頁面渲染，但不會阻塞 HTML 解析；默認(rèn)情況下，JS 文件會阻塞 HTML 解析和頁面渲染，但可以使用 async 和 defer 屬性來避免阻塞。合理安排 CSS 文件和 JS 文件的加載順序，選擇合適的加載方式，對于優(yōu)化頁面性能和提升用戶體驗(yàn)具有重要意義。在實(shí)際開發(fā)中，需要根據(jù)具體情況進(jìn)行權(quán)衡和優(yōu)化。

到此這篇關(guān)于HTML文件中CSS文件和JS文件的加載順序會阻塞頁面渲染嗎的文章就介紹到這了,更多相關(guān)CSS和JS文件加載順序阻塞頁面渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: