每個前端在第一次寫乙個完整功能的頁面，都可能會是這個樣子滴~
複製**
這裡面有涉及到 dom，css，js 互相之間的一些關係，接下來會分別介紹
dom這裡有兩個概念，解析與渲染。
dom解析：就是把你所寫的各種html標籤，生成乙個dom tree，可以認為就是生成了乙個最原始的頁面，一點樣式都沒有，毫無css修飾的那種；
dom渲染：瀏覽器會把本身預設的樣式+使用者自己寫得樣式整合到一起，形成乙個css tree，而dom渲染就是指dom tree 和 css tree 結合到一起，生成乙個render tree，呈現出乙個帶有樣式的頁面。
瀏覽器會有不同的執行緒，比如說
gui 渲染執行緒
js 執行緒
定時器觸發執行緒 (settimeout)
瀏覽器事件執行緒 (onclick)
http 非同步執行緒
上面的幾個執行緒，在同乙個瞬間，只有乙個執行緒起作用，也就是互斥的。比如說瀏覽器在執行gui 渲染執行緒呢，那麼其他的4個程序，都處於掛起的狀態，在佇列裡面呆著。
dom的渲染對應的就是gui渲染程序；js的執行對應的就是js執行緒；所以，dom的渲染與js**的執行，在同一瞬間只能有乙個執行！
阻塞***是指讓***暫停了。比如js的執行阻塞dom解析，就是
dom解析 --> js執行(此時dom解析暫停) --> js執行完畢 --> dom繼續解析
先看它倆之間的關係，也就是分析css的載入對dom的解析和渲染的影響。
很明顯，dom自己在那解析dom tree 和 css樣式有啥關係啊，所以css不影響dom解析。
也很明顯，dom渲染就是要生成樣式呢，肯定和css有關係啊，所以css影響dom渲染。
結論：
css的載入不會阻塞dom的解析css的載入會阻塞dom的渲染js（載入和執行） 都會阻塞 dom 的解析，因為js中可能會對dom進行操作，可能改變dom的結構，所以js的載入和執行是會阻塞dom解析的。
js（載入和執行） 都會阻塞 dom 的渲染，同上面一樣，因為js中可能對樣式進行操作。
注：html中每遇到< script >標籤，頁面就會重新渲染一次，因為要保證標籤中的js**拿到的都是最新的樣式。
結論：
js的載入和執行會阻塞dom的解析js的載入和執行會阻塞dom的渲染注1：
注2：
這裡的js引入方式不包括async和defer
結論：
css的載入阻塞js的執行，不阻塞js的載入
例1：
"test.css">
複製**
例2：
"test.css">
複製**
css的載入不會阻塞dom的解析css的載入會阻塞dom的渲染js的載入和執行會阻塞dom的解析js的載入和執行會阻塞dom的渲染css的載入阻塞js的執行，不阻塞js的載入
遇到script標籤會觸發渲染，以便獲得最新的樣式給js**
最後：若有錯誤之處，還請見諒，提出後會馬上修改~~~
前端效能優化之 css阻塞渲染
瀏覽器渲染流程 1瀏覽器開始解析目標html檔案,執行流的順序為自上而下。2html解析器將html結構轉換為基礎的dom 文件物件模型 構建dom樹完成後,觸發domcontendloaded事件。3css解析器將css解析為cssom 層疊樣式表物件模型 一棵僅含有樣式資訊的樹。4cssom和d...
04 前端之BOM與DOM
目錄bom 瀏覽器物件模型 使用js操作瀏覽器 dom 文件物件模型 使用js操作前端頁面window.open 開啟新視窗 window.close 關閉當前視窗 history.forward 前進一頁 history.back 後退一頁 location.href 獲取url location...
前端知識之BOM和DOM
window的子物件 了解 計時器相關 dom間接查詢 節點操作 新增節點 var imgele document.createelement img imgele.setattribute src var d1ele document.getelementbyid d1 刪除節點 替換節點 屬性節...