perf(web): 长期存在的标签无限增长(堆内存、DOM、CPU) — 根本原因和修复 PR

□ 症状

应用程序的一个网页标签被关闭了数小时(账号上有许多会话,其中有几十个流出),越来越慢,最终克罗姆杀死了它(OOM). 同一账户上的本地应用程序是即时的,所以这是客户端,而不是服务器或网络.

(由“主”建造)

~ 5分钟后 ~ 一晚后 ~ |. CPU = 99.9% 不变 = 87.5% === === ===================================================================================================================================================================================================================================================== DOM节点 ############################################################################################################################################################################################################################################################ 联合来文活动听众

#1765(主线在负载上饱和)的后续;这个问题是关于*负载后,随时间和会话次数发生的情况.

堆积所言

3GB ".heapsnapshot " (29.2M节点,1.19GB自裁大小),分析离线:

• 289k 分离的DOM节点,由系统/上下文/范围'关闭加SVGANIMATED Length'/SVGANIMATED TransformList'/SMIL TimeContaner'保留。 即用 " Repeat(-1) " 开始的、在清理过程中没有 " 终止 " 的反应性恢复式 " 的签名:司机在卸载后活着,并通过 " 使用 " 动画 样式 `, 保留未挂载子树的引用 。 在“MaskedView”+“LinearGradient”的网页上,“LinearGradient”作为“svg-mask-”渲染,因此SVG对象。
• 145k活的DOM节点和864k React `FiberNode'(QQ430k挂载元素,电流+相交),8.2M平原物体:JS堆由挂载回电树所主导,不是由同步数据所为. 一个聊天UI应该 在几千个活节点。
• 任何地方都没有绩效观察员 ' ;快照中的61克绩效动画LongAnimationFrameTiming ' 条目和208克无障碍-树木物体来自DevTools本身开放。 长期测量必须用 DevTools 关闭进行.

□ 根源和修补

A. 无限动画从未被取消在未挂载上(已删除的 DOM + CPU 绑定)

• " 状态点 " 脉冲,每行一次,同时思考/检查:1796号
• " ShimmerView " (网络上的SVG口罩):#1798
• VoiceBars ' (3个Animated.loop',没有清理,联署文件驱动器在网络上=每架有3个RAF循环)和所有`ShimerText ' 实例的共享驱动器,而不是每排1个循环:# 1811

B. 网页导航堆栈保持每次打开的聊天器挂载(活 DOM + 纤维)

• 反向导航/内幕-装订'的网页NativeStackView'使每一条路线都成为堆积而成,只将Display:noone'设定在无重点的路线上;一届会议的每一router.push'使上届SessionView'活着:其ChatList ' 管道在每条信息上持续运行,useSideChats' 运行在每个商店的O(会),每个隐藏的Agent Int ' 保持文件级paste'/t ' 收听者(每个堆成曲的作曲家都记录了已过去的图像)。 修补:在网络上通过路由名称所键入的危险 singular'(GetSingulalId(名称,params)'上的 ' true' keys,该键填入编号,这样不同的会话不会倒塌) . . . . . . .