教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-618-4000

什么是重繪和重排【前端與移動(dòng)開(kāi)發(fā)】

更新時(shí)間:2022年08月26日18時(shí)33分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

重繪(repaint或redraw)：

重繪是指一個(gè)元素外觀的改變所觸發(fā)的瀏覽器行為，瀏覽器會(huì)根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。重繪發(fā)生在元素的可見(jiàn)的外觀被改變，但并沒(méi)有影響到布局的時(shí)候。比如，僅修改DOM元素的字體顏色(只有Repaint，因?yàn)椴恍枰{(diào)整布局)。


重排(重構(gòu)/回流/reflow)：

當(dāng)渲染樹(shù)中的一部分(或全部)因?yàn)樵氐囊?guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建, 這就稱(chēng)為回流(reflow)。每個(gè)頁(yè)面至少需要一次回流，就是在頁(yè)面第一次加載的時(shí)候。

觸發(fā)重排的條件：任何頁(yè)面布局和幾何屬性的改變都會(huì)觸發(fā)重排：

頁(yè)面渲染初始化(無(wú)法避免)

添加或刪除可見(jiàn)的DOM元素

元素位置的改變，或者使用動(dòng)畫(huà)

元素尺寸的改變——大小，外邊距，邊框

瀏覽器窗口尺寸的變化


填充內(nèi)容的改變，比如文本的改變或圖片大小改變而引起的計(jì)算值寬度和高度的改變

總結(jié)：重排必定會(huì)引發(fā)重繪，但重繪不一定會(huì)引發(fā)重排。

0 分享到：
和我們?cè)诰€(xiàn)交談！