国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 回流與重繪的概念及觸發條件

回流與重繪的概念及觸發條件

來源:千鋒教育
發布人:wjy
時間: 2022-09-07 16:57:58 1662541078

1. 回流

當渲染樹中部分或者全部元素的尺寸、結構或者屬性發生變化時,瀏覽器會重新渲染部分或者全部文檔的過程就稱為回流。

下面這些操作會導致回流:

頁面的首次渲染瀏覽器的窗口大小發生變化元素的內容發生變化元素的尺寸或者位置發生變化元素的字體大小發生變化激活CSS偽類查詢某些屬性或者調用某些方法添加或者刪除可見的DOM元素

在觸發回流(重排)的時候,由于瀏覽器渲染頁面是基于流式布局的,所以當觸發回流時,會導致周圍的DOM元素重新排列,它的影響范圍有兩種:

① 全局范圍:從根節點開始,對整個渲染樹進行重新布局② 局部范圍:對渲染樹的某部分或者一個渲染對象進行重新布局

回流與重繪的概念及觸發條件

2. 重繪

當頁面中某些元素的樣式發生變化,但是不會影響其在文檔流中的位置時,瀏覽器就會對元素進行重新繪制,這個過程就是重繪。

下面這些操作會導致回流:

color、background 相關屬性:background-color、background-image 等outline 相關屬性:outline-color、outline-width 、text-decorationborder-radius、visibility、box-shadow

注意: 當觸發回流時,一定會觸發重繪,但是重繪不一定會引發回流。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT