zoukankan      html  css  js  c++  java
  • CSS的回流(Reflow)与重绘(Repaint)-笔记

    回流:当我们对 DOM 的修改引发了 DOM 几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需要重新计算元素的几何属性(其他元素的几何属性和位置也会因此受到影响),然后再将计算的结果绘制出来。这个过程就是回流(也叫重排)。

    重绘:当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性(比如修改了颜色或背景色)时,浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式(跳过了上图所示的回流环节)。这个过程叫做重绘。

    重绘不一定导致回流,回流一定会导致重绘。硬要比较的话,回流比重绘做的事情更多,带来的开销也更大。但这两个都会耗费性能的,所以我们在开发中,要从代码层面出发,尽可能把回流和重绘的次数最小化。

    哪些实际操作会导致回流与重绘

    1、添加、删除元素(回流+重绘)  

    2、隐藏元素,display:none(回流+重绘)visibility:hidden(只重绘,不回流)  

    3、移动元素,如改变topleft或移动元素到另外1个父元素中(重绘+回流)  

    4、改变浏览器大小(回流+重绘)  

    5、改变浏览器的字体大小(回流+重绘)  

    6、改变元素的paddingbordermargin(回流+重绘)  

    7、改变浏览器的字体颜色(只重绘,不回流)  

    8、改变元素的背景颜色(只重绘,不回流)

    最耗费性能的操作:改变 DOM 元素的几何属性

    耗费性能的操作:改变 DOM 树的结构,节点的增减、移动等操作。

    当你要用到像这样的属性:offsetTopoffsetLeftoffsetWidthoffsetHeightscrollTopscrollLeftscrollWidthscrollHeightclientTopclientLeftclientWidthclientHeight 时,需要通过即时计算得到,所以也进行回流(重排)

    如何规避回流与重绘

    1、避免逐条改变样式,使用类名去合并样式

    2、导火索缓存起来,避免频繁改动

    3、 DOM “离线

    4、Flush 队列(浏览器自己缓存了一个 flush 队列,把我们触发的回流与重绘任务都塞进去,待到队列里的任务多起来、或者达到了一定的时间间隔,或者“不得已”的时候,再将这些任务一口气出队。)

     

    参考链接:https://www.jianshu.com/p/938e4988aa08

    参考链接:https://blog.csdn.net/zhouziyu2011/article/details/70665866

  • 相关阅读:
    Unzip 解压报错
    Linux ftp安装
    关于vsftp出现Restarting vsftpd (via systemctl): Job for vsftpd.service failed because the control 的解决办法
    ASP.NET开发知识总结
    移动端开发调试方法总结
    移动H5优化指南
    基于windows下,node.js之npm
    微服务理解
    SQL Server 触发器
    jQuery验证控件jquery.validate.js使用说明+中文API
  • 原文地址:https://www.cnblogs.com/pengxiangchong/p/12733180.html
Copyright © 2011-2022 走看看