logo标签列表

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

javascriptjquerybrowsercrash
10

我这样实现了无限滚动：

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);

    }
});
当用户接近页面底部（剩余200像素）时，将调用函数get_page()。该函数包含一个ajax调用，获取新页面的所有内容，并将其追加到文档的<body>中。
现在我意识到，如果我的网站变得很大，而不是有10个小页面，而是有数十亿个巨大页面，那么如果用户坚持无限滚动很长时间，他们的浏览器可能会崩溃。
这是否是解决此问题的可能解决方案：
我将继续将新页面附加到文档的<body>中，直到第10页之后，我将完全替换<body>内容，而不是追加。因此使用html()而不是append()。
我不知道这是否真的可以防止崩溃。 .html()会清除通过ajax引入的先前HTML的"内存"吗？
3个回答
6
我真的认为这是许多具有AJAX列表内容的网站的常见问题。因此，让我们以一些最受欢迎（体验=规模）的网站及其解决方案为例：

谷歌图片

如果您查看images.google.com并搜索任何内容，例如“guiness”，您将看到一个充满结果的页面（实际上图像是通过ajax加载的，而不是html代码，因此页面高度固定），当您向下滚动时，会出现一个按钮"显示更多结果"。这可能是解决您问题的第一种方法，但在第10页之后放置一个按钮是否真的有必要？我真的认为它通常是页面可用性和内存泄漏的好解决方案，但它确实不是必要的选项，正如我们在以下内容中所看到的：

Facebook

Facebook的新闻动态是另一回事。有一个名为“显示更多帖子”的按钮，但我真的不知道它何时会出现而不是加载下一页的帖子。我曾经通过滚动加载了10-15页的帖子。你知道，Facebook的帖子包括视频、照片、AJAX评论和许多更多的JavaScript花哨的东西，这需要大量的内存。我认为他们在进行了大量研究之后才成功实现了这一点，了解了多少用户滚动到底部。
YouTube每个页面都有“加载更多视频”按钮，因此解决方案与Google基本相似，只是Google渲染整个页面的HTML，在滚动时只加载图像。
Twitter支持无限滚动。是的，他们这样做可能是因为推文只有140个字符，他们不需要太担心内存问题。毕竟，谁愿意在一次页面加载中阅读超过1000页的推文呢？所以他们没有“加载更多”的按钮，也不需要一个。
所以有两种解决方案：
  1. 使用无限滚动（您应该考虑加载多少内容以及内容的丰富程度）
  2. 使用按钮："加载更多"

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

现在所有东西都是JavaScript，而JavaScript有垃圾回收，因此很难卸载DOM（如果它具有JavaScript而不是纯文本）并设法从JavaScript中删除垃圾。这意味着您不会释放浏览器中未加载内容的整个分配内存。

还要考虑请求，为什么需要再次加载已经加载过的内容。这将导致另一个服务器请求，意味着另一个数据库请求等等。

1

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

a) 如果您一次向内存页面附加数据，则不是问题，某些浏览器可能会响应不佳，但大多数最新的浏览器只要目标机器上有足够的内存，就可以呈现而不会出现任何问题，您可以看到随着您附加页面，内存使用量如何增加。在此过程中使用Chrome，因为每个页面都是单独的进程，并且它具有内置任务管理器

b) 关于使用html()，它确实会删除标记，但它会以巨大的代价来处理特殊条件，并且具有开销并访问您要替换的容器中嵌套的所有控件（不确定最后一个部分），但它是有成本的。清除DOM的更简单方法是使用innerHTML属性并将其设置为空，jQuery也是这样做的，但是它是在html() api的较后阶段。打开api并查看该方法。 使用innerHTML

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

对我来说，删除页面也听起来很奇怪，如果我想回到最初的评论，而且请不要考虑将其变成无限滚动...我尝试过并放弃了，因为出现了许多错误，但我们确实有一个真正的用例需要它，所以我不得不在那里放置一个按钮，但这不是当用户从第一页滚动时，而是当用户着陆在第三页但现在需要查看其上方的结果。

希望这回答了你的问题，顺便说一句，无限滚动是你的好朋友，请使用它，不要过度设计可能只由您的QA团队测试的情况。最好将精力花在其他地方。

html（）会表现出这种行为，因为在将节点从DOM中移除之前未能删除事件处理程序会导致内存泄漏。如果要绕过此问题，请跟踪自己的事件处理程序并在触摸innerHTML之前清除它们。 - eyelidlessness
@eyelidlessness 是的，你说得对。但是你能否指引我到一个资源，让我可以阅读一些关于这方面的例子呢？ - Baz1nga
-1

如果我可以提个建议的话，当你翻到第五页后，可以删除第一页并添加新的页面，而不是删除所有之前的页面。祝好运 :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接