我的部落格
這是我在之前面試中遇到的乙個問題，今天回想起來正好做乙個總結
這其實也是我遇到的一道面試題，與重繪和回流息息相關
使用者輸入**
瀏覽器嘗試與伺服器建立連線
伺服器傳送永久重定向
瀏覽器跟蹤重定向位址
伺服器處理請求
伺服器傳送html響應
瀏覽器接收響應，開始解析
解析html檔案，處理並建立dom樹
解析css樣式表， 構建cssom樹
將dom與cssom進行結合，構建渲染樹(render tree)
根據渲染樹來布局(layout)，計算每乙個節點的位置
呼叫gpu進行繪製(paint)，合成圖層
重繪(repaint)與回流(reflow)
當html解析遇到script時會暫停構建dom，執行js指令碼，執行完畢後才會繼續構建dom樹，因此將js檔案放在html檔案底部進行載入才會節省載入時間，加快繪製速度
瀏覽器使用流式布局 (flow based layout)，對render tree的計算通常只需要遍歷一次就可以完成，但table及其內部元素除外，他們可能需要多次計算，通常要花3倍於同等元素的時間，這也是為什麼要避免使用table布局的原因之一
回流必將引起重繪，而重繪不一定引起回流
當render tree中部分或全部元素的尺寸、結構、布局、隱藏等發生改變而需要重新構建，瀏覽器因此重新渲染的過程叫做回流
會導致回流的操作：
常用且會導致回流的屬性和方法
當頁面元素的樣式發生改變且並不影響它在文件中的位置時，瀏覽器將根據其新屬性進行重新繪製，這個過程就是重繪
回流比重繪更加影響效能，付出代價更高
有時即使僅僅回流乙個單一的元素，它的父元素以及任何跟隨它的元素也會產生回流。
現代瀏覽器會對頻繁的回流或重繪操作進行優化：
瀏覽器會維護乙個佇列，把所有引起回流和重繪的操作放入佇列中，如果佇列中的任務數量或者時間間隔達到乙個閾值的，瀏覽器就會將佇列清空，進行一次批處理，這樣可以把多次回流和重繪變成一次。
css
js
瀏覽器的重繪和回流
重繪 當元素樣式的改變不影響布局時，瀏覽器會使用重繪的方式來更新元素的變化，這種改變只會在ui層的重新畫素繪製，這種方式的對瀏覽器開銷比較小。常見的重繪操作有 改變元素顏色 改變元素背景色 more 回流 又名 重排 當元素的尺寸 結構或者觸發了某個屬性的改變，會導致瀏覽器重新渲染，這種操作會造成回...
瀏覽器的回流和重繪
重繪 比如 background color font size 等，這些屬性的改變不會影響頁面的結構布局，只會影響內容的變化，即這些屬性的改變將會引起瀏覽器的重繪 回流 比如 padding margin height 等，改變這些屬性會影響頁面的結構布局，即改變這些屬性會引起瀏覽器的回流 為什麼...
瀏覽器的回流和重繪
1 瀏覽器把獲取到的html 會解析成乙個dom樹，html中的每乙個元素都是dom樹的乙個節點，根節點也就是我們長用的document物件 2 當渲染樹中的一部分或者全部因為元素的尺寸 布局 隱藏等改變而需要重新構建的時候，這時候就會發生回流。每個頁面都至少發生一次回流，也就是頁面第一次載入的時候...