詳解css載入會造成阻塞嗎_CSS教學_CSS_網頁製作
這次帶給大家詳解css載入會造成阻塞嗎，css載入造成阻塞的注意事項有哪些，下面就是實戰案例，一起來看一下。
終於考試完了，今天突然想起來前陣子找實習的時候，今日頭條面試官問我，js執行會阻塞DOM樹的解析和渲染，那麼css載入會阻塞DOM樹的解析和渲染嗎？所以，接下來我就來對css載入對DOM樹的解析和渲染做一個測試。
為了完成本次測試，先來科普一下，如何利用chrome來設定下載速度
#1、打開控制台(按下F12),可以看到下圖，重點在我畫紅圈的地方
2、點擊我畫紅圈的地方(No throttling),會看到下圖,我們選擇GPRS這個選項
3、這樣，我們對資源的下載速度上限就會被限製成20kb/s，好，那接下來就進入我們的正題
css載入會阻塞DOM樹的解析渲染嗎？
用程式碼說話：
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
color: red !important
}
</style>
<script>
function h () {
console.log(document.querySelectorAll('h1'))
}
setTimeout(h, 0)
</script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是红色的</h1>
</body>
</html>#
假設： css載入會阻塞DOM樹解析與渲染
假設結果: 在bootstrap.css還沒載入完之前，下面的內容不會被解析渲染，那麼我們一開始看到的應該是白屏，h1不會顯示出來。而此時console.log的結果應該是一個空數組。
實際結果:如下圖
css會阻塞DOM樹解析？
由上圖我們可以看到，當css還沒載入完成的時候，h1並沒有顯示，但是此時控制台輸出如下
#可以得知，此時DOM樹至少已經解析完成到了h1那裡，而此時css還沒載入完成，也就說明，css並不會阻塞DOM樹的解析。
css載入會阻塞DOM樹渲染？
由上圖，我們也可以看到，當css還沒載入出來的時候，頁面顯示白屏，直到css載入完成之後，紅色字體才顯示出來，也就是說，下面的內容雖然解析了，但並沒有被渲染出來。所以，css載入會阻塞DOM樹渲染。
個人對此機制的評價
其實我覺得，這可能也是瀏覽器的最佳化機制。因為你載入css的時候，可能會修改下面DOM節點的樣式，如果css載入不阻塞DOM樹渲染的話，那麼當css載入完之後，DOM樹可能又得重新重繪或回流了，這就造成了一些沒有必要的損耗。所以我乾脆就先把DOM樹的結構先解析完，把可以做的工作做完，然後等你css加載完之後，在根據最終的樣式來渲染DOM樹，這種做法性能方面確實會比較好一點。
css載入會阻塞js運行嗎？
由上面的推論，我們可以得到，css載入不會阻塞DOM樹解析，但會阻塞DOM樹渲染。那麼，css載入會不會阻塞js執行呢?
同樣，透過程式碼來驗證.
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
console.log('before css')
var startDate = new Date()
</script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是红色的</h1>
<script>
var endDate = new Date()
console.log('after css')
console.log('经过了' + (endDate -startDate) + 'ms')
</script>
</body>
</html>
假設: css載入會阻塞後面的js執行
預期結果: 在link後面的js程式碼，應該要在css載入完成後才會執行
實際結果:
由上圖我們可以看出，位於css載入語句前的那個js程式碼先執行了，但是位於css載入語句後面的程式碼遲遲沒有執行，直到css載入完成後，它才執行。這也就說明了，css載入會阻塞後面的js語句的執行。詳細結果看下圖(css載入用了5600+ms):
#結論
##由上所述，我們可以得出以下結論:1.css載入不會阻塞DOM樹的解析2.css載入會阻塞DOM樹的渲染
3.css載入會阻塞後面js語句的執行
因此，為了避免讓使用者看到長時間的白螢幕時間，我們應該盡可能的提高css載入速度，例如可以使用以下幾種方法:
1.使用CDN(因為CDN會根據你的網路狀況，替你挑選最近的一個具有快取內容的節點為你提供資源，因此可以減少載入時間)
2.對css進行壓縮(可以用很多打包工具，例如webpack,gulp等，也可以透過開啟gzip壓縮)
3.合理的使用快取(設定cache-control,expires,以及E-tag都是不錯的，不過要注意一個問題，就是檔案更新後，你要避免快取而帶來的影響。就是不能緩存)
推薦閱讀：
以上是詳解css載入會造成阻塞嗎_CSS教學_CSS_網頁製作的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何用PHP搭建社交分享功能 PHP分享接口集成實戰
Jul 25, 2025 pm 08:51 PM
在PHP中搭建社交分享功能的核心方法是通過動態生成符合各平台要求的分享鏈接。 1.首先獲取當前頁面或指定的URL及文章信息；2.使用urlencode對參數進行編碼；3.根據各平台協議拼接生成分享鏈接；4.在前端展示鏈接供用戶點擊分享；5.動態生成頁面OG標籤優化分享內容展示；6.務必對用戶輸入進行轉義以防止XSS攻擊。該方法無需複雜認證，維護成本低，適用於大多數內容分享需求。
PHP打造博客評論系統變現 PHP評論審核與防刷策略
Jul 25, 2025 pm 08:27 PM
1.評論系統商業價值最大化需結合原生廣告精準投放、用戶付費增值服務（如上傳圖片、評論置頂）、基於評論質量的影響力激勵機制及合規匿名數據洞察變現；2.審核策略應採用前置審核 動態關鍵詞過濾 用戶舉報機制組合，輔以評論質量評分實現內容分級曝光；3.防刷需構建多層防禦：reCAPTCHAv3無感驗證、Honeypot蜜罐字段識別機器人、IP與時間戳頻率限制阻止灌水、內容模式識別標記可疑評論，持續迭代應對攻擊。
如何用PHP開發問答社區平台 PHP互動社區變現模式詳解
Jul 23, 2025 pm 07:21 PM
1.PHP開發問答社區首選Laravel MySQL Vue/React組合，因生態成熟、開發效率高；2.高性能需依賴緩存（Redis）、數據庫優化、CDN和異步隊列；3.安全性必須做好輸入過濾、CSRF防護、HTTPS、密碼加密及權限控制；4.變現可選廣告、會員訂閱、打賞、佣金、知識付費等模式，核心是匹配社區調性和用戶需求。
如何用Mac搭建PHP Nginx環境 MacOS配置Nginx與PHP服務組合
Jul 25, 2025 pm 08:24 PM
Homebrew在Mac環境搭建中的核心作用是簡化軟件安裝與管理。 1.Homebrew自動處理依賴關係，將復雜的編譯安裝流程封裝為簡單命令；2.提供統一的軟件包生態，確保軟件安裝位置與配置標準化；3.集成服務管理功能，通過brewservices可便捷啟動、停止服務；4.便於軟件升級與維護，提升系統安全性與功能性。
什麼是常見的CSS瀏覽器不一致？
Jul 26, 2025 am 07:04 AM
不同瀏覽器對CSS解析存在差異，導致顯示效果不一致，主要包括默認樣式差異、盒模型計算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認樣式處理不一致，解決方法是使用CSSReset或Normalize.css統一初始樣式；2.舊版IE的盒模型計算方式不同，建議統一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現有差異，應多測試並使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse並提供降級
CSS' Will-Change”屬性的目的是什麼？
Jul 23, 2025 am 03:47 AM
will-change是CSS屬性，用於提前告知瀏覽器元素可能發生的變更類型以優化性能。其核心作用是讓瀏覽器預先創建圖層提升渲染效率，常見值包括transform、opacity等，也可多屬性逗號分隔；適用於非標準屬性動畫、複雜組件過渡及用戶交互觸發的動畫；但需避免濫用，否則會導致內存佔用過高或GPU負載增加；最佳實踐為在變化發生前應用並在結束後移除。
Vue成品資源網站免費入口 完整Vue成品永久在線觀看
Jul 23, 2025 pm 12:39 PM
本文為Vue開發者和學習者精選了一系列頂級的成品資源網站。通過這些平台，你可以免費在線瀏覽、學習甚至復用海量高質量的Vue完整項目，從而快速提升開發技能和項目實踐能力。
如何在CSS中使用屬性選擇器？
Jul 23, 2025 am 03:50 AM
在CSS中，屬性選擇器可根據元素的屬性及值設置樣式，提供更靈活的樣式控制。 ①基礎用法：選中帶有特定屬性的元素，如input[type]匹配所有含type屬性的input；②精確匹配：使用=匹配特定屬性值，如input[type="text"]僅匹配文本輸入框；③部分匹配：用=（包含）、^=（開頭為）、$=（結尾為）匹配屬性值的一部分，如a[href="example.com"]匹配含特定鏈接的錨點；④組合匹配：同時匹配多個屬性，如inputtype=&qu
