真正理解重繪和迴流

注：迴流也叫重排，叫回流是爲了和重繪從字眼上更好區分。
也許是本身笨，關於瀏覽器渲染和重繪迴流的文章幾個月來看了幾十篇，居然到如今才真正理解。而理解靠的居然是運氣😭
瀏覽器渲染過程以下（節選自阮一峯老師的文章，連接，有改動）

1. HTML代碼轉化成DOM Tree
2. CSS代碼轉化成CSSOM Tree（CSS Object Model）
3. 結合DOM和CSSOM，生成一棵渲染樹Render Tree
4. 生成佈局（flow），將全部渲染樹進行平面合成（！此步驟再次觸發即迴流）
5. 將佈局繪製（paint）在屏幕上（！此步驟再次觸發即重繪）

注意，所謂的迴流和重繪其實就是上面第四(reflow)、第五步(repaint)。此前也不止一次看過阮老師的這篇文章，卻每次都沒有把重繪和迴流和第四第五步聯想起來，今天回顧的時候，偶然發現這兩步正好對應了迴流和重繪，看來是我看文章不夠仔細認真。
到這裏就真正理解了重繪和迴流了，還有一點是我一直糾結是否是隻要觸發了局部迴流，整個頁面都會從新排版，今天仔細看了好幾篇文章，終於肯定並非這樣。阮老師也說:

重排和重繪的DOM元素層級越高，成本就越高。

因此迴流確定也是哪塊的佈局改變了重排哪裏，而不是每次整個頁面都重排。