我們可能都知道瀏覽器含有一個渲染引擎，用來渲染窗口所展示的內容。默認情況下，渲染引擎可以顯示html、xml文檔及圖片，它也可以借助插件（一種瀏覽器擴展）顯示其他類型數據，例如使用PDF閱讀器插件，用於顯示PDF格式。但是其具體的渲染原理和流程估計也有很多人都不知道或者不清楚吧。這些天研究了一下瀏覽器的渲染原理，有了些心得，在這里跟大家分享一下。
網頁瀏覽器的排版引擎也被稱為頁面渲染引擎，它負責取得網頁的內容（HTML、XML、圖象等等）、整理信息（例如加入CSS等），以及計算網頁的顯示方式然后會輸出至顯示器或打印機。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要排版引擎。
渲染引擎在取得內容之后的基本流程：
解析HTML構建dom樹—>構建render樹—>布局render樹—>繪制頁面。
1、構建dom樹 HTML文檔中的所有內容都是節點，各節點之間擁有層級關系，如父子關系，兄弟關系等等，彼此相連構成dom樹，dom樹中節點和HTML文檔存在一一對應的關系。
需要注意的是：在構建dom樹期間，如果遇到JS，會阻塞dom樹的構建，優先加載JS文件，加載完畢后在繼續構建dom樹。
在構建dom樹的同時，瀏覽器還會構建一個CSSOM。當遇到css文件時，先加載css文件，然后構建CSSOM，但是會阻塞render樹的構建。如果將css文件放在底部，render樹在之前就已經構建完了，因此用戶可能會看到無樣式的頁面或者閃屏。
2、渲染樹（render樹） 渲染樹又dom樹和CSSOM構成，但並不是必須等dom樹及CSSOM加載完成后才開始合並構建render樹，三者的構建並無先后條件，亦非完全獨立，因此會形成一邊加載，一邊解析，一邊渲染的現象。構建render樹，根據render樹計算每個可見元素的布局，並輸出到繪制流程上，將像素渲染到屏幕上。
3、布局render樹 有了render樹，瀏覽器已經能知道網頁中有哪些節點，各個節點的css定義以及他們的從屬關系，從而去計算出每個節點在屏幕中的位置。
4、繪制 繪制包括重繪和重排兩個過程。
4.1、重繪：屏幕的一部分重繪，render樹節點發生改變，但不影響該節點在頁面中的空間位置及大小，比如說某個div標簽的背景顏色、內容發生變化，但幾何屬性沒有發生變化，此時就會觸發瀏覽器重繪。觸發重繪的操作主要有：vidibility、outline、背景色等屬性的改變。
4.2、重排：也叫回流。當render樹節點發生變化，影響了節點的幾何屬性，導致該節點的位置發生變化，此時就會導致瀏覽器需要重新布局，這個過程就叫做瀏覽器的重排。
需要注意的是：重排必將會引起重繪，而重繪不一定需要重排！觸發重排的幾何因素主要有以下幾點：
4.2.1、頁面第一次渲染。在頁面發生首次渲染的時候，所有組件都要進行首次布局，這是開銷最大的一次重排。
4.2.2、瀏覽器窗口尺寸改變。
4.2.3、元素位置和尺寸發生改變的時候。
4.2.4、新增和刪除可見元素。
4.2.5、內容發生改變（文字數量或圖片大小等等）。
4.2.6、元素字體大小變化。。
4.2.7、激活CSS偽類（例如：:hover）。
4.2.8、設置style屬性。
4.2.9、查詢某些屬性或調用某些方法。比如說：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight。除此之外，當我們調用getComputedStyle方法，或者IE里的currentStyle時，也會觸發重排，原理是一樣的，都為求一個“即時性”和“准確性”。
如何減少重繪和重排？
1、直接改變className。
2、讓要操作的元素進行“離線處理”，處理完后一起更新。
3、不要經常訪問會引起瀏覽器flash隊列的屬性，如果確實需要，可以利用緩存。
4、讓元素脫離動畫流，減少render樹的規模。