加深認識 「重繪」 和 「重排」
1.重繪
重繪是指乙個元素外觀改變所觸發的瀏覽器行為，大概就是外觀屬性的改變，像，背景顏色，等
2，重排
重排是指渲染樹中因為元素的尺寸或規模改變，需要重新構建的這個過程。
3，觸發重排的條件
4，重繪和重排的關係
重排一定會引發重繪，但重繪不一定會重排
5，順便講講瀏覽器的渲染過程，上圖
從圖大概可以看出來這幾點
解析html 生成dom樹
解析css 生成 cssom樹
將dom樹和cssom樹結合。生成渲染樹 （這個時候已經走到render tree 啦）
然後就是layout(這就是回流) ，可以得到幾何資訊
再然後就是重繪啦，可以得到節點的絕對畫素，
最後就是將畫素發給gpu，展示在頁面上 （這塊還不是特別清楚，以後會補充）
需要注意：重繪和重排都非常消耗效能，儘量減少引發的
解決方案：
需要動態向頁面追加元素時，把需要增加的所有元素拼接成字串，最後統一增加，
新增css樣式，而不是利用js控制樣式
讓元素脫離動畫流，減少回流的render tree的規模 $("#block1").animate();
直接改變classname，如果動態改變樣式，則使用csstext（考慮沒有優化的瀏覽器）
// bad
elem.style.left = x + "px";
elem.style.top = y + "px";
// good
elem.style.csstext += ";left: " + x + "px;top: " + y + "px;";
讀寫分離，把統一修改樣式放在一起執行，新版瀏覽器有自己的檢測機制，會把挨著的修改操作統一執行，引發一次回流和重繪。
重繪和重排
重繪是乙個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility outline 背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計算 儘量減少重排次數和縮小重排的影響範圍 1.dom...
重排和重繪
當dom的變化影響了元素的幾何屬性 寬或高 瀏覽器需要重新計算元素的幾何屬性，同時其他元素的幾何屬性和位置也會受到影響。瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹，這個過程稱為重排。完成重排後，瀏覽器會重新繪製受到影響的部分到螢幕，這個過程稱為重繪。由於瀏覽器的流布局，對渲染樹的計算通常...
重繪和重排
構建dom樹 渲染引擎解析html文件，將所有標籤轉換為dom樹中的dom節點生成內容樹 構建渲染樹 解析對應的css樣式檔案資訊，樣式樹與dom樹結合構建成渲染樹 布局渲染樹 從根節點遞迴呼叫，計算每乙個元素的大小 位置等，給出每個節點所應該在螢幕上出現的精確座標 繪製渲染樹 遍歷渲染樹，使用ui...