瀏覽器使用流式布局
render tree=dom（瀏覽器把html解析成dom）+cssom（把css解析成cssom）
當randertree中部分或全部元素的尺寸結構或某些屬性發生改變時，瀏覽器重新渲染部分或全部文件的過程稱為回流，每個頁面至少發生一次回流，就是在第一次載入的時候
會導致回流的操作
1. 頁面首次渲染
2. 瀏覽器視窗大小發生改變
3. 啟用css偽類
4.元素尺寸位置發生變化
5.新增和刪除某些可見的dom元素
6.元素字型大小，內容發生變化
避免操作dom，建立乙個documentfragment或者div，在它上面應用所有的dom操作，最後新增到window.document。
在display：none的元素上操作dom，不會引發回流和重繪。
盡可能在dom樹的末端改變class。
避免使用多層內聯樣式。
將需要多次回流的元素position屬性設定為absolute或fixed。
避免table布局。
回流一定會引起重繪，重繪不一定會引起回流
回流和重繪
在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tree 渲染樹 然後根據...
回流和重繪
html 載入過程 在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tre...
回流和重繪
回流 reflow 當render tree中的一部分 或全部 因為元素的規模尺寸 布局 隱藏等改變而需要重新構建，這就稱為回流。每個頁面至少需要回流一次，就是在頁面第一次載入的時候。重繪 repaint 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀 風格，而不會影...