1.客戶端從伺服器獲取到需要渲染的源**後：
[瀏覽器開闢乙個「gui渲染執行緒」，自上而下解析**，最後繪製出對應的頁面]
(1)關於css 的資源的載入：
——遇到的是"內嵌樣式"=>"同步」交給gui渲染執行緒解析；
——遇到的是「外鏈樣式」=>「非同步」 開闢乙個新的「http網路請求執行緒」（注意：同乙個源下，根據不同的瀏覽器，最多隻允許同時開闢4~7個http執行緒 「http的併發數」），不等待資源資訊請求回來，gui渲染執行緒繼續向下渲染，gui渲染執行緒同步操作都處理完成後，再把基於http網路執行緒請求回來的資源檔案進行解析渲染；
——遇到的是@import 「匯入式樣式」 =>「同步」 開闢乙個新的「http網路請求執行緒」去請求資源檔案，但是在資源檔案沒有請求回來之前，gui渲染執行緒會被「阻塞」，不允許其繼續向下渲染；
遇到資源的請求：
預設都是「同步」的：必須基於http網路執行緒，把資源請求回來後，並且交給「js渲染執行緒」渲染解析完成後，gui渲染執行緒才能繼續向下渲染，所以預設也會阻礙gui渲染的；
async屬性：遇到首先也是開闢乙個http網路執行緒去請求載入資源檔案，與此同時gui渲染執行緒繼續向下渲染【把預設的改為非同步】，但是一旦當資源請求回來後，會中斷gui渲染，先把請求回來的js進行渲染解析；
defer屬性：遇到和async類似，都是新開闢http網路執行緒去請求載入資源檔案，與此同時gui還會繼續渲染【「非同步」】，但是不一樣的地方是,defer和link類似，是在gui同步**渲染完成後，才會渲染解析請求回來的js**；
——懶載入：第一次載入頁面的時候不要載入請求，哪怕它是非同步的，但是也佔據了http併發的數量，導致其他資源延後載入。
——的base64：不用去請求載入，base64碼基本上代表的就是，而且頁面渲染的時候速度也會很快（慎用，但是在webpack工程化中可以使用，因為它基於file-loader可以自動base64）
6.layout/painting：重要的優化手段（減少dom的」回流/重排"和重繪）
——第一次載入頁面必然會有一次回流和重繪
——觸發回流操作後，也必然會觸發重繪；如果只是單純的重繪，則不會引發回流；效能優化，重點在回流上。
7.操作dom消耗效能，因為dom的回流；
元素在視口中的大小或者位置發生變化；元素的刪除或者新增（以及基於display控制顯示隱藏）、瀏覽器視口大小發生改變，這些操作都需要瀏覽器重新計算每乙個元素在視口中的位置和大小（也就是重新layout/reflow）
8.當代瀏覽的渲染佇列機制：
在當前上下文操作中，遇到一行修改樣式的**，並沒有立即通知瀏覽器渲染，而是把其放置在渲染佇列中，接下來看是否還有修改樣式的**，如果有繼續放置在渲染佇列中…一直到再也沒有修改樣式的**或者「遇到一行獲採樣式的操作」，這樣都會重新整理瀏覽器的渲染佇列機制（也就是把現在佇列中修改樣式的操作，統一告訴瀏覽器渲染，這樣只會引發一次回流）
box.style.width = 「100px」;
box.style.height = 「200px」;
box.offsetheight; 或者 window.getcomputedstyle(box).*** 再或者 box.clientwidth|height|top|left 以及 box.offsetwidth|height|top|left 或者 box.scrollwidth|height|top|left …這些獲採樣式的操作都會重新整理渲染佇列
box.style.position = 「absolute」;
box.style.top = 「100px」;
(1)樣式的「分離讀寫」：把修改樣式和獲採樣式**分離開：
box.style.width = 「100px」;
box.style.height = 「200px」;
box.style.position = 「absolute」;
box.style.top = 「100px」;
//獲取**放到最後
box.offsetheight;
//**********=統一修改樣式
box.style.csstext=「width:100px;height:100px」;
box.classname=".boxactive";
//**********快取布局資訊
box.style.width = box.offsetwidth + 10 + 『px』;
box.style.height = box.offsetheight + 10 + 『px』;
以上會請求兩次
// 重新整理渲染佇列（會增加一次回流）
box.offsetleft;
// 回到開始位置後，再次運動到left:200位置(有動畫)
box.style.transitionduration = '0.5s';
box.style.left = '200px';
增加回流會實現上述的動畫效果
瀏覽器渲染機制與效能優化
詳讀了很多文章，最終對比總結出來的瀏覽器渲染機制，並提出相應的優化原則 瀏覽器將從伺服器中獲取的html文件逐步解析，構建dom樹 在構建dom樹時，如果碰到js和css，會載入執行並阻塞html的解析，即html解析器會將控制權交給js或css解析器，當這個元素被解析完之後，將控制權重交回給htm...
了解瀏覽器底層渲染機制
crp critical rendering path 關鍵渲染路徑 渲染的機制和步驟，去詳細地進行每一步的優化，以此來提高頁面的渲染速度和執行效能。頁面之所以能渲染 從伺服器獲取到需要渲染的內容 url解析 dns tcp http 瀏覽器會基於自己的渲染引擎 例如 webkit gecko tr...
瀏覽器底層渲染機制（筆記）
瀏覽器底層渲染機制 從伺服器獲取的是檔案流 進製編碼內容 1.瀏覽器首先把16進製制的字元資訊編譯為 字串 2.按照w3c規則進行字元解析，生成對應的tokens,最後轉化為瀏覽器內部可以識別渲染的dom節點 3.按照節點最後解析為對應的樹dom tree css tree 程序是乙個應用程式，乙個...