Android手机Chrome打开单个父元素下含大量<span>的页面崩溃如何解决

• 核心触发点是Android 12系统下Chrome（对应版本区间为Chrome 92~Chrome 112）Blink渲染引擎的已知缺陷：Android 12收紧了第三方应用渲染进程的原生栈空间分配，从旧版本的1MB压缩到384KB，当同一父元素下存在数千个<span>这类内联元素时，渲染引擎在做分层计算、命中测试区域预计算的递归遍历流程中，会直接打满栈空间触发进程崩溃，这类崩溃属于栈溢出，不是常规的内存不足OOM，所以不会有内存告警前兆，打开页面就直接闪退。
• 阈值特征：如果这些<span>带有独立样式、单独绑定了事件监听，每个元素会生成独立的LayoutObject节点，同层节点数超过1400时在对应环境下崩溃概率超过90%，桌面版Chrome、Android 11及更低版本的Chrome因为栈空间更充足，不会触发该问题。

• 最优方案：采用虚拟滚动分片加载，不要一次性把全量数千个<span>插入DOM树。仅保留视口范围及上下200px缓冲区域内的节点，其余区域用空容器撑高对应高度，滚动时动态替换可视区节点，把同层实时渲染的节点数控制在500以内，既能彻底规避崩溃，还能大幅提升首屏加载和滚动流畅度。
• 无侵入DOM结构调整方案：如果必须一次性渲染全量内容，不要把所有<span>放在同一个直接父节点下，按每300个<span>为一组，外层套一层设置了display: contents的块级容器做分组。该属性不会生成额外的渲染盒，不会破坏原有文本排版效果，但会打断LayoutObject树的递归遍历深度，把单次递归深度从数千级降到300以内，避开栈溢出阈值。
• CSS快速规避方案：给承载所有<span>的父元素添加contain: layout paint属性，告知浏览器该元素子树的布局、绘制和页面其他部分完全独立，渲染引擎会为该子树创建独立分层上下文，同时会改用迭代逻辑替代递归做子节点遍历命中测试，实测在问题版本Chrome上可规避90%以上的崩溃场景。
• 临时兼容方案：如果短时间内无法调整结构，可将相邻无样式差异、无独立事件绑定的<span>做合并，把总节点数降到1000以内，也能基本避免崩溃触发。

内容的提问来源于stack exchange，提问作者ShayDavidson