在編寫CSS樣式時,我們需要注意的一點就是盡量減少引起瀏覽器重排(reflow)和重繪(repaint)的屬性。這樣能夠有效地提高網(wǎng)頁的性能。
受影響的CSS屬性主要包括:
display width height font-size line-height text-align padding margin border overflow position top left right bottom opacity
以上屬性在進(jìn)行修改時,會引發(fā)瀏覽器重新布局排版,即觸發(fā)重排。
除此之外,在增加或減少DOM元素的時候也會觸發(fā)重排。例如:
document.body.appendChild(element); document.body.removeChild(element);
這些操作都會引起整個文檔的重繪和重排,因此如果有多個這樣的操作,可以先將它們放在一個文檔片段中(document fragment),然后一次性加入文檔中,這樣可以減少瀏覽器的重排重繪次數(shù)。
總之,為了提高網(wǎng)頁的性能,我們需要盡可能減少這些引起重排和重繪的屬性和操作,并進(jìn)行優(yōu)化。