先上一張圖
注意事項：
1，瀏覽器會開啟另乙個執行緒去獲取css等資源，但這並不意味著js是多執行緒，主要執行js**的只有乙個主線程，所以js是單執行緒的
2，瀏覽器收到html檔案後，會遍歷文件節點，生成dom樹，script標籤頁會在樹中，並且會把當前節點的所有子節點都構建好後才會去構建當前節點的下乙個兄弟節點。
3，css解析是可以跟dom解析同時進行的
4，有了cssom和dom，瀏覽器開始構建render tree，遍歷乙個節點，找到它的css樣式，然後繪製
5，有了render tree 還需要進行一次布局，處理文件流的布局和脫離文件流的布局，然後呼叫渲染器的paint()渲染
6，js會阻塞生成dom，cssom
7，有布局的變動活節點的變動會引起回流，布局沒變動，節點不增加，只修改元素樣式等，會引起重繪
8，巨集任務一般是 script**，settimeout，setinterval，微任務一般是promise，process.nexttick
瀏覽器是如何渲染頁面的？
解析html檔案，建立dom樹 自上而下，遇到任何樣式 link style 與指令碼 script 都會阻塞 外部樣式不阻塞後續外部指令碼的載入 解析css。優先順序 瀏覽器預設設定 使用者設定 外部樣式 內聯樣式將css與dom合併，構建渲染樹 布局和繪製，重繪 repaint 和重排 refl...
瀏覽器是如何渲染頁面的
1.根據html檔案構建dom和cssom樹,如果遇到js,阻塞domhecssom,優先載入js 載入完js,再去構建dom和cssom 2.構建渲染樹,dom和cssom合併而成,計算每個頁面元素,最終渲染到頁面 3.頁面重繪和回流 重排 頁面渲染完畢後,瀏覽器會根據js操作dom元素,對頁面進...
瀏覽器如何渲染 HTML CSS
我們現在已經知道，使用 html css 可以搭建出乙個漂亮的 web 頁面。那麼瀏覽器到底是如何使用我們的 html css 渲染成我們在螢幕上所看到的頁面呢？雖然具體渲染過程很複雜，但是還是可以將其分為幾個關鍵路徑，如下 首先瀏覽器渲染頁面前會根據 html 結構構建成對應的 dom 樹。以下面...