第 15 题（谈谈你对回流和重绘的理解（））

2021-10-08

什么是回流？

当一个元素自身的宽高，布局，显示或隐藏，或元素内部的文字结构发生变化，导致需要重新构建页面的时候，就产生了回流

什么是重绘？

当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素的外观风格的时候，就产生了重绘

什么时候会进行回流？

添加或者删除可见的 DOM 元素的时候
元素的位置发生改变
元素的尺寸发生改变
内容改变
页面第一次渲染的时候
列举一些相关的 CSS 样式：width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow 等

什么时候会进行重绘？

列举一些相关的 CSS 样式：color、background、background-size、visibility、box-shadow

如何进行性能优化？

用 transform 代替 top，left ，margin-top， margin-left… 这些位移属性
不要使用 js 代码对 dom 元素设置多条样式，选择用一个 className 代替之
不要在循环内获取 dom 的样式例如：offsetWidth, offsetHeight, clientWidth, clientHeight 等。浏览器有一个回流的缓冲机制，获取这些属性时会产生回流
避免设置多层内联样式，写个外部类这样只回流一次
让多次回流的元素脱离文档流比如动画，使用 position 属性的 fixed 值或 absolute 值
一起变化（同时修改所有需要变化的属性）

文章的内容/灵感都从下方内容中借鉴

【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...
【大数据可视化图表插件】https://www.npmjs.com/package...
【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/

推荐阅读

上一篇：Python中的True和False

下一篇：Java 17 将要发布，补一下 Java 13 中的新功能