它的渲染機制是：
回流：
接收到html和css解析並新增到渲染樹時，只是將 dom 節點和它對應的樣式結合起來，並不包含位置和大小資訊。所以還需要layout這一過程計算他們的位置和大小，這一過程稱為回流。 觸發回流的行為有：元素的尺寸，布局，隱藏等改變而需要重新構建
重繪：
完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程就是重繪；觸發重繪的行為有：改變頁面的元素外觀，風格，（color，background-color等）不會影響布局
總結： 回流一定會引起重繪，但是重繪不一定會引起回流，回流的效能消耗要比重繪大
會導致回流的操作：
頁面的首次渲染，瀏覽器的視窗大小（如resize事件），尺寸（大小、外邊距、邊框），位置，內容（如字型變多變少，大小等）發生變化，新增或者刪除操作等
使用下面等屬性和方法 都需要返回最新的布局資訊，它們也會觸發回流重繪所以在修改樣式的時候最好用乙個變數儲存起來避免多次獲取重新整理渲染佇列
offsettop、offsetleft、offsetwidth、offsetheight
scrolltop、scrollleft、scrollwidth、scrollheight
clienttop、clientleft、clientwidth、clientheight
getcomputedstyle()
getboundingclientrect
css優化：
1、 使用 visibility （只會引起重繪）替換 display: none（引發回流）
2、 避免使用table布局
3、將多次需要重繪的元素，position屬性設定為absolute或fixed，元素脫離了文件流，它的變化不會影響到其他的元素
4、避免設定多層內聯樣式（通過style屬性設定樣式，每個dom元素都會造成回流）
5、避免使用 css 表示式（如：calc）
js優化：
1、避免頻繁操作dom（當dom發生改變時瀏覽器需要重新計算元素的幾何屬性，其他的元素也會收到影響，然後把計算的結果繪製出來）
2、避免頻繁操作樣式
3、也可以先為元素設定display: none，然後進行頁面布局操作結束後再把它顯示出來
瀏覽器的重繪和回流
重繪 當元素樣式的改變不影響布局時，瀏覽器會使用重繪的方式來更新元素的變化，這種改變只會在ui層的重新畫素繪製，這種方式的對瀏覽器開銷比較小。常見的重繪操作有 改變元素顏色 改變元素背景色 more 回流 又名 重排 當元素的尺寸 結構或者觸發了某個屬性的改變，會導致瀏覽器重新渲染，這種操作會造成回...
瀏覽器的回流和重繪
重繪 比如 background color font size 等，這些屬性的改變不會影響頁面的結構布局，只會影響內容的變化，即這些屬性的改變將會引起瀏覽器的重繪 回流 比如 padding margin height 等，改變這些屬性會影響頁面的結構布局，即改變這些屬性會引起瀏覽器的回流 為什麼...
瀏覽器的重繪和回流
我的部落格 這是我在之前面試中遇到的乙個問題，今天回想起來正好做乙個總結 這其實也是我遇到的一道面試題，與重繪和回流息息相關 使用者輸入 瀏覽器嘗試與伺服器建立連線 伺服器傳送永久重定向 瀏覽器跟蹤重定向位址 伺服器處理請求 伺服器傳送html響應 瀏覽器接收響應，開始解析 解析html檔案，處理並...