共计 799 个字符,预计需要花费 2 分钟才能阅读完成。
什么是回流?
- 当一个元素本身的宽高,布局,显示或暗藏,或元素外部的文字构造发生变化,导致须要从新构建页面的时候,就产生了回流
什么是重绘?
- 当一个元素本身的宽高,布局,及显示或暗藏没有扭转,而只是扭转了元素的外观格调的时候,就产生了重绘
什么时候会进行回流?
- 增加或者删除可见的 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/
正文完