无限滚动会导致浏览器崩溃吗?

Will infinite scroll cause browser crashes?

本文关键字：崩溃 浏览器 滚动 无限      更新时间：2023-09-26

我像这样实现了无限滚动：

new_page_value = 1;
$(window).scroll(function() {
    if($(window).scrollTop() >= $(document).height() - $(window).height() - 200) {
        new_page_value = parseInt(new_page_value) + 1;
        get_page(new_page_value);
    }
});

当用户几乎到达页面底部(左侧 200px(时，将调用函数get_page()。这包含一个 ajax 调用，该调用获取新页面的所有内容并将其追加到文档的<body>。

现在我刚刚意识到，如果我的网站变大了，而不是有 10 个小页面，我有无数个巨大的页面，那么如果用户的浏览器足够持久以长时间保持无限滚动，则用户的浏览器可能会崩溃。

这是解决此问题的可能方法吗：

我将继续将新页面附加到文档<body>直到第 10 页，之后我将完全替换<body>内容而不是追加。所以使用html()而不是append().

我只是不知道这是否真的可以防止崩溃。.html()会清除通过 ajax 引入的先前 html 的"内存"吗？

我真的认为这是许多具有AJAX列表内容的站点的常见问题。因此，让我们以一些最流行的(考虑规模=体验(网站及其解决方案为例：

谷歌图片

如果您签出 images.google.com 并搜索任何内容，例如"guiness"，您将看到一个充满结果的页面(实际上图像是 ajax 加载的，而不是 html 代码，因此页面具有固定高度(，当您在底部滚动时，有一个按钮"Show more results"。这可能是您的问题之一，但是真的有必要在底部放置一个按钮吗，例如第 10 页？我真的认为它通常是页面可用性和内存泄漏的良好解决方案，但它实际上不是一个必要的选项，正如我们在中看到的那样：

脸书

Facebook Newsfeed是另一回事。有一个按钮"Show more posts"，但我真的不知道它何时显示而不是加载下一页帖子。我曾经遇到过加载 10-15 页帖子的情况，只能通过滚动。你知道Facebook的帖子包括视频，照片，AJAX评论和更多Javascript花哨的东西，这些东西需要大量的内存。我认为经过大量研究，他们已经设法做到了这一点，有多少用户滚动到底部。

优酷

Youtube在每个页面上都有"Load more videos"，因此解决方案基本上与Google相似，除了Google呈现页面的整个html并且滚动时仅加载图像。

唽

Twitter支持无限滚动。是的，他们这样做可能是因为推文是 140 个字符，他们不需要太担心内存。毕竟谁愿意在一个页面加载中阅读超过 1000 页的推文。所以他们没有"load more"按钮，也不需要按钮。

所以有两种解决方案：

  1. 使用无限滚动(你应该考虑你加载了多少内容以及它有多丰富(
  2. 使用按钮 ： "Load More"

最重要的是，您不应该删除列表中已加载的内容。

如今一切都是Javascript，Javascript有垃圾回收，所以卸载DOM(如果它有Javascript，而不是纯文本(并设法从Javascript中删除垃圾是非常困难的。这意味着您不会从浏览器中释放已卸载内容的全部已分配内存。

还要考虑您的请求，为什么您需要再次加载您已经首先加载的东西。它花费另一个服务器请求，即另一个数据库请求，依此类推。

我以前用过这个，以下是我的一些想法：

a( 如果您一次将数据附加到内存页面，那么这不是问题，某些浏览器可能无法很好地响应，但只要目标计算机上有足够的内存，大多数最新的浏览器都会毫无问题地呈现，您可能会看到 ram 使用率如何随着您附加页面而增加。为此使用chrome，因为每个页面都是一个单独的进程，并且具有内置的任务管理器

b( 关于 html() 的使用，它确实删除了标记，但它这样做的成本很高，因为它试图处理特殊条件并具有开销并访问嵌套在您要替换的容器中的所有控件(不确定最后一个 pat(，但它有成本。清除 DOM 的一种更简单的方法是使用 innerHTML 属性并将其设置为空，jquery 会这样做，但它在 html() API 中的稍后时间点。打开 API 并查看方法。使用innerHTML

$("<selector>")[0].innerHTML=""

此外，作为用户，删除页面对我来说听起来很奇怪，如果我想回到最初的评论，请不要考虑让它也成为无限滚动器。在提出许多错误后，我已经尝试并放弃了，但我们有一个真正的用例，我不得不在那里贴一个按钮，但这不是当用户从第一页滚动离开时，这是当用户登陆第 3 页时，但现在需要查看它上面的结果。

希望能回答您的问题，顺便说一句，无限滚动是您的朋友使用它，不要过度设计可能只会由您的 QA 团队测试的案例。最好把精力花在别的地方。

是的，它会的，如果我在假设 5 页之后提出一个想法，只需删除第一页并附加新页面，而不是删除所有以前的页面。 祝你好运:)

相关文章：