Question

我实现了无限滚动：

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的“记忆”吗？

Answer 1

我认为这是许多具有AJAX列表内容的网站的常见问题。让我们举一些最流行的（想想规模=经验）网站及其解决方案的例子：

Google图片

如果您结帐images.google.com并搜索任何内容，例如“guiness”，你会看到一个充满结果的页面（实际上图像是ajax加载的，而不是html代码，因此页面具有固定的高度），当你在底部滚动时，有一个按钮"Show more results" 。这可能是解决您的一个问题的方法，但是之后是否需要在底部放置一个按钮，例如第10页？我认为它通常是页面可用性和内存泄漏的一个很好的解决方案，但它确实不是我们可以看到的必要选项：

实

Facebook Newsfeed是另一回事。有一个按钮"Show more posts"，但我真的不知道它何时显示，而不是加载下一页的帖子。只有通过滚动才能加载10-15页的帖子。而且你知道Facebook帖子包括视频，照片，AJAX评论以及更多Javascript花哨的东西，它们占用了大量内存。我认为经过大量研究后他们已经成功实现了这一目标，有多少用户滚动到底部。

的Youtube

Youtube在每个页面都有"Load more videos"，所以解决方案基本上类似于谷歌，除了谷歌渲染页面的整个html和滚动只是加载图像。

微博

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

所以有两种解决方案：

使用无限滚动（您应该考虑加载了多少内容以及它有多丰富）
使用按钮："Load More"

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

现在一切都是Javascript，Javascript有garbage collection，所以很难卸载DOM（如果它有Javascript，而不是纯文本）并设法从Javascript中删除垃圾。这意味着您不会从浏览器中释放已卸载内容的整个分配内存。

还要考虑一下你的请求，为什么你需要重新加载一些你已经在第一时间加载的东西。它需要另一个服务器请求，这意味着另一个数据库请求等等。

Answer 2

我之前已经使用过这个，这里有一些我的想法：

a）如果您一次将数据附加到内存页面，那么这不是问题，某些浏览器可能响应不好，但只要有足够的浏览器，大多数最新的浏览器都会呈现没有任何问题在目标机器上的内存中，您可能会看到在追加页面时ram的使用情况如何增加。为此使用chrome，因为每个页面都是一个单独的进程，并且它有一个内置的任务管理器

b）关于html()的使用，它确实删除了标记但是它以高昂的代价这样做，因为它试图处理特殊条件并且有开销并且访问嵌套在容器内的所有控件你正在替换（不确定最后一拍），但它有成本。清除DOM的一种更简单的方法是使用innerHTML属性并将其设置为空，jquery执行此操作，但它位于html() api中的稍后位置。打开api并查看方法。使用innerHTML

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

同样删除页面对我来说听起来很奇怪，如果我想回到最初的评论，请不要再考虑让它成为无限卷轴...我已经尝试过并且放弃了bug的数量提出但我们有一个真正的用例，我不得不在那里粘贴一个按钮，但当用户滚动离开第一页时，这是当用户登陆第3页但现在需要查看结果时在它之上。

希望能回答你的问题并且btw infinte scrolling是你的朋友使用它，不要过度设计一个可能只由你的QA团队测试的案例。最好把你的努力花在其他地方。

Answer 3

是的，如果我可以提出一个想法，让我们说5页只删除第一页并附加新页面而不是删除所有以前的页面。祝你好运：）

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

3 个答案:

Google图片

实

的Youtube

微博