【问题标题】:Javascript, Best way to append large very large table to DOMJavascript,将大型非常大的表附加到 DOM 的最佳方法
【发布时间】:2011-12-16 16:24:35
【问题描述】:

我正在使用 JSON 和 PHP 返回一个包含 10,000 多条记录的非常大的表。

我遇到的问题是我使用 innerHTML 将该表附加到 DOM,但这有时需要 15 秒或更长时间并导致浏览器崩溃。有没有办法以某种方式优化这个?该表已经在 PHP 中预先构建为一个字符串,所以我所要做的就是附加它。

【问题讨论】:

  • 无能为力,可以尝试渲染一个惰性HTML表格,但这需要大量工作。
  • 另外,您永远不应该通过 ajax 向客户端发送 HTML。您应该发送 JSON 并让客户端构建表。
  • 该表来自 MySQL,所以我想不出在客户端上构建它。为什么通过 ajax 发送 HTML 不好?
  • 如果是 HTML 格式,发送的数据比 JSON 格式要大得多。此外,让它发送 HTML 会限制您对数据的处理方式。如果发送 JSON,您可以做的不仅仅是将其显示为表格。
  • @Ray 因为 HTML 应该由浏览器加载以呈现到 NEW 文档中。当您已经拥有一个文档时,您可以使用 DOM 方法和数据来创建新元素

标签: javascript append innerhtml


【解决方案1】:

最好的方法可能是使用带有分页功能的较小表格(我不确定是否有人真的想要滚动超过 10k 行)。

如果您坚持拥有这么大的表格,另一种方法可能是将 HTML 分解为行块(甚至与 <tbody> 元素分组),然后使用计时器将它们附加到表格中在 DOM 中。

【讨论】:

  • 我想我可以在 PHP 中将表格分成 10 个较小的部分,然后在 javascript 中设置一个计时器以间隔构建这些部分。不过我认为会有更简单的方法。
  • @Ray:具有该配置的网站导致下载了 5MB+。这可能不是你想要的。老实说,我认为您或许真的应该考虑其他一些方法。
  • 好的,谢谢你的建议。你怎么知道下载了多少?我在 HTML/Javascript 方面不太好。我安装了 firebug,但不确定它的全部功能。
  • @Ray:谷歌浏览器有一个任务管理器,可以显示每个选项卡/进程的网络使用情况。
猜你喜欢
  • 1970-01-01
  • 2012-03-25
  • 2011-04-09
  • 1970-01-01
  • 2013-12-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多