logo标签列表

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

htmlperformancegoogle-chromefirefoxhtml-table
3

我正在渲染一个小表格（可能有10-12个单元格），它会不断更新。

我希望它能够快速地渲染。

Chrome的渲染非常快，但是在Firefox/IE上出现了问题。有没有更快的渲染建议？

4个回答
5

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

但是为什么FF和Chrome之间会有速度差异呢？ 如果两者都很慢，我也不会在意。 - RubyDubee
5
两种浏览器之所以不同，是因为它们使用不同的渲染引擎。这也是为什么卡罗拉比法拉利慢的原因。 - jrharshath
1
正如Harshath.jr所提到的，有些引擎比其他引擎更快。然而，一般来说，如果您要修改页面的DOM，则最好尽可能少地进行更改（也就是说，首先创建标签/HTML，然后在一行中插入所有更改）。例如，如果您逐个将新的TD插入DOM中，则浏览器可能会每次尝试重新布局整个页面，而一次性插入整个表格应该只会导致一次重新布局。@Pradyumna - salgiza
我认为您应该使用固定表格布局并设置列宽。这样做可以加快速度，因为否则它将不断尝试重新计算列宽。 - dfmiller
1
你可以通过Chrome或Safari Dev-Tools的Timeline面板（Windows下为Ctrl-Shift-I，Mac下为Cmd-Alt-I）来查看页面上发生了什么。这些信息可能会给你关于页面脚本优化的提示。通常情况下，任何浏览器都会发生相同的事件集合。例如，如果你的JavaScript动态插入DOM节点，那么你将看到多个Layout/Paint事件。
使用Chrome的开发渠道版本可以获得更多的时间轴信息，但可能会有点不稳定。
不幸的是，我没有在FireBug中找到类似的工具，如果你知道Firefox中有类似的工具，请告诉我。
Firebug中的Net面板(http://getfirebug.com/network)执行类似的功能。 - Paul D. Waite
-1

提高渲染速度的一种方法是使用thead/tfooter标记。 这些标记需要出现在包含表格主要内容的tbody标记之前。

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

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

是的，抱歉。应该使用<tfoot>而不是<tfooter>。 - Jeepstone
1
我不认为这会改变渲染速度。你能证实这个说法吗？ - Evan Carroll
我无法验证那个Evan，但通过渲染thead和tfoot，它允许浏览器将其放置在页面上，然后填充它 - 对于分页等也很有用。 - Jeepstone
<thead>和<tfoot>本身并不会告诉浏览器表格的大小。 - Paul D. Waite
添加这些标签对速度没有任何影响。 - dfmiller
固定布局算法的好处 从上面的演示中可以清楚地看到使用 table-layout: fixed 的美学优势。但其他主要好处是性能。规范将固定算法称为“快速”算法，这是有充分理由的。浏览器在确定列的大小之前无需分析整个表格的内容；它只需要分析第一行即可。因此，结果是更快速处理表格布局。取自https://css-tricks.com/almanac/properties/t/table-layout/#article-header-id-2 - Jeepstone
-1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接