一、從用戶請求到瀏覽器渲染的過程大致如下 1.用戶輸入功能變數名稱，然後DNS解析成IP地址 2.瀏覽器根據IP地址請求伺服器 3.伺服器響應http請求，並返回給瀏覽器 4.瀏覽開始渲染： 。根據html，生成DOM TREE 。根據css，生成CSS TREE 。將DOM TREE和CSS TREE結合 ...
一、從用戶請求到瀏覽器渲染的過程大致如下
1.用戶輸入功能變數名稱，然後DNS解析成IP地址
2.瀏覽器根據IP地址請求伺服器
3.伺服器響應http請求，並返回給瀏覽器
4.瀏覽開始渲染：
。根據html，生成DOM TREE
。根據css，生成CSS TREE
。將DOM TREE和CSS TREE結合生成Render Tree
。根據Render Tree渲染頁面
。遇到<script>則暫停渲染，優先執行js，然後再繼續渲染（因為js執行和渲染引擎公用一個進程，原因是js可能做了一些dom操作，一般會把js放到頁面的底部）
。直至把Render Tree渲染頁面
二、reflow和repaint
reflow迴流：
當某個部分發生了變化影響了佈局，需要倒回去重新渲染， 該過程稱為reflow（迴流）。reflow 幾乎是無法避免的。現在界面上流行的一些效果，比如樹狀目錄的摺疊、展開（實質上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。滑鼠滑過、點擊……只要這些行為引起了頁面上某些元素的占位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲染。通常我們無法預估瀏覽器到底會 reflow 哪一部分的代碼，它們彼此相互影響。
repaint重繪：
如果只是改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性，將只會引起瀏覽器 repaint（重繪）。repaint 的速度明顯快於 reflow（在IE下需要換一下說法，reflow 要比 repaint 更緩慢）。
reflow一定引起repaint，而repaint不一定要reflow。reflow的成本比repaint高很多，DOM tree里每個結點的reflow很可能觸發其子結點、祖先結點、兄弟結點的reflow。reflow(迴流)是導致DOM腳本執行低效的關鍵因素之一。
現代瀏覽器會對迴流做優化，它會等到足夠數量的變化發生，再做一次批處理迴流。
在哪些情況下會導致reflow發生：
l 改變窗囗大小
l 改變文字大小
l 添加/刪除樣式表
l 內容的改變，如用戶在輸入框中敲字
l 激活偽類，如:hover (IE里是一個兄弟結點的偽類被激活)
l 操作class屬性
l 腳本操作DOM
l 計算offsetWidth和offsetHeight
l 設置style屬性
