首页 > 其他分享 >回流与重绘

回流与重绘

时间:2023-08-21 15:07:25浏览次数:31  
标签:浏览器 render 节点 回流 重绘 属性

回流(reflow)

回流(reflow): 当render树(渲染树)中的一部分或者全部因为大小边距等引起结构变化 而需要重建的过程叫做回流

重绘(repaint)

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

每个页面至少需要一次回流,就是在页面第一次加载的时候。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程称为重绘。

  • 首先将得到的代码解析生成dom树,这个dom树里边包括了所有的HTML的标签 包括display:none 还有js动态添加的元素等;
  • 浏览器把所有的样式解析成样式结构体;
  • 在dom树和样式结构体组合后构建成render树 (不包括display:none,head节点,因为这些节点不会用于呈现,而且不会影响呈现 所以不再render树中; 但会包括visibility:hidden的节点);
  • 一旦render tree构建完毕后,浏览器就可以根据render 树来绘制页面了。

render树

render树的节点叫做渲染器; 渲染器在文档解析和dom树创建之后创建,会计算dom节点的样式信息; 如果说元素设置成了display:none或者元素的子孙元素继承了display:none的属性,那么元素的render树则不会被创建, 节点的子类display属性决定该节点创建怎样的渲染器。

引起回流和重绘的原因是页面布局和几何属性发生了改变。

何时触发回流和重绘

  • repaint重绘: reflow回流必定引起repaint重绘,重绘可以单独触发 背景色、颜色、字体改变(注意:字体大小发生变化时,会触发回流)
  • reflow回流: 页面第一次渲染(初始化) DOM树变化(如:增删节点) Render树变化(如:padding改变) 浏览器窗口resize 当你查询布局信息,包括offsetLeft、offsetTop、offsetWidth、offsetHeight、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、调用了getComputedStyle()或者IE的currentStyle时,浏览器为了返回最新值,会触发回流。

性能优化

  • 尽量避免改变布局属性。如width, height, left, top。
  • 除了transforms 或者 opacity属性都会引起重绘,做动画的时候要注意, - 尽量使用这两个属性;
  • 使用Flexbox。
  • 避免多次读取部分布局属性(同上)
  • 将复杂的节点元素脱离文档流,降低回流成本

css

  • 减少选择器的复杂性。
  • 避免逐个修改节点样式,尽量一次性修改,减少style修改所影响元素的数量,使用cssText来替代要多次修改的style属性.

js

我们也知道回流的花销也不小,如果每句JS操作都去回流重绘的话,浏览器可能就会受不了。所以很多浏览器都会优化这些操作,浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者到了一定的时间间隔,浏览器就会flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。


标签:浏览器,render,节点,回流,重绘,属性
From: https://blog.51cto.com/u_15956973/7175123

相关文章

  • wx.grid表格样式重绘(超链接样式)
    首先声明,这里达不到超链接的效果,仅仅是显示出来像超链接的样式而已!!!如果需要实现超链接,就尝试绑定一下单元格点击事件。 重绘表格类构建classBlueUnderlineRenderer(wx.grid.PyGridCellRenderer):def__init__(self):gridlib.GridCellRenderer.__init__(self)......
  • 射频电路的接地孔与回流问题
    前沿下图是PCB走线排板时常见的微带线(左图)和带状线(右图)的电磁场分布示意图,其电力线从走线层发出,终止于相关平面层,相关平面层不一定是地线层,可以是电源层,甚至是任意的网络层,在终止的相关平面层里会产生镜像电流,这个电流就叫走线层电流的"回流",回流与信号电流构成闭合回路......
  • 浏览器的回流和重绘
    1、回流重绘的概念回流:当RenderTree中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程重绘:当页面中元素样式的改变并不影响它在文档流中的位置时,浏览器会将新样式赋予给元素并重新绘制它的过程浏览器使用流式布局模型(FlowBasedLayo......
  • 关于NAT端口回流问题的探讨与解决方案
    作者:李毓NAT端口回流其实是一个老生常谈的问题,但是我发现其实这个问题有很多人并没有理解为什么会发生以及并没有给出一个合理的解决方法。今天我们就一起探讨一下这个问题的产生以及如何去解决它。在一般的企业,我们一般都会有这样的网络拓扑结构:最外层是一个接口路由器,后面接......
  • springboot 返回流式数据
    @PostMapping("/stream")publicResponseEntity<StreamingResponseBody>stream(){StreamingResponseBodystream=out->{for(inti=0;i<3;i++){try{Thread.sleep(1000);}cat......
  • 《安富莱嵌入式周报》第313期:搬运机器人,微软出的C语言手册,开源生物信号采集板,开源SMD
    周报汇总地址:http://www.armbbs.cn/forum.php?mod=forumdisplay&fid=12&filter=typeid&typeid=104 更新一期视频教程:DSP视频教程第12期:TI开源分享IQmathDSP源码,适用于所有Cortex-M内核,本期教程做个手把手移植(2022-05-22)https://www.armbbs.cn/forum.php?mod=viewthread&......
  • 重排和重绘
    重排:指的是当渲染树中的一部分(或全部)因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的过程。这个过程比较耗费CPU资源,因为它需要三种计算:布局计算、样式计算、分层和绘制计算。重排比重绘的代价更高。重绘:指的是当渲染树中的一些元素需要更新属性,而这些属性只影响元素的......
  • MobTech ShareSDK|如何从分享到回流
    一、支持40+主流平台的分享与授权ShareSDK是一个社会化登录分享组件,可以让开发者轻松地在APP中集成微信、抖音、QQ、微博、Facebook、Twitter等全球40多个主流社交平台的分享与授权功能。这样,用户可以用自己熟悉的社交账号登录APP,也可以把APP中的内容快速地分享到自己的社交圈,从而......
  • chrome对页面重绘和回流以及优化进行优化
    页面的绘制时间(painttime)是每一个前端开发都需要关注的的重要指标,它决定了你的页面流畅程度。而如何去观察页面的绘制时间,找到性能瓶颈,可以借助Chrome的开发者工具。  回流与重绘1.当rendertree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就......
  • 回流焊的工作原理与操作流程
    一、回流焊是什么回流焊,英文名[Reflowsoldering],是通过重新熔化预先分配到印制板焊盘上的锡膏,实现表面组装元器件焊端或引脚与印制板焊盘之间机械与电气冷却后更好地连接......