注：回流也叫重排，叫回流是為了和重繪從字眼上更好區分。
也許是自己笨，關於瀏覽器渲染和重繪回流的文章幾個月來看了幾十篇，竟然到現在才真正理解。而理解靠的竟然是運氣?
瀏覽器渲染過程如下（節選自阮一峰老師的文章，鏈結，有改動）
html**轉化成dom tree
css**轉化成cssom tree（css object model）
結合dom和cssom，生成一棵渲染樹render tree
生成布局（flow），將所有渲染樹進行平面合成（！此步驟再次觸發即回流）
將布局繪製（paint）在螢幕上（！此步驟再次觸發即重繪）
注意，所謂的回流和重繪其實就是上面第四(reflow)、第五步(repaint)。此前也不止一次看過阮老師的這篇文章，卻每次都沒有把重繪和回流和第四第五步聯想起來，今天回顧的時候，偶然發現這兩步正好對應了回流和重繪，看來是我看文章不夠仔細認真。
到這裡就真正理解了重繪和回流了，還有一點是我一直糾結是不是只要觸發了區域性回流，整個頁面都會重新排版，今天仔細看了好幾篇文章，終於確定並不是這樣。阮老師也說:
重排和重繪的dom元素層級越高，成本就越高。所以回流肯定也是哪塊的布局改變了重排**，而不是每次整個頁面都重排。
真正理解重繪和回流
注 回流也叫重排，叫回流是為了和重繪從字眼上更好區分。也許是自己笨，關於瀏覽器渲染和重繪回流的文章幾個月來看了幾十篇，竟然到現在才真正理解。而理解靠的竟然是運氣?瀏覽器渲染過程如下 節選自阮一峰老師的文章，鏈結，有改動 html 轉化成dom tree css 轉化成cssom tree css o...
真正理解重繪和回流
注 回流也叫重排，叫回流是為了和重繪從字眼上更好區分。也許是自己笨，關於瀏覽器渲染和重繪回流的文章幾個月來看了幾十篇，竟然到現在才真正理解。而理解靠的竟然是運氣?瀏覽器渲染過程如下 節選自阮一峰老師的文章，鏈結，有改動 html 轉化成dom tree css 轉化成cssom tree css o...
回流和重繪
在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tree 渲染樹 然後根據...