乘风原创程序

  • 浏览器的回流和重绘怎么理解
  • 2020/8/8 17:16:45
  • 浏览器的回流和重绘浅谈

    页面的回流和重绘会影响JavaScript的性能,如果你的html很大很复杂,页面回流和重绘是一个非常值得关注的点。对于重绘和回流的概念不是很清晰,查看了许多博文,在这里说一下自己的理解!!欢迎同学们与我交流。

    什么是回流

    当Render Tree中部分或全部元素尺寸、结构或某些属性发生改变的时候,浏览器会重新渲染部分或全部的文档的过程做回流。回流必将引起重绘,而重绘不一定会引起回流。

    什么是重绘

    当页面上的元素样式改变并不会影响到他在文档流的位置,浏览器会将新样式赋给他并且重新绘制,这个过程叫做重绘。

    回流和重绘常见的触发方式

    常见会引起回流和重绘的样式属性有:display:none;visibility: hidden;font-size;color;background-color等常见的方式还有像js中通过操作DOM进行一些列的添加、删除元素等一系列操作,css伪类激活,调整窗口的大小或者浏览器窗口尺寸改变—resize事件发生时都会引起回流。

    如何减少重绘和回流

    1、想要改变元素样式,通过改变元素的 class 名 (尽可能在 DOM 树的最末端改变class)
    2、避免设置多项内联样式,因为每个都会造成回流,样式应该合并在一个外部类,这样当该元素的class属性可被操控时仅会产生一个reflow。
    3、在操作offset**** 、scroll***、client***、width/height等属性时,先用变量先进行存储,在进行操作。

    重绘和回流也是为什么要减少dom操作的原因之一。

    本文地址:https://blog.csdn.net/qq_45335911/article/details/107872175