一、從用戶請求到瀏覽器渲染的程序大致如下
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屬性
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/463529.html
標籤：Html/Css