定義
重繪是指當color\background-color等與視覺相關的樣式屬性值被更新時觸發繪制過程,在繪制過程中要重新計算元素的視覺信息,使元素呈現新的外觀。
回流是指當窗口尺寸被修改(resize),發生滾動操作,或者position\display\width\height等元素位置相關屬性被更新時觸發布局過程,在布局過程中要計算所有元素的位置信息。
觸發回流的操作
[1]DOM元素的幾何屬性變化
[2]DOM樹的結構變化
[3]獲取某些屬性:offsetTop\offsetLeft\offsetWidth\offsetHeight\scrollTop\scrollLeft\scrollWidth\scrollHeight\clientTop\clientLeft\clientWidth\clientHeight\getComputedStyle()\currentStyle()
[4]改變元素的一些樣式
[5]調整瀏覽器窗口大小
減少重繪和回流的方法
[1]不要一條一條地修改DOM樣式,而是修改className或者修改style.cssText
[2]在內存中多次操作節點,完成后再添加到文檔中去
[3]對于一個元素進行復雜的操作時,可以先隱藏它,操作完成后再顯示
[4]在需要經常獲取那些引起瀏覽器重排的屬性值時,要緩存到變量中
[5]為需要多次重排的元素的position設置為fixed或absolute
[6]不要使用table布局,因為一個小改動可能會造成整個table重新布局。而且table渲染通常要3倍于同等元素時間
優化網頁的方法:
html:
[1]使用新標簽,提高瀏覽器識別能力
[2]減少html標簽嵌套深度
[3]為圖片指定大小,減少回流
[4]壓縮html
[5]不要使用table布局,因為一個小改動可能會造成整個table重新布局。而且table渲染通常要3倍于同等元素時間
css:
[1]cssSprite
[2]模塊化css
[3]簡化和優化css選擇器,將嵌套層數控制在最小,最右邊的選擇器使用優先級較高的選擇器
[4]避免使用css表達式
[5]不使用@import
[6]合并和壓縮css代碼
js:
[1]壓縮js代碼
[2]不要一條一條地修改DOM樣式,而是修改className或者修改style.cssText
[3]在內存中多次操作節點,完成后再添加到文檔中去
[4]對于一個元素進行復雜的操作時,可以先隱藏它,操作完成后再顯示
[5]在需要經常獲取那些引起瀏覽器重排的屬性值時,要緩存到變量中
[6]為需要多次重排的元素的position設置為fixed或absolute
文章列表