渲染新bootstrap tooltips后是否需销毁旧数组以节省浏览器内存？

问题解答 #

需要清理旧的tooltip实例，但是你给出的清理代码写法不正确，无法达到释放内存的效果。

原因说明

• 你写的delete tooltip逻辑无效：delete操作符仅用于删除对象的属性，无法直接销毁类实例，也不会解除实例持有的DOM引用、解绑事件监听，这部分占用的内存依然不会被垃圾回收机制回收。
• 旧tooltip实例确实需要主动清理：Bootstrap的Tooltip实例会持有对应触发元素的DOM引用、还会绑定元素级事件监听，哪怕你已经清空了搜索容器的DOM，只要tooltips数组还持有旧实例的引用，这部分内存就无法被释放，多次重复搜索后会积累形成内存泄漏。

正确实现代码

调用Bootstrap Tooltip原生提供的dispose()方法销毁实例，再重置tooltips数组即可：

let searchAndDisplayResults = (function () {
    let tooltips;
    return (key) => {
        // 先销毁旧的tooltip实例
        if (tooltips?.length) {
            tooltips.forEach(tooltip => tooltip.dispose());
            tooltips = null;
        }
        // 搜索结果容器
        let searchContainer = $('.search-results-container');
        // 清空旧内容
        searchContainer.html('');
        // 获取搜索结果信息数组
        let searchedResultsArray = getSearchedResults(key);
        // 渲染搜索结果到页面
        searchedResultsArray.forEach((ele) => {
              searchContainer.append(`<div>${ele}</div><i class='bi-plus' data-bs-toggle="tooltip" title="该按钮的提示信息"></i>`);
        })
        // 初始化新的tooltip
        tooltips = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')).map(tooltipTriggerEl => { return new bootstrap.Tooltip(tooltipTriggerEl) });
    }
})();

dispose()方法会自动解绑所有事件监听、清除内部持有的DOM引用，执行之后旧实例就可以被浏览器垃圾回收机制正常回收，不会产生内存残留。

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