• 回流和重绘有什么区别,如何优化


    dom tree+css=render tree

    回流

    当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。

     当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。

    如何减少回流、重绘

    减少回流、重绘其实就是需要减少对render tree的操作(合并多次多DOM和样式的修改),并减少对一些style信息的请求,尽量利用好浏览器的优化策略。具体方法有:

    1.直接改变className

    2.使用DocumentFragment进行缓存操作,引发一次回流和重绘;

    3.使用display:none技术,只引发两次回流和重绘; ( 只是减少重绘和回流的次数,display:none 是会引起重绘并回流,相对来说,visibility: hidden只会引起重绘 )

    4.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存

    5.让元素脱离动画流,减少回流的Render Tree的规模
    ————————————————
    版权声明:本文为CSDN博主「踏着阳光2020」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/xiaoxiaojie12321/java/article/details/81352550

  • 相关阅读:
    leetcode之Unique Binary Search Trees
    c++ 非常量引用产生临时对象
    redis的启动脚本
    leetcode 之 Insertion Sort List
    leetcode 之 Product of Array Except Self
    一致性hash的由来和原理
    我的vim 配置
    【原创】html页面清除浮动的几种方法
    实现本页面跳转的几种方式
    php输出语句用法总结
  • 原文地址:https://www.cnblogs.com/wszxx/p/12933801.html
Copyright © 2020-2023  润新知