CSHTML数据填充后如何清除JavaScript对象？解决Chrome崩溃问题

问题场景 #

我在Web应用中使用以下代码通过AJAX请求获取数据并加载CSHTML页面，但运行一段时间后谷歌浏览器会抛出"Aw, Snap!"错误。参考网上建议，需要在将对象赋值给UI控件后清除对象，恳请帮忙解答如何实现？

function Getdata() {
        try {
            $http.post(RootURL + 'mycontroller/GetDetails').then(function (response) {
                //Reload Error page          
                if (response.data.iserror) {
                    // load error
                }
                else {
                    if (response.data != undefined) {
                        $scope.dataList= [];
                        $scope.dataList= response.data.result;
                    }
                }
            }).catch(function () {
                onComplete();
            });
        }
        catch (e) {
// UI catch e
        }
    }

解决方案 #

1. 清除原始响应对象引用 #

将数据赋值给$scope.dataList后，直接把响应中的原始大对象置为null，切断引用，让JS垃圾回收器可以回收这块内存：

else {
    if (response.data != undefined) {
        $scope.dataList = [];
        $scope.dataList = response.data.result;
        // 清除原始响应对象，释放内存
        response.data.result = null;
    }
}

2. 优化数据赋值逻辑（切断引用） #

如果response.data.result是数组，通过浅拷贝的方式赋值给$scope.dataList，避免直接引用原对象，之后再清除原对象：

else {
    if (response.data != undefined) {
        $scope.dataList = [];
        // 浅拷贝数组元素，切断与原对象的引用
        $scope.dataList = [...response.data.result];
        // 清除原对象
        response.data.result = null;
    }
}

如果是复杂嵌套对象，可根据实际情况使用深拷贝（注意深拷贝会有性能开销，需权衡）。

3. 页面销毁时清理$scope引用 #

在控制器销毁或页面切换时，手动清除$scope.dataList的引用，避免内存泄漏：

// 监听控制器销毁事件
$scope.$on('$destroy', function() {
    $scope.dataList = null;
});

4. 手动触发垃圾回收（仅调试用） #

Chrome支持手动触发垃圾回收，但需要启动浏览器时添加--js-flags="--expose-gc"参数，生产环境不建议使用：

// 赋值完成后添加
if (window.gc) {
    window.gc();
}

额外建议 #

• 检查Getdata是否被频繁调用，若存在这种情况，添加防抖/节流逻辑，避免短时间内大量请求导致内存堆积。
• 使用Chrome开发者工具的Memory面板录制内存快照，排查内存泄漏的具体对象，精准定位问题根源。

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