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


    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

  • 相关阅读:
    [单链表]链表指针追赶问题
    二叉查找树与平衡二叉树
    二叉树的下一个结点
    fork进程函数总结
    《Effective C++》Item2:尽量以const,enum,inline替换#define
    Hash表的使用
    [数字]整数数字的算法
    算法题:找出整数数组中两个只出现一次的数字
    删除元素的操作
    [Reprinted] 使用Spring Data Redis操作Redis(一) 很全面
  • 原文地址:https://www.cnblogs.com/wszxx/p/12933801.html
Copyright © 2020-2023  润新知