关于html:第-15-题谈谈你对回流和重绘的理解

什么是回流？

• 当一个元素本身的宽高，布局，显示或暗藏，或元素外部的文字构造发生变化，导致须要从新构建页面的时候，就产生了回流

什么是重绘？

• 当一个元素本身的宽高，布局，及显示或暗藏没有扭转，而只是扭转了元素的外观格调的时候，就产生了重绘

什么时候会进行回流？

• 增加或者删除可见的 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/