瀏覽器原理、重繪、迴流、性能優化-學習總結

1 瀏覽器的組成

• 用戶界面－ 包括地址欄、後退/前進按鈕、書籤目錄等，也就是除了用來顯示所請求頁面的主窗口以外的其餘部分

• 瀏覽器引擎－ 用來查詢及操做渲染引擎的接口

• 渲染引擎（瀏覽器內核）－ 用來顯示請求的內容，例如，若是請求內容爲html，它負責解析html及css，並將解析後的結果顯示出來

• 網絡－ 用來完成網絡調用，例如http請求，它具備平臺無關的接口，能夠在不一樣平臺上工做

• UI 後端－ 用來繪製相似組合選擇框及對話框等基本組件，具備不特定於某個平臺的通用接口，底層使用操做系統的用戶接口

• JS解釋器－ 用來解釋執行JS代碼

• 數據存儲－ 屬於持久層，瀏覽器須要在硬盤中保存相似cookie的各類數據，HTML5定義了Storage技術，這是一種輕量級完整的客戶端存儲技術

2 主流的渲染引擎

瀏覽器的渲染引擎也叫排版引擎，或者是瀏覽器內核

主流的 渲染引擎 有

• Chrome瀏覽器: Blink引擎（WebKit的一個分支）。
• Safari瀏覽器: WebKit引擎，windows版本2008年3月18日推出正式版，但蘋果已於2012年7月25日中止開發Windows版的Safari。
• FireFox瀏覽器: Gecko引擎。
• Opera瀏覽器: Blink引擎(早期版使用Presto引擎）。
• Internet Explorer瀏覽器: Trident引擎 。
• Microsoft Edge瀏覽器: EdgeHTML引擎（Trident的一個分支）。

3 渲染引擎工做原理

渲染引擎解析的基本流程：

1. 解析HTML構建Dom樹，DOM 是W3C組織推薦的處理可擴展置標語言的標準編程接口。
2. 構建渲染樹，渲染樹並不等同於Dom樹，由於像`head`標籤 或 `display: none`這樣的元素就沒在渲染樹中了，可是它們在Dom樹中。
3. 對渲染樹進行佈局，定位座標和大小、肯定是否換行、肯定position、overflow、z-index等等，這個過程叫`layout` 或 `reflow`。
4. 繪製渲染樹，調用操做系統底層API(UI Backend)進行繪圖操做。

webkit內核工做流程

gecko內核工做流程

4 性能優化：重繪與迴流（重排）

迴流（reflow）與重繪（repaint），在性能優化的時候十分重要,面試也常常被說起。

迴流(reflow):當渲染樹(render tree)中一部分(或所有)元素的規模尺寸，佈局，隱藏等改變而須要從新構建。

重繪(repaint)：當渲染樹(render tree)中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，好比background-color。

小結: 影響佈局的操做會發生迴流；不影響佈局而只是修改顏色等屬性則發生重繪;

​ 每一個頁面至少須要一次迴流+重繪

​ 迴流必將引發重繪

迴流(重排)發生的條件

一、添加或者刪除可見的DOM元素；

二、元素位置改變；

三、元素尺寸改變——邊距、填充、邊框、寬度和高度

四、內容改變——好比文本改變或者圖片大小改變而引發的計算值寬度和高度改變；

五、頁面渲染初始化；

六、瀏覽器窗口尺寸改變——resize事件發生時；

【重排和重繪案例.html】

var s = document.body.style;
s.padding = "2px"; // 迴流+重繪
s.border = "1px solid red"; // 再一次 迴流+重繪
s.color = "blue"; // 再一次重繪
s.backgroundColor = "#ccc"; // 再一次 重繪
s.fontSize = "14px"; // 再一次 迴流+重繪
// 添加node，再一次 迴流+重繪
document.body.appendChild(document.createTextNode('abc!'));

優化方案

原理：儘可能減小重繪與迴流的次數

方案1

直接使用className修改樣式，少用style設置樣式.

div.classList.add('test');   //一次重排 重繪

方案2

把要頻繁操做的元素從渲染樹中去除;好比使用display:none;

div.style.display = 'none';//第一次 重排 重繪
div.style.width = 200px;
div.style.heigt= 200px; 
div.style.color = 'red';
div.style.margin = 20px;
div.style.display = 'block';//第二次 重排 重繪

這裏總共發生兩次重繪和重排

方案3

佈局常常改變的盒子進行定位脫標， 好比動畫 先定位 ，建議使用css3動畫和變換 transform

方案4

使用DocumentFragment(虛擬dom)進行緩存操做,引起一次迴流和重繪

var pNode,fragment = document.createDocumentFragment(); 
    //動態建立20個p標籤，先用DocumentFragment 對象來緩存     
    for(var i=0; i<20; i++){
        pNode = document.createElement('p');
        pNode.innerHTML = i;
        fragment.appendChild(pNode);
    }
    document.body.appendChild(fragment);

優化總結

• 加類名：把多個css屬性放到一個類中,減小回流和重繪的次數
• 將樣式修改代碼加到兩個display:none中間
• 讓佈局常常改變的盒子脫離標準流
• 使用虛擬dom DocumentFragment