定義：當rendertree中的一部分（或全部）因為元素的規模尺寸，布局，隱藏等改變而需要重新構建，則稱為回流
觸發回流屬性
1.盒子模型相關屬性：width height display padding margin border border-width min-height
2.定位屬性及浮動：position left right top bottom float clear
3.改變節點內部文字結構：text-align overflow-y font-weight overflow font-family line-height vertical-align white-space font-size
定義：當rendertree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，則稱為重繪。
只觸發重繪屬性
color border-style border-radius visibility text-decoration background
background-image background-position background-repeat background-size
outline-color outline outline-style outline-width box-shadow
2.用opacity替代visibility
3.預先定義好classname，然後統一修改dom的classname
4.把dom離線後修改，比如：先把dom給display賦none（reflow一次），然後再進行多次修改，然後再把它顯示出來（再reflow一次）
5.不要把dom結點的屬性值（offsetwidth，offsetheight）放在乙個迴圈裡變成迴圈裡的變數
6.不要使用table變局，可能很小的乙個小改動會造成整個table的重新布局
7.動畫實現速度的選擇
8.對於動畫新建圖層
9.啟用gpu硬體加速（transtorm: translate()）
回流和重繪
在頁面載入時，瀏覽器把獲取到的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中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀 風格，而不會影...