Chrome v129垃圾回收器(GC)未清理无用节点问题求助

问题概述 #

Chrome v129版本出现垃圾回收器（GC）无法清理已移除DOM节点的异常：

• 动态添加的Bootstrap组件（offcanvas、dropdown）在调用empty()移除节点后，仍有大量detached节点残留
• 手动移除JS引用、调用Bootstrap官方的dispose()方法均无法解决
• 旧版本Chrome无此问题，当前MS Edge表现正常，但后续版本可能跟进该问题

测试代码 #

function writeHtml() {
    var dynamicDiv = $('#dynamicDiv');
    var selectHtml = `
        <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
            Link with href
        </a>
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
            Button with data-bs-target
        </button>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <div>
                    Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
                </div>
                <div class="dropdown mt-3">
                    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                        Dropdown button
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </div>
            </div>
        </div>
    `;
    dynamicDiv.append(selectHtml);
}

function destroy() {
    disposeBootstrapComponents();
    $('#dynamicDiv').empty();

    /* 尝试过以下方法，无效
    var $dynamicDiv = $('#dynamicDiv');
    $dynamicDiv.empty();

    var $clonedDiv = $dynamicDiv.clone(false);
    $dynamicDiv.replaceWith($clonedDiv);
    dynamicDiv = null;
    clonedDiv = null;
    */
}
 
function disposeBootstrapComponents() {
    $('[data-bs-toggle="dropdown"]').dropdown('dispose');
    $('.offcanvas').offcanvas('dispose');
}

$(document).on('click', '#addButton', writeHtml);
$(document).on('click', '#destroyButton', destroy);

可能原因分析 #

1. Chrome v129的V8引擎GC行为变更：V8对DOM节点的引用追踪逻辑可能调整，导致某些隐式引用未被正确识别为可回收
2. Bootstrap组件清理不彻底：即使调用dispose()，组件可能仍在内部保留对DOM节点的缓存引用（比如事件监听器、数据存储）
3. GC延迟回收策略：Chrome可能调整了GC触发时机，并非不清理，而是延迟回收，需要手动触发验证
4. 全局事件委托的间接引用：虽然事件绑定在document上，但某些情况下事件处理逻辑可能间接持有节点引用（概率较低）

解决方案建议 #

1. 强化组件清理逻辑 #

在调用dispose()后，额外清理元素绑定的事件和数据：

function disposeBootstrapComponents() {
    // 清理dropdown
    const dropdowns = $('[data-bs-toggle="dropdown"]');
    dropdowns.dropdown('dispose');
    dropdowns.off(); // 移除所有绑定事件
    dropdowns.removeData('bs.dropdown'); // 清除Bootstrap存储的数据

    // 清理offcanvas
    const offcanvases = $('.offcanvas');
    offcanvases.offcanvas('dispose');
    offcanvases.off();
    offcanvases.removeData('bs.offcanvas');
}

2. 更彻底的DOM移除方式 #

替换empty()为更彻底的移除逻辑，确保节点完全脱离文档流并解绑所有关联：

function destroy() {
    disposeBootstrapComponents();
    // 先解绑子元素所有事件，再移除
    $('#dynamicDiv').children().off().remove();
}

3. 验证GC是否真的无法回收 #

打开Chrome DevTools的Memory面板：

• 点击Collect garbage按钮强制触发GC，查看detached节点是否被回收
• 若强制GC后节点被回收，说明是延迟回收策略导致，无需额外处理；若仍残留，则确认为GC异常

4. 排查全局引用 #

检查代码中是否存在全局变量意外持有DOM节点引用，比如：

• 避免将动态创建的节点存储在全局作用域
• 确保所有局部变量在使用后被正确置空（如dynamicDiv = null）

5. 跟踪官方修复进度 #

确认是否为浏览器bug，若为bug可等待官方推送修复版本，或临时降级Chrome至v128版本规避问题

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