gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 03:53:10 26 4
gpt4 key购买 nike

我是这样实现无限滚动的:

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 的“内存”?

最佳答案

我真的认为这是许多使用 AJAX 列表内容的网站的常见问题。因此,让我们以一些最流行的(认为规模 = 经验)网站及其解决方案为例:

谷歌图片

如果你 checkout images.google.com然后你搜索任何东西,例如“guiness”,你会看到一个充满结果的页面(实际上图像是 ajax 加载的,而不是 html 代码,所以页面是固定高度的)并且当你在底部滚动时有一个按钮 “Show更多结果”。这可能是您的问题之一的解决方案,但是否真的有必要在底部放置一个按钮,例如第 10 页?我真的认为它通常是页面可用性和内存泄漏的一个很好的解决方案,但它实际上不是一个必要的选项,正如我们在 :

中看到的那样

Facebook

Facebook Newsfeed 是另一回事。有一个按钮 “Show more posts”,但我真的不知道它究竟是什么时候显示的,而不是加载下一页的帖子。我曾经碰巧加载 10-15 页的帖子,仅通过滚动。你知道 Facebook 帖子包括视频、照片、AJAX 评论和更多 Javascript 花哨的东西,它们会占用大量内存。我认为他们在大量研究后成功地做到了这一点,有多少用户滚动到底部。

YouTube

Youtube 在每个页面都有“加载更多视频”,所以解决方案基本上与 Google 类似,除了 Google 呈现页面的整个 html 并且在滚动时只加载图像。

推特

Twitter 支持无限滚动。是的,他们这样做可能是因为推文有 140 个字符,他们不需要那么担心内存。毕竟谁愿意在一页加载时阅读超过 1000 页的推文。所以他们没有用于 “加载更多” 的按钮,他们也不需要。

所以有两种解决方案:

  1. 使用无限滚动(你应该考虑你加载了多少内容以及它有多丰富)
  2. 使用按钮:“加载更多”

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

现在一切都是 Javascript,而 Javascript 有 garbage collection ,因此很难卸载 DOM(如果它有 Javascript,而不是纯文本)并设法从 Javascript 中删除垃圾。这意味着您不会从浏览器中释放已卸载内容的全部分配内存。

同时考虑一下您的请求,为什么您需要再次加载您已经加载过的内容。它会花费另一个服务器请求,这意味着另一个数据库请求等等。

关于javascript - 无限滚动会导致浏览器崩溃吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10374689/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com