我們可能都知道瀏覽器含有乙個渲染引擎，用來渲染視窗所展示的內容。預設情況下，渲染引擎可以顯示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樹的規模。
瀏覽器渲染頁面的原理及流程
瀏覽器將網域名稱通過網路通訊從伺服器拿到html檔案後，如何渲染頁面呢？1.根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。2.構建渲染樹 render tree 3.頁面的重...
瀏覽器渲染頁面的原理及流程
1.根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。js會對dom節點進行操作，瀏覽器無法 未來的dom節點的具體內容，為了防止無效操作，節省資源，只能阻塞dom樹的構建。2....
瀏覽器渲染頁面的流程
瀏覽器渲染頁面的流程 1 根據html檔案構建dom樹和cssom樹。構建dom樹期間，如果遇到js，阻塞dom樹及cssom樹的構建，優先載入js檔案，載入完畢，再繼續構建dom樹及cssom樹。2 構建渲染樹 render tree 3 頁面的重繪 repaint 與重排 reflow，也有稱回...