[jQuery] Re: Very slow find
Thanks very much, this way it takes 2 seconds (with load and rendering),
what is better I was expecting
On this project, I totally ignore IE (I am using some newer technologies
available only in "normal" browsers), it is not a common website but a
web-based application for a specific group of users.
Martin
On Tue, 24 Mar 2009 18:29:33 +0100, Michael Geary wrote:
From: Martin Tiršel
I need to hold some things in memory for later use, so pure
html is not ideal. I will try JSON, if it will be under 5-7
seconds for 500 items, it should be ok.
In fact, you can get it much faster than that, even in IE.
Let's assume your JSON data is an exact mirror of the XML:
{
"pages": [
{
"name": "the name",
"id": 5,
"url": "http://example.com/";,
"author": {
"id": 7,
"name": "the author"
},
"languages": [
"sk",
"cz"
]
},
{
// another page
},
{
// ...
}
]
}
and assume you have a reference to this data in a variable called "json".
You can write:
$("#content_window_pages").append( makeTable(json.pages) );
function makeTable( pages ) {
var html = [], h = -1;
html[++h] = '';
html[++h] = '';
html[++h] = 'Name';
html[++h] = 'Author';
html[++h] = 'Languages';
html[++h] = 'Actions';
html[++h] = '';
html[++h] = '';
for( var page, i = -1; page = pages[++i]; ) {
html[++h] = '';
html[++h] = page.name;
html[++h] = '';
html[++h] = page.author.name;
html[++h] = '';
html[++h] = page.languages.join();
html[++h] = ' ';
}
html[++h] = '';
html[++h] = '';
return html.join('');
}
I think you will be very pleased with the speed of this code. And it's
much
simpler than the XML version too. The html[++h] = business is a bit ugly,
but it's by far the fastest way to build up a long string in IE, and
since
IE is both the most widespread browser and the slowest at this, it's the
one
you need to worry about.
I broke up the section into multiple html[++h] = assignments
just to
keep the line length short in this message, but you could combine those
into
one as in your original code if you prefer. It's not performance
critical so
it's just a matter of taste. For the code *inside* the inner loop I
combined
assignments as much as possible, as in the last line of the inner loop.
-Mike
[jQuery] Re: Very slow find
> From: Martin Tiršel
> I need to hold some things in memory for later use, so pure
> html is not ideal. I will try JSON, if it will be under 5-7
> seconds for 500 items, it should be ok.
In fact, you can get it much faster than that, even in IE.
Let's assume your JSON data is an exact mirror of the XML:
{
"pages": [
{
"name": "the name",
"id": 5,
"url": "http://example.com/";,
"author": {
"id": 7,
"name": "the author"
},
"languages": [
"sk",
"cz"
]
},
{
// another page
},
{
// ...
}
]
}
and assume you have a reference to this data in a variable called "json".
You can write:
$("#content_window_pages").append( makeTable(json.pages) );
function makeTable( pages ) {
var html = [], h = -1;
html[++h] = '';
html[++h] = '';
html[++h] = 'Name';
html[++h] = 'Author';
html[++h] = 'Languages';
html[++h] = 'Actions';
html[++h] = '';
html[++h] = '';
for( var page, i = -1; page = pages[++i]; ) {
html[++h] = '';
html[++h] = page.name;
html[++h] = '';
html[++h] = page.author.name;
html[++h] = '';
html[++h] = page.languages.join();
html[++h] = ' ';
}
html[++h] = '';
html[++h] = '';
return html.join('');
}
I think you will be very pleased with the speed of this code. And it's much
simpler than the XML version too. The html[++h] = business is a bit ugly,
but it's by far the fastest way to build up a long string in IE, and since
IE is both the most widespread browser and the slowest at this, it's the one
you need to worry about.
I broke up the section into multiple html[++h] = assignments just to
keep the line length short in this message, but you could combine those into
one as in your original code if you prefer. It's not performance critical so
it's just a matter of taste. For the code *inside* the inner loop I combined
assignments as much as possible, as in the last line of the inner loop.
-Mike
[jQuery] Re: Very slow find
I need to hold some things in memory for later use, so pure html is not
ideal. I will try JSON, if it will be under 5-7 seconds for 500 items, it
should be ok.
Thanks
On Tue, 24 Mar 2009 06:01:33 +0100, Michael Geary wrote:
If you are free to change the XML format, are you free to change it
completely?
Could you change it to HTML instead, and format the HTML in the same way
that you are doing in JavaScript now? Then you could simply use
$('#content_window_pages').load(...); and it would be very fast.
Or you could use JSON instead of XML and speed it up a lot, but HTML
would
be by far the fastest.
Is either of those changes - to HTML or JSON - feasible? XML is the worst
choice for this kind of operation.
-Mike
--
Martin Tiršel
[jQuery] Re: Very slow find
If you are free to change the XML format, are you free to change it
completely?
Could you change it to HTML instead, and format the HTML in the same way
that you are doing in JavaScript now? Then you could simply use
$('#content_window_pages').load(...); and it would be very fast.
Or you could use JSON instead of XML and speed it up a lot, but HTML would
be by far the fastest.
Is either of those changes - to HTML or JSON - feasible? XML is the worst
choice for this kind of operation.
-Mike
> From: Martin Tiršel
>
> Hello,
>
> I get XML answer from server with ~5k lines and I need to
> parse this data into the table and display in HTML. I wrote a
> script to do this job, but it takes too much time to complete
> (~35 seconds in opera), what is not I want. Is there a way to
> improve this script? Perhaps there is more effective way to do this.
>
> XML looks like:
>
>
>
>
>ebapylibnfwxorjwoeseksnyqumdmxssaduy
>5
>ojosjkfujggkildmlr
>
> 7
> b
>
>
>sk
>cz
>
>
> ... 500x similar as above
>
>
> JS:
>
> ...
> var table = ' class="pagelist">NameAuthorLa
> nguagesActions';
>
> $(xml).find("page").each(function(i) {
>var name = $(this).find("name").text();
>var author = $(this).find("author name").text();
>var languages = new Array();
>$(this).find("languages lang").each(function() {
> languages.push($(this).text());
>});
>languages = languages.join(',');
>table += '' + name + ' class="second">' + author + '' +
> languages + ' ';
> });
>
> table += '';
>
> $("#content_window_pages").append(table);
> ...
>
> XML structure can be changed if it helps to speed up the script.
>
> Thanks for any suggestions,
> Martin
>
[jQuery] Re: Very slow find
Read through this post to help speed up DOM inserts:
http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly
On Mar 23, 3:46 pm, Martin Tiršel wrote:
> Hello,
>
> I get XML answer from server with ~5k lines and I need to parse this data
> into the table and display in HTML. I wrote a script to do this job, but
> it takes too much time to complete (~35 seconds in opera), what is not I
> want. Is there a way to improve this script? Perhaps there is more
> effective way to do this.
>
> XML looks like:
>
>
>
>
> ebapylibnfwxorjwoeseksnyqumdmxssaduy
> 5
> ojosjkfujggkildmlr
>
> 7
> b
>
>
> sk
> cz
>
>
> ... 500x similar as above
>
>
> JS:
>
> ...
> var table = ' class="pagelist">NameAuthorLanguagesActions';
>
> $(xml).find("page").each(function(i) {
> var name = $(this).find("name").text();
> var author = $(this).find("author name").text();
> var languages = new Array();
> $(this).find("languages lang").each(function() {
> languages.push($(this).text());
> });
> languages = languages.join(',');
> table += '' + name + ' class="second">' + author + '' + languages +
> ' ';
> });
>
> table += '';
>
> $("#content_window_pages").append(table);
> ...
>
> XML structure can be changed if it helps to speed up the script.
>
> Thanks for any suggestions,
> Martin
