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

【问题标题】：How to improve speed of dynamic HTML table creation in Firefox?如何提高 Firefox 中动态 HTML 表格创建的速度？
【发布时间】：2017-05-17 03:02:34
【问题描述】：

我正在渲染一个不断更新的小表格（可能是 10-12 个单元格）。我希望它快点。

Chrome 的工作速度非常快，但我在 Firefox/IE 上遇到了问题。对更快的渲染有什么建议吗？

【问题讨论】：

标签： html performance google-chrome firefox html-table

【解决方案1】：

立即渲染整个表格（为表格创建完整的 HTML 并将其插入 DOM，不要在循环数据时插入单元格/行）。此外，为列生成标签应该会有所帮助（如果您为每列指定宽度，则效果会更好）。

【讨论】：

但是为什么FF和Chrome的速度会有差异呢？如果两者都很慢，我就不会在乎了
不同之处在于两种浏览器使用不同的渲染引擎。这也是卡罗拉比法拉利慢的原因。
@Pradyumna。正如 Harshath.jr 提到的，一些引擎比其他引擎更快。但是，作为一般规则，如果您要修改页面的 DOM，最好尽可能少地进行更改（即先创建标签/html，然后将所有更改插入一行）。例如，如果您一次向 DOM 中插入一个新的 TD，浏览器可能会尝试每次重新布局整个页面，而一次插入整个表格只会导致一次重新布局。
我认为您会希望使用固定的表格布局并设置列宽。这应该会加快速度，否则它将不断尝试重新计算列宽

【解决方案2】：

您可以借助 Chrome 的时间轴面板或 Safari 开发工具（Windows 的 Ctrl-Shift-I 或 Mac 的 Cmd-Alt-I）检查页面上实际发生的情况。该信息可能会为您提供页面脚本优化的提示。通常在任何浏览器中都会发生相同的事件集。例如，如果您的 javascript 动态插入 DOM 节点，那么您将看到多个 Layout/Paint 事件。

您将使用 Chrome 的 dev-channel 版本获得更多时间线信息，但它可能有点不稳定。

很遗憾，我在 FireBug 中没有找到这样的工具，如果您知道类似 Firefox 的内容，请告诉我。

【讨论】：

The Net panel in Firebug 执行类似的功能。

【解决方案3】：

我认为与问题非常相关（虽然有点间接）的有趣文章：http://www.hotdesign.com/seybold/

我是从我自己的question 的回答中得到的：

【讨论】：

【解决方案4】：

改善呈现的一种方法是使用 thead/tfooter 标签。这些需要出现在包含表格主要内容的 tbody 标记之前。

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

这样，浏览器在渲染它之前就知道你的表格有多大，应该加快加载速度。

【讨论】：

是的，对不起。不是
我认为这也不会改变渲染速度。您能否证实这一说法？
我无法验证 Evan，但通过渲染 thead 和 tfoot，它允许浏览器将其放置在页面上，然后填充它 - 对于分页等也很有用。
<thead> 和 <tfoot> 自己不会告诉浏览器你的表有多大。
添加这些标签不会提高速度。