看完還分不清重繪和重排過來捶我，我說的！！！-有解無憂

👾 前言

當一個頁面開始呈現東西的時候大家其實也經常聽到是怎么回事了，說白了就是瀏覽器下載了所有的html資源和css資源分別構建了Dom樹和Style樹，而當這兩兄弟都準備就緒了就會有渲染樹Render Tree的生成，
渲染樹渲染樹大家聽到這名字就知道它要干啥了，就是把東西給整到頁面上，而這個程序就是所謂的渲染，
這個渲染他又是怎么做的呢，你可以理解為先把頁面具體結構給先確定好，比如這個頁面分成幾塊地方幾塊地方占了多少位置，然后他才開始繪制到我們看到的螢屏上，說白了就是畫畫，你想象一下畫一個東西不得先整出大致結構然后再慢慢修理細節嗎？其實就是一樣的程序，而這個程序就涉及到了重繪和重排，

重 繪顧名思義就是重新繪制，你也可以認為在畫板上給一個物體加點顏色或者修修邊，意思是這么個意思，
我們可以把頁面當成一塊畫板，當我們的元素位置沒有發生變化而一些形狀顏色啊進行了改變那么就說明這個元素引起了重繪，
就例如…我把我頭像邊框半徑給改了，那么他位置沒有變動呀自然而然的就只是重新繪制了一下并沒有引起重排（下面會講到），
列舉幾個重繪的例子
- 元素顏色發生變化
- 元素背景顏色發生變化
- 元素邊框半徑變化
- 元素陰影變化
如果大家實在分不清哪些樣式是重繪的話可以看到這個網站CSS Triggers
這個網站上面有很多的元素的介紹和，就比如這個border-top-left-radius左上角邊框半徑它上面說到：不會觸發任何幾何更改，這很好，但由于它是一種視覺屬性，它會導致繪畫發生，繪畫通常是一項非常昂貴的操作，因此您應該謹慎，
所以像此類沒有改變位置或者說沒有影響別的元素的改變繪制就是重繪，

重 排顧名思義就是重新排列，你也可以認為在畫板上多加了一些人物或者物品，使得其他的物體位置發生了改變，整個頁面跟以前不一樣了需要重新排版，
當然我們也可以把頁面當成畫板，當我們改變了一個元素的寬度啊、高度啊或者左邊距右邊距等等樣式，只要是影響了別的元素，那就算是引起了重排，
就例如…我把頭像寬度拉大了，它這樣很明顯就是改變了頁面的排版，你看到后面我的名字都給擠下來了，
列舉幾個重排的例子
- 添加洗掉DOM元素
- 改變元素位置
- 元素的高度寬度尺寸發生變化
- 瀏覽器視窗大小變化
- 容器的內容變多變少
如果大家還是分不清哪些是重排的話也可以看到上面那個網站，
也是拿這個width舉例了，它上面說到了更改width 會改變元素的幾何形狀，這意味著它可能會影響頁面上其他元素的位置或大小，這兩者都需要瀏覽器進行布局操作，那么這個布局操作其實就是讓我們重排了，
每一次的這種重新排版都會給頁面帶來很大的影響，看這一個元素改變可能看不出來，想象一下如果有很多個元素都改變了，那么每個元素之間也會相互影響，那得多恐怖，

有一句大家聽到爛的句子：重繪不一定重排，重排一定會有重繪，
啊…確實啊，當我們畫畫的時候如果給一個物品上色并不影響其他的布局，如果我們要重新在畫板的物品與物品中間添加一個物品那不僅僅改變了布局還讓需要把其他的物品重新畫一遍，
意思是這么個意思，在網頁中也一樣只要你改變了元素的大小位置等就引起了重排那么必然會引起重繪，那么問題來了：絕對定位的元素改變大小和位移會引起重排嗎？
這個問題我也思考了很久，我說說我的看法：我們都知道絕對定位的元素是脫離了檔案流也就是不占位置，那我們改變不脫離檔案流的元素位置必定會引起重排，那么既然它脫離了檔案流，那就不關頁面的事情了，
那么其實像浮動元素和絕對定位元素這些脫離了檔案流的元素改變了寬度等操作，其實只是僅僅對自身進行了重繪和重排而并沒有引起整個頁面的重排，或許我這樣說也不是很準確，這也是我自己的看法，如果有不同看法的小伙伴可以在評論區指出哈~~🚘

使用脫離檔案流：像我們上文說的，使用脫離了檔案流這樣可以有效地減少重排，他的變化不會影響頁面的其他元素，
樣式集中改變：動態改變一個元素的樣式我們盡可能少的對它單一樣式的不斷改變，要改就一次性改完它，給他加個類名一次性改，
元素消失術：當我們改變或新增DOM節點的時候,先設定元素為display：none然后進行頁面布局等操作；設定完成后將元素設定為display：block這樣的話就只引發兩次重繪和重排,因為當我們設定display:none的時候元素便不會在渲染樹出現，接下來的操作都不會觸發重排和重繪，
盡量不使用table：當我們使用table時他的可能很小的一個小改動會造成整個table的重新布局，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/302271.html

標籤：其他