在创建太多DOM之后页面挂起

Question

我目前正在进行一些异步ajax调用，并根据返回的数据在表中创建行。如果行大约为400-500，则在此dom创建之后页面会挂起。例如。如果我点击任何文本框或下拉列表，它会永远停滞不前。如果行大约是100-200然后我点击任何文本框，它仍然很慢，但至少它不会卡住。

所以，我认为问题是有太多的dom要创建，这会导致浏览器或页面或其他问题。

您是否有任何想法或任何解决方案来改善这种表现？

Answer 1

您需要以某种方式lazy load您的数据。在Twitter，Facebook和其他网站上注意到，当你滚动到页面底部时，它会开始从服务器加载更多记录吗？好的应用程序将开始垃圾收集已经滚动的旧记录。

当您滚动浏览Facebook新闻Feed时，它不会同时将自2007年以来的所有朋友发布到浏览器中。一旦DOM中存在最大数量的帖子，Facebook将开始删除您向上滚动的最旧帖子以腾出更多空间并从服务器获取新帖子，以便您可以继续滚动。您甚至可以在向下滚动时看到浏览器滚动条跳过，因为有更多帖子被添加到DOM中。

没有浏览器能够处理那么多数据。您将不得不坐下来想一个向用户显示数据的更好方法。只有你会知道你的用户真正想要的体验，但无论你有什么必要减少你在页面上包含的元素数量。

示例：

注意浏览器滚动条在到达底部时会如何跳跃。 Twitter到底，然后加载更多数据滚动。如果我滚动得足够远，它最终会开始清理页面顶部的数据。

最简单的解决方案可能是您使用ajax请求传递页码并让服务器仅返回该页数据的结果。