溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“CSS加載會阻塞DOM嗎”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS加載會阻塞DOM嗎”這篇文章吧。
先上結論
CSS不會阻塞DOM的解析，但會阻塞DOM的渲染
CSS會阻塞JS執行，但不會阻塞JS文件的下載
CSSOM的作用
第一個是提供給JavaScript操作樣式表的能力
第二個是為布局樹的合成提供基礎的樣式信息
這個CSSOM體現在DOM中就是document.styleSheets
由之前講到的瀏覽器渲染流程我們可以看出：
DOM和CSSOM通常是并行構建的，所以CSS加載不會阻塞DOM的解析
render樹是依賴DOM樹和CSSOM樹的，所以它必須等到兩者都加載完畢才能開始構建渲染，所以CSS加載會阻塞DOM的渲染
由于JavaScript是可以操作DOM與CSS的，如果在修改這些元素屬性同時渲染界面（即JavaScript線程與UI線程同時進行），那么渲染線程前后獲得的元素可能就不一致了。所以為了防止渲染出現不可預期的結果，瀏覽器設置GUI渲染線程與JavaScript線程為互斥的關系
JS需要等待CSS的下載，這是為什么呢？（CSS阻塞DOM執行）
如果JS腳本的內容是獲取元素的樣式，那它就必然依賴CSS。因為瀏覽器無法感知JS內部到底想干什么，為避免樣式獲取，就只好等前面所有的樣式下載完畢再執行JS。但JS文件與CSS文件下載是并行的，CSS文件會在后面的JS文件執行前先加載執行完畢，所以CSS會阻塞后面JS的執行
避免白屏，提高CSS的加載速度
使用CDN（CDN會根據你的網絡狀況，挑選最近的一個具有緩存內容的節點為你提供資源，因此可以減少加載時間）
對CSS進行壓縮
合理使用緩存
減少http請求數，合并CSS文件
以上是“CSS加載會阻塞DOM嗎”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
