讲讲回流和重绘的区别,如何避免回流和重绘?

回流:当元素的尺寸,结构属性改变,浏览器需要重新渲染部分或全部文档流的过程

  • 浏览器首次加载
  • 元素尺寸位置改变
  • 元素内容改变
  • 字体大小改变
  • 添加删除dom元素

重绘:元素样式改变并不会影响其位置的变化,浏览器将新样式赋予它并重新绘制

  • color
  • background-color

区别:

回流一定重绘,重绘不一定回流(如改变颜色)

如何避免:

  • 避免多层内联样式
  • 如果有动画效果,使其脱离文档流
  • 用js操作样式的时候尽量一次操作完或者将样式定义为一个class
  • 可以先将元素设置为display:none;等操作结束在显示出来
posted @ 2022-09-25 08:44  天青色等烟雨灬  阅读(127)  评论(0)    收藏  举报