前端必備的瀏覽器知識（渲染過程、回流和重繪等）

常用哪幾種瀏覽器測試？有哪些瀏覽器內核(Rendering Engine)?

(Q1)瀏覽器：Chrome，IE，FireFox，Safari，Opera。

(Q2)對應內核：Webkit，Trident，Gecko，Webkit，Presto。（國內的瀏覽器，除了傲游是直接基于Webkit開發的，其他基本都是基于谷歌在webkit上開發的Chromium，當然谷歌自己也是用的Chromium。另外值得的一提的是手機的系統（安卓、蘋果）默認瀏覽器都是基于webkit內核的）

如何理解瀏覽器內核？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。后來JS引擎越來越獨立（比如谷歌的V8引擎），內核就傾向于只指渲染引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。

JS引擎：解析和執行javascript來實現網頁的動態效果。

瀏覽器的渲染過程？

當瀏覽器獲得一個html文件時，會“自上而下”加載，并在加載過程中進行解析渲染。

解析：

a. 瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好后才會去構建當前節點的下一個兄弟節點。

b. 將CSS解析成 CSS規則樹（Style Rule） 。

c. 根據DOM樹和CSS規則樹來構造 Rendering Tree（渲染樹）。注意：Rendering Tree并不等同于 DOM 樹，因為一些像 Header 或 display:none 的東西就沒必要放在渲染樹中了。

d. 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系。下一步操作稱之為Layout（布局），就是計算出每個節點在屏幕中的坐標。

e. 再下一步就是繪制，即遍歷render樹，并使用UI后端層繪制每個節點。

關于順序：

上述這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，并不會等到所有的html都解析完成之后再去構建和布局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載過程遇到的其余內容（比如css、js文件，但遇到js文件會阻塞頁面后續內容，css不會阻塞；另外圖片的下載優先級比較低，一般都會在整個頁面其他資源下載完了才下載圖片）。

Javascript的加載和執行的特點：

（1）載入后馬上執行；

（2）執行時會阻塞頁面后續的內容（包括頁面的渲染、其它資源的下載）。原因：因為瀏覽器需要一個穩定的DOM樹結構，而JS中很有可能有 代碼直接改變了DOM樹結構，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器為了防止出現JS修 改DOM樹，需要重新構建DOM樹的情況，所以 就會阻塞其他的下載和呈現。所以js通常放在頁面尾部，即body結束前。

如何理解Reflow（回流）和 Repaint（重繪）？

1) 當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次加載的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構造這部分渲染樹和layout，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程稱為重繪。

2) 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。

注意：回流必將引起重繪，而重繪不一定會引起回流。

3) 當頁面布局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器回流：

    a. 添加或者刪除可見的DOM元素；

    b. 元素位置改變；

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

    d. 內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；

    e. 頁面渲染初始化；

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

4) 聰明的瀏覽器

從上個實例代碼中可以看到幾行簡單的JS代碼就引起了6次左右的回流、重繪。而且我們也知道回流的花銷也不小，如果每句JS操作都去回流重繪的話，瀏覽器可能就會受不了。所以很多瀏覽器都會優化這些操作，瀏覽器會維護1個隊列，把所有會引起回流、重繪的操作放入這個隊列，等隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush隊列，進行一個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

雖然有了瀏覽器的優化，但有時候我們寫的一些代碼可能會強制瀏覽器提前flush隊列，這樣瀏覽器的優化可能就起不到作用了。當你請求向瀏覽器請求一些 style信息的時候，就會讓瀏覽器flush隊列，比如：

    a. offsetTop, offsetLeft, offsetWidth, offsetHeight

    b. scrollTop/Left/Width/Height

    c. clientTop/Left/Width/Height

    d. width,height

    e. 請求了getComputedStyle(), 或者 IE的 currentStyle

當你請求上面的一些屬性的時候，瀏覽器為了給你最精確的值，需要flush隊列，因為隊列中可能會有影響到這些值的操作。即使你獲取元素的布局和樣式信息跟最近發生或改變的布局信息無關，瀏覽器都會強行刷新渲染隊列。

5) 如何減少回流、重繪？

 ①　直接改變className，這樣能多條規則一次性改變；如果動態改變樣式，則使用cssText（考慮沒有優化的瀏覽器）

 ②　讓要操作的元素進行”離線處理”，處理完后一起更新 

   a) 使用DocumentFragment進行緩存操作,引發一次回流和重繪；

   b) 使用display:none技術，只引發兩次回流和重繪；( 只是減少重繪和回流的次數，display：none 是會引起重繪并回流，相對來說，visibility: hidden只會引起重繪 )

           c) 使用cloneNode(true or false) 和 replaceChild 技術，引發一次回流和重繪；

 ③　不要經常訪問會引起瀏覽器flush隊列的屬性，如果你確實要訪問，利用緩存

 ④　讓元素脫離動畫流，減少回流的Render Tree的規模。舉例：$("#block1").animate({left:50}); （不過我沒理解）

   PS:如果對你有幫助，就順手點個贊吧~