現代web框架大多都是資料驅動類的，比如 react, vue，所以開發者不需要直接接觸 dom，修改 data 便可以驅動介面更新。但是作為前端工程師，了解瀏覽器的重繪與重排還是很有必要的，可以幫助我們寫出更好效能的 web 應用。
css tree: 瀏覽器將 css 解析成 cssom 的樹形結構
dom tree：瀏覽器將 html 解析成樹形的資料結構
render tree：將 dom 與 cssom 合併成乙個渲染樹
有了渲染樹（render tree）,瀏覽器就知道網頁中有哪些節點，以及各個節點與 css 的關係，從而知道每個節點的位置和幾何屬性，然後繪製頁面。
當 dom 的變化影響了元素的幾何屬性（比如 width 和 height ）,就會導致瀏覽器重新計算元素的幾何屬性，同樣受到該元素影響的其他元素也會發生重新計算。此時，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造渲染樹。這個過程被稱為重排(也叫「回流」)（reflow），完成重排之後，瀏覽器會重新繪製受影響的部分到頁面上，這個過程就是重繪（repaint）。
所以重排一定會引起重繪，而重繪不一定會引起重排，比如乙個元素的改變並沒有影響布局的改變（background-color的改變），在這種情況下，只會發生乙個重繪（不需要重排）。
可以總結出，當元素的幾何屬性或頁面布局發生改變就會引起重排，比如：
對可見 dom 元素的操作（新增，刪除或順序變化）
元素位置發生改變
元素的幾何屬性發生改變（比如：外邊距、內邊距、邊框寬度以及內容改變引起的寬高的改變）
頁面首次渲染
偽類樣式啟用（hover等）
瀏覽器視口尺寸發生改變（滾動或縮放）
你所應該要知道的面試藝術與技巧
面試乙份工作需要哪些 1.專業知識 如果沒有任何專業技能，那麼靠什麼進入企業呢？如果想要進入好的企業，沒有深厚的專業技能無疑是不行的。2.業務知識 企業想要招的是有能力為企業帶來利益的人，如果你不能將專業知識聯合起來運用，那麼你就不是企業的理想人才。所以你還要了解業務知識，能熟練運用知識，即所謂的專...
大學生應該要知道的生活哲理
第乙個安慰 最重要的是今天的心 何必為痛苦的悔恨而失去現在的心情,何必為莫名的憂慮而惶惶不可終日.過去的已經一去不復返了,再怎麼悔恨也是無濟於事.未來的還是可望而不可及,再怎麼憂慮也是會空悲傷的.今天心,今日事和現在人,卻是實實在在的,也是感覺美好的.當然,過去的經驗要總結,未來的風險要預防,這才是...
css重繪與重排的方法
瀏覽器載入頁面原理 通常在文件初次載入時，瀏覽器引擎會解析html文件來構建dom樹，之後根據dom元素的幾何屬性構建一棵用於渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似於 盒子模型 由於隱藏元素不需要顯示，渲染樹中並不包含dom樹中隱藏的元素 當渲染樹構建完成後，瀏覽器就可以將元素放置到正...