如何提高Firefox中动态HTML表格的创建速度？

我正在渲染一个小桌子（可能是10-12个单元格），它会不断更新。我希望它很快。如何提高Firefox中动态HTML表格的创建速度？

Chrome的工作速度非常快，但我在Firefox/IE上遇到问题。有关更快呈现的任何建议？

来源

2010-01-04 RubyDubee

渲染全表一次（创建完整HTML表，并将其插入到DOM，同时通过数据循环不插入细胞/行）。此外，为列生成标签应该有所帮助（如果为每列指定宽度，则更多）。

来源

2010-01-04 08:11:22 salgiza

但为什么FF和Chrome之间的速度有所不同？我不会给一个该死的，如果两者都很慢 – RubyDubee 2010-01-04 08:34:00

的区别是因为两个浏览器使用不同的渲染引擎。这也是卡罗拉比法拉利慢的原因。 – jrharshath 2010-01-04 08:36:47

@Pradyumna。正如Harshath.jr所提到的，一些引擎比其他引擎更快。但是，一般来说，如果要修改页面的DOM，最好尽可能少地进行更改（即首先创建tags/html，然后在一行中插入所有更改）。例如，如果您一次插入一个新的TD到DOM中，浏览器可能会尝试每次重新布局整个页面，而一次插入整个表格应导致只有一个重新布局。 – salgiza 2010-01-04 09:07:14

有趣acticle，我认为可能是非常相关的（虽然有点间接）的问题：http://www.hotdesign.com/seybold/

我是从一个答案，我自己question：提高渲染

来源

2010-01-04 08:13:50

一种方法是使用thead/tfooter标签。这些需要发生在包含表格主要内容的tbody标签之前。

<table> 
<thead></thead> 
<tfoot></tfoot> 
<tbody></tbody> 
</table>

这样，浏览器就知道你的表在呈现它之前有多大，这应该会加速加载。

来源

2010-01-04 11:38:10 Jeepstone

我认为你的意思是“tfoot”。 – 2010-01-05 14:35:11

对，对不起。不是 – Jeepstone 2010-01-08 15:55:51

我不认为这会改变渲染的速度。你能证实这种说法吗？ – 2010-04-05 20:46:44

您可以查看到底发生了什么的页面上Chrome或Safari开发工具（按Ctrl-Shift-I键（Windows）或Cmd的-ALT-I适用于Mac）的时间线面板的帮助。该信息可能会为您提供页面脚本优化技巧。通常在任何浏览器中都会发生相同的事件。例如，如果您的JavaScript动态插入DOM节点，那么您将看到多个Layout/Paint事件。

您将通过Chrome的开发通道版本获得更多时间线信息，但它可能会有点不稳定。

不幸的是我没有在FireBug中找到这样的工具，如果你知道类似Firefox的东西，请告诉我。

来源

2010-04-12 17:35:36 loislo

[Firebug中的Net面板]（http://getfirebug.com/network）执行类似的功能。 – 2010-10-25 14:37:08

如何提高Firefox中动态HTML表格的创建速度？

回答

相关问题