瀏覽器渲染流程和重繪，迴流
1、渲染大致流程
渲染引擎首先通過網路獲得所請求文件的內容，渲染引擎在取得內容之後的基本流程：
①解析html以構建dom樹
②構建render樹 （render tree一般翻譯為渲染樹）
③佈局render樹
④繪製render樹
2、渲染具體流程
1. ①瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的所有子節點都構建好後才會去 構建當前節點的下一個兄弟節點。
②將CSS解析成 CSS Rule Tree 。
2. 根據DOM樹和CSS Rule Tree來構造 Render Tree（渲染樹）。
注意：Render Tree 渲染樹並不等同於 DOM 樹，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。
3. 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係。這一步操作稱之為layout，顧名思義就是計算出每個節點在螢幕中的位置進行佈局操作。
4. 接下來就是繪製，即遍歷render樹，並使用UI後端層繪製每個節點。
注意：上述這個過程是逐步完成的，為了更好的使用者體驗，渲染引擎將會盡可能早的將內容呈現到螢幕上，並不會等到所有的html都解析完成之後再去構建和佈局render樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網路下載其餘內容。
3、webkit的主要流程：（才疏學淺，不對請指出）
4、reflow與repaint
reflow（迴流）：當瀏覽器發現某個部分發生了點變化影響了佈局，需要倒回去重新渲染，就稱這個回退的過程叫 reflow。reflow 會從 <html> 這個 root frame 開始遞迴往下，依次計算所有的結點幾何尺寸和位置。reflow 幾乎是無法避免的。現在介面上流行的一些效果，比如樹狀目錄的摺疊、展開（實質上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。滑鼠滑過、點選……只要這些行為引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的程式碼，它們都彼此相互影響著。
repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時，螢幕的一部分要重畫，但是元素的幾何尺寸沒有變。
注意：(1)display:none 的節點不會被加入Render Tree，而visibility: hidden 則會，所以，如果某個節點最開始是不顯示的，設為display:none是更優的。
(2)display:none 會觸發 reflow和repaint，而 visibility:hidden 只會觸發 repaint，因為沒有發現位置變化。
(3)有些情況下，比如修改了元素的樣式，瀏覽器並不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然後做一次 reflow，這又叫非同步 reflow 或增量非同步 reflow。但是在有些情況下，比如resize 視窗，改變了頁面預設的字型等。對於這些操作，瀏覽器會馬上進行 reflow。