Question

我创建了一个Web工具，其中一个页面包含两个（垂直）可滚动表，可以从MySQL数据库中获取数据。

由于我有很多用户在数据库上做了很多操作，我想让顶级表不断刷新，数据量巨大。我用AJAX实现了这个目标：

$('#live_refresh_station_available').load('live_refresh/devices_live/load_available.php');

我有一个包含顶级表的单独文件，我使用setInterval（）每2000毫秒加载一次。

令人惊讶的是，这在内存消耗方面效果很好，大约稳定在100MB左右。但后来我想添加一种方法来保持顶部表中的滚动位置，否则它每2000毫秒重置一次，因此用户不太友好。我发现最有效的方法是使用cookies，所以我就是这样做的：

<script>
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*10000));
        var expires = "expires="+d.toUTCString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
</script>

<script>
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1);
            if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
        }
        return "";
    }
</script>

<script>
    $(document).ready(function (event){
        var scroll = getCookie("scroll_1");
        if (scroll != "") { // If scroll value exists, keep it
            $("tbody.scrollContent").scrollTop(scroll);
        } 

        $("tbody.scrollContent").scroll(function(){
            var scroll = $("tbody.scrollContent").scrollTop();
            setCookie("scroll_1", $("tbody.scrollContent").scrollTop(), 1);
        });
    });
</script>

<script>
    $(document).ready(function (event){
        var scroll = getCookie("scroll_2");
        if (scroll != "") { // If scroll value exists, keep it
            $("tbody.scrollContent2").scrollTop(scroll);
        } 

        $("tbody.scrollContent2").scroll(function(){
            var scroll = $("tbody.scrollContent2").scrollTop();
            setCookie("scroll_2", $("tbody.scrollContent2").scrollTop(), 1);
        });
    });
</script>

Cookie会在10000毫秒后过期。我将脚本添加到我用AJAX加载的文件中，并且它们保持滚动位置就好了。

现在的问题是浏览器使用的内存（我在Chrome和Firefox上试过）一直堆积起来，直到最终选项卡崩溃。即使我切换到其他页面（因此不再加载），该特定选项卡也不会释放内存 - 这让我觉得内存泄漏有一些。

正如我前面提到的，只有当我尝试使用cookie保持滚动位置时才会发生这种情况，因此.load本身不是问题所在。关于如何解决这个问题的任何想法？

编辑：我使用Chrome开发工具创建了一个堆快照，我发现了许多HTMLTableSectionElement类型的分离节点，但我没有看到任何与cookie脚本的连接。

保持滚动位置会导致内存泄漏。为什么呢？

0 个答案: