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

40次阅读

共计 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/
正文完
 0