中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

什么是重繪和重排,它們的區(qū)別是什么?

2022-06-04    分類: 網(wǎng)站建設(shè)

重繪:當(dāng)頁面元素樣式的改變不影響布局時,瀏覽器重新對元素進行更新的過程叫做重繪。

重排:當(dāng)頁面元素的尺寸、結(jié)構(gòu)、或某些屬性發(fā)生改變時,瀏覽器重新渲染部分或全部文檔的過程叫做重排也叫做回流。


一個頁面由兩部分組成:

DOM:描述該頁面的結(jié)構(gòu)

render:描述 DOM 節(jié)點 (nodes) 在頁面上如何呈現(xiàn)


當(dāng) DOM 元素的屬性發(fā)生變化 (如 color) 時, 瀏覽器會通知 render 重新描繪相應(yīng)的元素, 此過程稱為 repaint。


如果該次變化涉及元素布局 (如 width), 瀏覽器則拋棄原有屬性, 重新計算并把結(jié)果傳遞給 render 以重新描繪頁面元素, 此過程稱為 reflow。


這兩個過程是很耗費瀏覽器性能的, 從 IE 系列和 Chrome 渲染頁面速度上的差距即可看出渲染引擎計算對應(yīng)值和呈現(xiàn)并不一定高效, 而每次對元素的操作都會發(fā)生 repaints 或 reflow, 因此編寫 DOM 交互時如果不注意就會導(dǎo)致頁面性能低下

頁面渲染的過程如下:

1.解析HTML代碼并生成一個 DOM 樹。


2.解析CSS文件,順序為:瀏覽器默認(rèn)樣式->自定義樣式->頁面內(nèi)的樣式。


3.生成一個渲染樹(render tree)。這個渲染樹和DOM樹的不同之處在于,它是受樣式影響的。它不包括那些不可見的節(jié)點。


4.當(dāng)渲染樹生成之后,瀏覽器就會在屏幕上“畫”出所有渲染樹中的節(jié)點。


不管頁面發(fā)生了重繪還是重排,它們都會影響性能(最可怕的是重排 ,應(yīng)盡量避免)

下列情況會發(fā)生重排

頁面初始渲染

添加/刪除可見DOM元素

改變元素位置

改變元素尺寸(寬、高、內(nèi)外邊距、邊框等)

改變元素內(nèi)容(文本或圖片等)

改變窗口尺寸


如何減少重排和重繪(提高性能)


由于回流和重繪會帶來很大的性能開銷,所以在開發(fā)中我們要盡量避免或減少回流和重繪的次數(shù)來提高性能

1.      避免頻繁讀取會引發(fā)回流/重繪的屬性,如果確實需要多次使用,就用一個變量緩存起來。

2.     對具有復(fù)雜動畫的元素使用絕對定位,使其脫離文檔流,否則會引起父元素及后續(xù)元素頻繁回流。

3.     要避免頻繁的去操作DOM,可以通過創(chuàng)建documentFragment,完成所有所有DOM操作后,最后再把它添加到文檔中。

4.     避免頻繁操作樣式,最好一次性重寫style屬性,或者將樣式列表定義為class并一次性更改class屬性。


1.分離讀寫操作


var curLeft=div.offsetLeft;


var curTop=div.offsetTop;


div.style.left=curLeft+1+’px’;


div.style.top=curTop+1+’px’;


2.樣式集中改變 ,可以添加一個類,樣式都在類中改變

3.可以使用absolute脫離文檔流。

4.使用 display:none ,不使用 visibility,也不要改變 它的 z-index

5.能用css3實現(xiàn)的就用css3實現(xiàn)。

區(qū)別:

  1. 重繪的性能開銷較低,重排的性能開銷較高;

  2. 回流(重排)一定會觸發(fā)重繪,而重繪不一定會回流(重排)


網(wǎng)頁題目:什么是重繪和重排,它們的區(qū)別是什么?
網(wǎng)站網(wǎng)址:http://m.rwnh.cn/news13/163313.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信公眾號網(wǎng)站排名、域名注冊營銷型網(wǎng)站建設(shè)、建站公司面包屑導(dǎo)航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)
察隅县| 崇州市| 石首市| 安福县| 甘泉县| 永春县| 陇川县| 华安县| 万盛区| 平凉市| 同德县| 长岛县| 杭州市| 昌平区| 五原县| 庄浪县| 雷山县| 平潭县| 蓬溪县| 来宾市| 涟水县| 分宜县| 曲沃县| 连州市| 台江县| 临泽县| 汨罗市| 芦山县| 大渡口区| 海兴县| 客服| 鄱阳县| 兴义市| 疏勒县| 万安县| 普兰店市| 鲁甸县| 隆林| 宁明县| 海原县| 如皋市|