html渲染過程中回流和重繪是比較重要的概念，了解他們有助於編寫效能更好的css**
回流：指幾何屬性需改變的渲染，將整個網頁填白，對內容重新渲染，只不過以人眼的感官速度看上去瀏覽器回流是不會有任何變化的
實質上每次回流都會將頁面清空，再從左上角第乙個畫素點從左往右從上往下一一渲染。
渲染樹的節點發生改變，影響該節點的幾何屬性，導致該節點位置發生變化，就會觸發瀏覽器回流並重新生成渲染樹。
回流意味著節點的幾何屬性發生改變，需瀏覽器重新計算並生成渲染樹，渲染樹會發生全部或者區域性變化。
重
繪：重繪是指外觀屬性而不影響集合屬性的渲染。重繪較回流相對溫和些。
渲染樹節點改變，但不影響該節點的幾何屬性，回流較重繪消耗效能要高些，並且回流一定伴隨重繪，重繪不一定有回流。
上面有講幾何屬性和外觀屬性，可能有些童鞋不清楚
外觀屬性：包括介面、文字等可用狀態向量描述的屬性
文字：text、font、word
給乙個比較好記憶的理解吧：大家喜歡喝奶茶吧，我最喜歡的是一點點奶茶茶，相信很多人喜歡，不然怎麼生意好到爆，排隊排的老長了，
突然又問素質較低的小夥子，插隊了，引起後面的小哥強烈不滿，兩人你推我搡的快打起來了，幸好店長勸和，大家有重新排隊，這個過程就跟回流差不多，
大家重新排隊影響了大家的時間，怨聲載道的，然後又來了乙個帥帥的小哥哥，心疼女朋友排隊站的太久腳痛，替她排隊買，這樣皆大歡喜，他女朋友也高興，大家也不用重新排隊
這個過程除了妹紙，其餘人的位置和順序都無發生變化，跟重繪差不多。
這樣我們得出了個效能優化法則：回流必定引
發重繪，重
繪不一定引
發回流。
很多童鞋
可能不知，回流重繪其實與瀏覽器的事件迴圈有關
上述就是瀏覽器每一幀中可能會做到的事情，若在一幀中有空閒時間，就會執行requestidlecallback**。
回到正題，通過定向法則回流必定引發重繪，重繪不一定引發回流可知道，儘量減少回流重繪，就是css效能優化中乙個很好的指標。
如何減少和避免回流重繪？使用visibility:hidden替換display:none；
使用transform代替top；top是幾何屬性，操作top會改變節點位置從而引發回流，使用transform:translate3d(x,0,0)代替top，只會引發圖層重繪，還會間接啟動gpu加速，該情況在第12章變換與動畫中會詳細講解。
避免使用table布局
避免規則層級過多。瀏覽器的css解析器解析css檔案時，對css規則是從右到左匹配查詢，樣式層級過多會影響回流重繪效率，建議保持css規則在3層左右。
避免節點屬性值放在迴圈裡當成迴圈變數
動態改變類而不改變樣式。不要嘗試每次操作dom去改變節點樣式，這樣會頻繁觸發回流。
將頻繁回流重繪的節點設定為圖層
css編碼排序推薦：
根據回流和重繪原理。涉及到幾何屬性和外觀屬性，結合盒模型規範和從外到裡進行屬性排序，將一些回流的幾何屬性排在最前面，決定布局尺寸相關的
狀態，在新增外觀屬性,布局》尺寸》介面》文字》互動的方式定義順序，互動的屬性放在最後，如transform混入animation會讓節點重新生成圖層，
新圖層不會對其他圖層造成影響。
如建樓一樣：從無到有,從打樁(存在)、搭設(布局)、主體(尺寸)、砌體(介面)、裝修(文字)、裝潢(互動)到驗收(生成乙個完整的節點)，
每一步都基於前一步作為基礎才能繼續下去，符合我們正常的邏輯思維。
借鑑太極哲學思想：太極生兩儀，兩儀生四象，四象生八卦，從無極生太極開始，一直通過物質派生而構築乙個完整的立體結構，
這一過程是乙個立體幷包含位次順序的四維關係。
布局屬性
尺寸屬性
介面屬性
輪廓：outlineoutline-widthoutline-styleoutline-coloroutline-offsetoutline-radiusoutline-radius-[direction]
背景：background
遮罩：maskmask-modemask-imagemask-repeatmask-repeat-xmask-repeat-ymask-positionmask-position-xmask-position-ymask-sizemask-originmask-clipmask-attachmentmask-compositemask-box-imagemask-box-image-sourcemask-box-image-widthmask-box-image-outsetmask-box-image-repeatmask-box-image-slice
濾鏡：box-shadowbox-reflectfiltermix-blend-modeopacity,
裁剪：object-fitclip
事件：resizezoomcursorpointer-eventstouch-calloutuser-modifyuser-focususer-inputuser-selectuser-drag
文字屬性
互動屬性在此已經整合了大部分的屬性，可滿足大部分的屬性排序。其他未列入的屬性，可根據自身使用習慣新增。分類只提供參考
回流與重繪
首先是html渲染過程 解析html並構建dom樹和cssom樹，瀏覽器對html標記轉換成文件物件模型，css標記則轉換成css物件模型 cssom dom 樹包含了所有的 html 標籤，包括不展示的 head 節點和 display none 的節點，而 cssom 樹則會去掉瀏覽器不能識別的...
重繪與回流
很多面試都會問到的問題，那麼說起這兩個概念，首先先了解一下，瀏覽器對乙個頁面對渲染過程。1.使用者輸入url位址，瀏覽器根據網域名稱查詢ip位址 2.瀏覽器向伺服器傳送http請求 3.伺服器接受請求，根據請求返回相應的html 返回給瀏覽器 4.瀏覽器接受到伺服器的相應結果，對頁面做解析渲染 1 ...
重繪與回流
dom樹結構變化 新增或者刪除可見的dom元素 元素幾何屬性發生變化 頁面渲染初始化 獲取某些屬性 瀏覽器視窗發生變化，即 resize事件發生 啟用css偽類 hover 改變元素顏色 改變元素背景色 將改變樣式的操作集合在一次完成，直接改變classname或csstext 讓要操作的元素進行離...