如何提高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表格的創建速度？

回答

相關問題