瀏覽器回流認識

2021-09-12 17:27:12 字數 601 閱讀 4480

一、什麼是回流?

回流是會導致頁面重新渲染的一些元素,從而影響效能。

二、哪些因素會導致回流?

1、調整視窗的大小;

2、改變字型,如果用rem 設定了根目錄的字型大小,這樣就減少了回流的次數;

3、增加或者移除樣式表;

4、內容的變化,使用者在input中輸入了文字(這是不可避免的);

5、啟用css的偽類;

6、操作class屬性;

7、基本操作dom(包括js中的domcument等);

8、計算offsetwidth與offsetheight 屬性,獲取元素在視窗中的位置;

9、在html**中直接設定style 屬性的值,這個降低了**的利用率,還影響效能。

三、如何避免回流?

1、如果想設定元素的樣式,直接改變class名,而不是改變class中的某個特定的屬性,比如height,weight;

2、避免設定多項內聯樣式,就是說少使用style;

3、應用元素動畫的時候,使用屬性的position屬性的fixed值或absolute值;

4、避免使用table布局;

5、盡量在dom樹的最末端改變class,改變子節點的樣式。

瀏覽器回流認識

一 什麼是回流?回流是會導致頁面重新渲染的一些元素,從而影響效能。二 哪些因素會導致回流?1 調整視窗的大小 2 改變字型,如果用rem 設定了根目錄的字型大小,這樣就減少了回流的次數 3 增加或者移除樣式表 4 內容的變化,使用者在input中輸入了文字 這是不可避免的 5 啟用css的偽類 6 ...

認識瀏覽器快取

瀏覽器快取,也就是客戶端快取,既是網頁效能優化裡面靜態資源相關優化的一大利器,也是無數web開發人員在工作過程不可避免的一大問題。瀏覽器快取分為 強快取和協商快取 1 原理 1.瀏覽器載入資源時,先根據這個資源的http header中的cache control判斷是否命中強快取,如果命中,瀏覽器...

瀏覽器的重繪和回流

重繪 當元素樣式的改變不影響布局時,瀏覽器會使用重繪的方式來更新元素的變化,這種改變只會在ui層的重新畫素繪製,這種方式的對瀏覽器開銷比較小。常見的重繪操作有 改變元素顏色 改變元素背景色 more 回流 又名 重排 當元素的尺寸 結構或者觸發了某個屬性的改變,會導致瀏覽器重新渲染,這種操作會造成回...