這篇文章主要為大家展示了“CSS加載會阻塞DOM嗎”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS加載會阻塞DOM嗎”這篇文章吧。

公司主營業(yè)務：網(wǎng)站設計、網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出漢陰免費做網(wǎng)站回饋大家。

CSS加載會阻塞DOM嗎？

先上結(jié)論

• CSS不會阻塞DOM的解析，但會阻塞DOM的渲染

• CSS會阻塞JS執(zhí)行，但不會阻塞JS文件的下載

CSSOM的作用

• 第一個是提供給JavaScript操作樣式表的能力

• 第二個是為布局樹的合成提供基礎的樣式信息

• 這個CSSOM體現(xiàn)在DOM中就是document.styleSheets

由之前講到的瀏覽器渲染流程我們可以看出：

• DOM和CSSOM通常是并行構(gòu)建的，所以CSS加載不會阻塞DOM的解析

• render樹是依賴DOM樹和CSSOM樹的，所以它必須等到兩者都加載完畢才能開始構(gòu)建渲染，所以CSS加載會阻塞DOM的渲染

• 由于JavaScript是可以操作DOM與CSS的，如果在修改這些元素屬性同時渲染界面（即JavaScript線程與UI線程同時進行），那么渲染線程前后獲得的元素可能就不一致了。所以為了防止渲染出現(xiàn)不可預期的結(jié)果，瀏覽器設置GUI渲染線程與JavaScript線程為互斥的關系

JS需要等待CSS的下載，這是為什么呢？（CSS阻塞DOM執(zhí)行）

如果JS腳本的內(nèi)容是獲取元素的樣式，那它就必然依賴CSS。因為瀏覽器無法感知JS內(nèi)部到底想干什么，為避免樣式獲取，就只好等前面所有的樣式下載完畢再執(zhí)行JS。但JS文件與CSS文件下載是并行的，CSS文件會在后面的JS文件執(zhí)行前先加載執(zhí)行完畢，所以CSS會阻塞后面JS的執(zhí)行

避免白屏，提高CSS的加載速度

• 使用cdn（CDN會根據(jù)你的網(wǎng)絡狀況，挑選最近的一個具有緩存內(nèi)容的節(jié)點為你提供資源，因此可以減少加載時間）

• 對CSS進行壓縮

• 合理使用緩存

• 減少http請求數(shù)，合并CSS文件

以上是“CSS加載會阻塞DOM嗎”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：CSS加載會阻塞DOM嗎
標題URL：http://jinyejixie.com/article36/pshppg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、動態(tài)網(wǎng)站、營銷型網(wǎng)站建設、電子商務、小程序開發(fā)、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)