作者:Noxus丶SJ
链接:https://zhuanlan.zhihu.com/p/134024353
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
什么是回流?
当一个元素自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,就产生了回流
什么是重绘?
当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就产生了重绘
什么时候会进行回流?
1、添加或者删除可见的DOM元素的时候
2、元素的位置发生改变
3、元素的尺寸发生改变
4、内容改变
5、页面第一次渲染的时候
列举一些相关的CSS样式:width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow等
什么时候会进行重绘?
列举一些相关的CSS样式:color、background、background-size、visibility、box-shadow
如何进行性能优化?
1、用transform 代替 top,left ,margin-top, margin-left… 这些位移属性
2、不要使用 js 代码对dom 元素设置多条样式,选择用一个 className 代替之
3、不要在循环内获取dom 的样式例如:offsetWidth, offsetHeight, clientWidth, clientHeight等。浏览器有一个回流的缓冲机制,获取这些属性时会产生回流
4、避免设置多层内联样式,写个外部类这样只回流一次
5、让多次回流的元素脱离文档流比如动画,使用 position 属性的 fixed 值或 absolute 值
6、一起变化(同时修改所有需要变化的属性)