web頁面的回流,認識與避免


  一、什么是回流?

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

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

  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,改變子節點的樣式。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM