CSS會阻塞JS執行 當我們在HTML頁面中同時引入CSS和JS文件時，你是否發現有時JS代碼并不像我們期望的那樣立即執行，而是需要等待CSS文件加載完成后再執行呢？ 這是由于CSS文件的加載和解析需要時間，瀏覽器在遇到CSS文件時會先停止JS腳本的執行，轉而去加載并解析CSS文件。只有當CSS文件加載完畢后，瀏覽器才會繼續執行JS代碼。 這種現象被稱為CSS阻塞JS，也就是說CSS文件阻塞了接下來的JS執行。 那么如何解決這個問題呢？我們可以使用以下兩種方式來規避CSS阻塞JS的問題： 1.將CSS文件放置在HTML頭部 將CSS文件放置在HTML頭部可以讓瀏覽器在解析HTML時就開始解析CSS文件，避免在JS執行過程中遇到CSS文件而阻塞。這對于單頁應用或小型網站而言是非常適用的。 2.使用異步加載JS文件 在遇到需要優先加載的JS文件時，我們可以使用異步加載的方式，讓JS文件不會阻塞其他資源的加載。這可以通過在JS標簽上添加async屬性實現。

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

需要注意的是，在使用async屬性時，由于JS文件不會阻塞頁面渲染，因此需要手動調整JS腳本執行的順序，以避免出現依賴錯誤的情況。 結論 CSS文件的加載和解析會阻塞JS的執行，我們需要在開發中注意加載順序，避免出現性能問題。通過將CSS文件放置在HTML頭部或使用異步加載JS文件，可以有效規避CSS阻塞JS的問題，提高頁面的性能和用戶體驗。