我有一个返回 JSON 的搜索，然后我将其转换为 Javascript 中的 HTML 表。它重复调用 jQuery.append() 方法，每行调用一次。我有一台现代机器，Firefox 的响应时间是可以接受的。但在 IE 8 中速度慢得令人难以忍受。
我决定将数据到 HTML 的转换移至服务器端 PHP，将返回类型从 JSON 更改为 HTML。现在，我不再重复调用 jQuery.append() 次，而是对整个表调用一次 jQuery.html() 方法。我注意到 Firefox 变得更快，但 IE 变得更慢。
这些结果是轶事，我没有做过任何基准测试，但 IE 的性能非常令人失望。我可以做些什么来加快 IE 中大量数据的操作速度，还是使用 AJAX/Javascript 一次处理大量数据只是一个坏主意？
正如其他人提到的，过度的 DOM 操作会降低性能。使用前面提到的 Array.join('') 创建 HTML 字符串并使用 jQuery.html() 方法设置容器的 innerHTML 速度要快几个数量级。小心使用 jQuery.append(html) - 这相当于先创建所有 DOM 节点，然后插入它们！
事实是，即使您优化了页面节点树的创建，对于非常大的数据集，您仍然会很快达到上限。浏览器无法处理如此大且复杂的 DOM 树。即使您使用事件委托，您首先会看到交互（动画、处理程序等）变慢。如果您的数据集确实很大，您将需要进行某种虚拟化以仅显示视口中可见的内容（这就是 SlickGrid 的作用 -http://github.com/mleibman/slickgrid http://github.com/mleibman/slickgrid).
或者，您可以通过对 DOM 添加进行分块并在超时时依次执行它们并在中间暂停一些来让浏览器处理用户事件，从而提高页面的响应能力和“交互时间”。
其他技术包括渲染第一页的数据、为更多数据分配空间，但仅在用户开始滚动时才渲染它。这就是 Facebook 所做的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
