一、什么是回流?
回流是会导致页面重新渲染的一些元素,从而影响性能。
二、哪些因素会导致回流?
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, 改变子节点的样式。