以json或html文件加载数据是否更快？

Question

The title phrases it badly so here's a longer description :

I have an application that exports data in html format. ( 500 rows, 20 columns) It looks terrible with lots of useless columns.

I want to use something like datatables to make a more usable table, ie paging/sorting/filtering/hiding columns

The option I'm trying first is to insert the table from the exported html file using the .load() function from jquery. Then I loop through the table deleting/modifying columns.

This seems very slow (I suspect my looping and searching) so I'm looking for improvements.

One idea is to pre-convert my exported html file to json (using notepad++ macros or something like that) and then build the table that I want from that json file.

Any opinions on whether I can expect a large performace boost, or potential problems to look out for ?

Many thanks / Colm

Answer 1

JSON should be faster, when its loaded its ready to go without all of the text parsing you would need to do with a text file. Lots of other jquery addons available to make it easy for you once it is in JSON.

Answer 2

I think this is not about which loads data faster but which solution is better for your problem. Datatables is very flexible and you can load from different sources. Take a look at the "Data Sources" and "Server side processing" in the examples: http://datatables.net/examples/

Datatables uses mostly JSON format. To process your data need to find the best approach; convert your exported html file, process the file with javascript to convert data (jquery can help you here), etc..

Answer 3

This page gives some real world examples of loading data in json vs data in a html table. Fairly conclusive, see the post from sd_zuo on July 2010, a fourfold increase in speed loading from json and then just building the table that you want to display.

Granted the page deals specifically with the slowness of the innerHtml function in IE8 but I think I'll give it a go in json and see how it compares across a couple of browsers.

PS This page gives good advice on fast creation of html using raw javascript and then only using jquery to insert one full row at a time