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