一、什么是回流?
回流是會導致頁面重新渲染的一些元素,從而影響性能。
二、哪些因素會導致回流?
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,改變子節點的樣式。