真正理解重繪和回流

2021-09-12 18:12:15 字數 677 閱讀 6059

注:回流也叫重排,叫回流是為了和重繪從字眼上更好區分。

也許是自己笨,關於瀏覽器渲染和重繪回流的文章幾個月來看了幾十篇,竟然到現在才真正理解。而理解靠的竟然是運氣?

瀏覽器渲染過程如下(節選自阮一峰老師的文章,鏈結,有改動)

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 渲染樹 然後根據...