首页 > 其他分享 >回流(重排)和重绘画

回流(重排)和重绘画

时间:2022-10-07 13:11:05浏览次数:61  
标签:浏览器 DOM 元素 节点 绘画 重排 回流 重绘

是什么?
浏览器解析的DOM树和CSSOM树,接着对DOM树进行遍历,拿到DOM节点,然后再从CSSDOM树中拿到相应节点的样式,最后生成渲染树。

回流:渲染树生成之后,每个节点元素的具体位置、大小的计算,然后渲染在浏览器,这个过程就叫回流
重绘:每个节点元素的像素点渲染在浏览器的过程就叫重绘(如背景色)

什么情况下会造成回流和重绘?

①:修改DOM元素的位置、大小,浏览器要重新遍历计算DOM元素,会造成回流(重排)
②:修改DOM元素的背景色、字体颜色等操作会引起重绘
PS : 重绘不一定会引起回流,但回流一定会引起重绘

如何优化?

1、浏览器:因为每次的回流和重绘会造成浏览器开销巨大,浏览器层面上就做了一些优化措施,它不会每次都把涉及回流、重绘的操作执行一次,而是把这些操作放入一个列队里,在列队排满后或者一段时间后一次执行,大大减少了浏览器开销,但是如果在代码执行的过程中,有JS请求APIA获取元素的位置时,列队会被强制刷新,如下API:offsetLeft、offsetTop、offsetWidth, offsetHeight, clientWidth, clientHeigth,clientLeft,clientTop,scrollWidth, scrollHeight, scrollLeft, scrollTop等。

2、尽量减少重绘、回流操作:如使用visible、opcity代替display
3、脱离文档流:如遇到复杂动画的时候,可以把动画所在的盒子绝对定位,让其脱离父级文档流,不影响父级和后面元素
4、css3硬件加速:使用transform、opcity、filter(图片黑白)触发硬件加速

标签:浏览器,DOM,元素,节点,绘画,重排,回流,重绘
From: https://www.cnblogs.com/xxflz/p/16759551.html

相关文章

  • 减少回流与重绘
    一、前情回顾在讨论回流与重绘之前,我们要知道:浏览器使用流式布局模型(FlowBasedLayout)。浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了Render......
  • 重排字符串数组
    /*给定一系列长度相等的字符串,请对字符串进行重排,使得相邻的2个字符串之间仅有一个字符差异,请输出重排后的结果:如果有多个解,则输出字典序的最小的解。如果无解,则输出字符......
  • Autodesk SketchBook Pro for Enterprise 2021 mac(专业草图绘画软件)企业版V8.8.0中
    AutodeskSketchBookProforEnterprise2021mac版中文发布。Autodesk公司开发创作的SketchBookPro2021是一款有趣和直观的喷涂和草图绘画工具,可以将您的电脑变成一......
  • nat 回流的试验 用于华为防火墙
    ......
  • WPF 开源二维绘画小工具 GeometryToolDemo 项目
    这是一个演示WPF进行二维绘画的小工具Demo项目,基于MIT协议在GitHub上完全开源源作者是YuWeiCong我只是帮助开源的工具人软件运行界面效果:开源地址:https://g......
  • 面试题 01.02. 判定是否互为字符重排
    面试题01.02.判定是否互为字符重排给定两个字符串s1和s2,请编写一个程序,确定其中一个字符串的字符重新排列后,能否变成另一个字符串。示例1:输入:s1="abc",s......
  • 回流和重绘
    回流当我们对dom的修改引发了dom几何尺寸的变化(比如修改元素的宽、高或隐藏元素等),浏览器需要重新计算元素的几何属性,然后将计算的结果绘制出来,这个过程就是回流重绘......
  • 讲讲回流和重绘的区别,如何避免回流和重绘?
    回流:当元素的尺寸,结构属性改变,浏览器需要重新渲染部分或全部文档流的过程浏览器首次加载元素尺寸位置改变元素内容改变字体大小改变添加删除dom元素重绘:元素样......
  • 第 22 题:介绍下重绘和回流(Repaint & Reflow),以及如何进行优化
    1.浏览器渲染机制浏览器采用流式布局模型(FlowBasedLayout)浏览器会把HTML解析成DOM,把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树(RenderTree)。有了RenderTree,我们......
  • Substance 3D Painter for mac(pt 3D绘画软件)中文版
    Substance3DDesignerformac是一款Adobe全新发布的AdobeSubstance3D系列应用软件之一的三维材质纹理制作软件,可以在3D中绘画,实时,使用此行业标准应用程序实时纹理3D......