美文网首页
重绘和回流

重绘和回流

作者: 逸笛 | 来源:发表于2021-09-13 15:36 被阅读0次

    重绘:

    只是样式的变化,不会引起DOM树变化,页面布局变化的行为叫重绘,且重绘不一定会伴随回流。

    回流:

    引起DOM树结构变化,页面布局变化的行为叫回流,且回流一定伴随重绘。

    什么情况下回导致回流,如何避免回流?

    1.页面初次渲染

    2.浏览器窗口尺寸改变(resize事件发生也会引起回流。)

    3.DOM的增删行为

    比如你要删除某个节点,给某个父元素增加子元素,这类操作都会引起回流。
    如果要加多个子元素,最好使用documentfragment。(让要操作的元素进行离线处理,处理完事以后再一起更新)
    documentFragment是一个保存多个element的容器对象(保存在内存)当更新其中的一个或者多个element时,页面不会更新。只有当documentFragment容器中保存的所有element更新后再将其插入到页面中才能更新页面。
    documentFragment用来批量更新

    4.几何属性的变化

    比如元素宽高变了,border变了,字体大小变了,这种直接会引起页面布局变化的操作也会引起回流。
    如果你要改变多个属性,最好将这些属性定义在一个class中,直接修改class名,这样只用引起一次回流。

    5.元素位置的变化

    改一个元素的左右margin,padding之类的操作

    所以在做元素位移的动画,不要更改margin之类的属性,使用定位脱离文档流后改变位置会更好

    相关文章

      网友评论

          本文标题:重绘和回流

          本文链接:https://www.haomeiwen.com/subject/kcjfgltx.html