前端效能優化二 布局和樣式

2022-01-13 14:41:54 字數 1043 閱讀 2275

重繪:其實就是觸發瀏覽器的paint的過程。

回流:其實不僅僅是觸發了paint的過程還觸發layout的過程

回流必定觸發重繪

能觸發回流的樣式:

能觸發回流的js:

除了上面的這些還有,只要是獲取元素位置相關的,瀏覽器都會在當前時間點去計算得到該屬性,該計算的過程就會觸發回流。

只觸發重繪的樣式:

1.減少回流和重繪

布局:

使用transform代替top/left等值的改變(啟用gpu加速渲染)

用opacity代替visibility

dom:

不要逐條修改 dom 樣式,可預先定義好 class,直接修改該值。

不要把 dom 結點的屬性值放在乙個迴圈裡當成迴圈裡的變數,例如迴圈呼叫getboundingclientrect()方法,將會導致頁面一直處於回流的過程。

不要使用table布局,因為你改動一點點都將影響整個table的布局。

對於頁面的動畫,我們最好新建圖層,把回流和重繪的消耗降低。

啟用 gpu 硬體加速:使用transformopacityfilterswill-change可以啟用gpu加速。

參考資料:

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...

前端效能優化

隨著現在 越來越酷炫,各種,資源庫,動畫等等用的越來越多,在使用者視覺和功能的提公升的同時,效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s,網民就會流失70 以上。這種說法我覺得不是很正確的,除非是非常重要 必須要使用的 否則超過5s我基本直接關了,體驗太差。所以,使用者 忍讓 是有極限...