**
重繪是乙個元素外觀的改變所觸發的瀏覽器行為。例如改變outline、背景色等屬性，瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀，重繪不會帶來重新布局，所以不一定伴隨重排。
需要注意的是：重繪是以圖層為單位，如果圖層中某個元素需要重繪，那麼整個圖層都需要重繪，例如乙個圖層包含很多節點，其中有個gif圖，gif圖的每一幀都會重繪整個圖層的其他節點，最後生成最終的圖層位圖。所以這需要通過特殊方式來強制gif圖屬於自己的乙個圖層(translate(0)或者translate3d(0,0,0))
css3的動畫也一樣（好在絕大部分情況瀏覽器自己會為css3動畫的節點建立圖層）
**渲染物件在建立完成並新增到渲染樹時，並不包含位置和大小資訊。計算這些值的過程叫做布局或重排
「重繪」不一定需要」重排」，比如改變某個網頁元素的顏色，就只會觸發」重繪」不會觸發重排，因為布局沒有改變，但是，」重排」必然導致」重繪」，比如改變乙個網頁元素的位置，就會同時觸發」重排」和」重繪」，因為布局改變了。
color border-style visibility outline….
**盒子模型相關屬性（width、padding、border、display等）、定位屬性及浮動（top、bottom、position、float等）、改變節點內部文字結構(text-align,font-family,line-height等)
**重排的成本比重繪高得多。dom tree裡的每個節點都會有重拍的方法。乙個節點的重排很有可能導致子節點甚至父節點及同級結點的重排，在高新能的電腦上沒什麼，但是重排發生在手機裡，這個過程是非常耗電的。
一下動作很有可能是高成本
①增刪改dom節點時，會導致重排重繪
②移動dom位置時 ③修改css樣式時
④resize視窗時（移動端不存在此問題，因為縮放不影響布局視口）
⑤獲取某些屬性時（width、height。。。）
特別注意：display:none會觸發重排 visibility:hidden只會觸發重繪，因為沒有位置變化
**1.元素位置移動變換時盡量使用css3的transform來代替top、left等操作
變換(transform)和透明度(opacity)的改變僅僅影響圖層的組合
2.使用opacity代替visibility
（1）使用visibility不觸發重排，但是依然重繪
（2）直接使用opacity即觸發重繪又觸發重排
（3）opacity配合圖層使用，既不重繪又不重排 開啟圖層 transform:transformz()或者willchange:transform
3.不使用table布局
4.將多次改變合併為一次
5.將dom離線再修改
6.利用documentfragment vue使用此方法提公升效能 (h5提出來的)虛擬dom
7.不要把獲取某些dom節點的屬性值放在乙個迴圈裡當作迴圈變數
8.動畫實現過程中，啟動gpu硬體加速：tranform:transformz(0)
9.為動畫元素新建圖層，提高動畫元素的z-index
重繪與重排
重繪就是重新繪製 repaint 重排就是重新排列 reflow dom發生改變的時候觸發重排，使dom重新排列，重繪不一定會重排，但是重排一定發生重繪，重繪和重排都會耗費瀏覽器的效能，盡量避免解析html繪製dom樹 解析css繪製css樹 生成render tree 渲染樹 flow排列，將渲染...
重排與重繪
重排和重繪作為前端必須要掌握的知識點，在面試 現的機率通常都是較高的 定義 重排，又可以叫回流，英文名reflow 屬於瀏覽器渲染機制的乙個過程 通常在第一次載入頁面觸發 在dom結構當中，每個元素都有只屬於自己的盒子 模型 這些都需要瀏覽器各種樣式來計算並根據計算結果將元素放到它該出現的位置，這就...
重排與重繪
1.重排reflow reflow指的是重新計算頁面布局 某個節點reflow時會重新計算節點的尺寸和位置，而且還有可能觸發其子節點，祖先節點和頁面上的其他節點reflow,在這之後再觸發一次repaint 當render tree中的一部分 或全部 因為元素的規模尺寸,布局,隱藏等改變而需要重新構...