zoukankan      html  css  js  c++  java
  • 回流和重绘有什么区别,如何优化

    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

  • 相关阅读:
    [SDOI2017]新生舞会
    [SCOI2007]最大土地面积
    [JLOI2014]松鼠的新家
    [AHOI2009]中国象棋
    【转载】树链剖分.By.Xminh
    HGOI20180904(NOIP2018模拟sxn出题)
    HGOI20180831 NOIP2018模拟
    【字符串算法1】 再谈字符串Hash(优雅的暴力)
    【字符串算法2】浅谈Manacher算法
    【字符串算法3】浅谈KMP算法
  • 原文地址:https://www.cnblogs.com/wszxx/p/12933801.html
Copyright © 2011-2022 走看看