Question

我有一个主网页，里面有一个容器div。每次用户单击主页面的菜单元素时，其子div都会加载一个HTML页面，其中包含对JavaScript库的引用以及根据所需功能的一些表单元素：

function loadGame(idGame) {

    var nom = "";

    switch (parseInt(idGame, 10)) {
        case 7:
            nom = "g7/game7.html"
            break;
        case 2:
            nom = "g2/game2.html"
            break;
        case 6:
            nom = "g6/game6.html"
            break;
        case 8:
            nom = "g8/game8.html"
            break;
        case 4:
            nom = "g4/game4.html"
            break;
        case 9:
            nom = "g9/game9.html"
            break;
    }

    $.ajax({
            type: "GET",
            url: nom,
            dataType: "html",
            cache: false,
            success: function (data) {                
                $('#divPag').empty();
                $('#divPag').html(data);
            } ,
            error: function (jqXHR, exception) {
                //alert('exception: ' + exception + '|' + jqXHR.responseText);
            }
    });    

}

发生如果用户点击不同菜单元素的次数太多，整个页面开始变得越来越慢，因为内存变得臃肿，就像Chrome任务管理器报告的那样（例如达到100 000 KB）。

我认为$('#divPag').empty();会安全地删除子节点及其先前设置的事件处理程序以避免这种情况，但显然不是。

有没有办法有效地做到这一点？感谢您对此问题的见解。

Answer 1

按10次，将调用10个ajax调用，（记住ajax调用异步））），所以阻止ui，直到调用完成，或者在新按下菜单按钮后终止所有当前调用。让你调用ajax global，然后在发送新的之前调用.abort（）。

Answer 2

在收到建议和一些附加阅读之后，我改变了我如何加载每个游戏页面的方法。

现在，当用户点击某个游戏链接时，我会重新加载整个页面，在URL上添加一个带有idGame的查询字符串参数，然后我通过JavaScript获取它并通过{{1来调用function loadGame(idGame)之后我还将我的游戏链接连接到重新加载整个页面的函数，并在其上添加新参数。

这样我就不需要重新排列脚本对主页的引用，也不需要处理整个代码来优化它，并释放对变量，对象和脚本的引用，让JavaScript垃圾收集器对它们起作用。由于这些库只是在每个页面重新加载后加载一次，所以之前发生的一切都将从内存中消失。

为了模拟平滑度，我现在正在预加载图像，我也隐藏了容器div内容，直到整个游戏加载完毕。

再次感谢别人。

通过Javascript重复更新DOM后网页变慢

2 个答案: