通過Java反復更新DOM后，網頁變慢

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 Task Manager報告的內容（例如達到100 000 KB）。

我以為$('#divPag').empty(); 會安全地刪除子節點及其先前設置的事件處理程序，以避免發生這種情況，但顯然並非如此。

有沒有辦法有效地做到這一點？ 感謝您對這個問題的見解。

Answer 1

按下10次，將調用10個ajax調用，（記住ajax調用是異步的））），因此可以阻塞ui直到調用結束，或者在再次按下菜單按鈕后殺死所有當前調用。 使ajax調用global，然后在發送新ajax之前調用.abort（）。

Answer 2

在收到建議和一些額外的閱讀之后，我改變了如何加載每個游戲頁面的方法。

現在，當用戶單擊某個游戲鏈接時，我將重新加載整個頁面，並在URL上添加帶有idGame的querystring參數，然后通過JavaScript獲得該參數，然后通過$(document).ready調用function loadGame(idGame) 。之后，我還將游戲鏈接連接到該函數，該函數將使用新參數重新加載整個頁面。

這樣，我不需要重新排列對主頁的腳本引用，也不需要解決整個代碼來對其進行優化，也不需要釋放對變量，對象和腳本的引用，以使JavaScript垃圾收集器對其執行操作。 由於庫在每個頁面重新加載后才加載一次，因此之前發生的所有事情都會從內存中清除。

為了模擬平滑度，我現在預加載圖像，並且還隱藏容器div內容，直到加載整個游戲。

再次感謝大家。