• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Firefox: appendChild is getting hanged

 
shai ban
Ranch Hand
Posts: 177
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I am trying to add a large chunk of html <table> code into DIV dynamically through appendChild method. But the browser is displaying the popup for 'unresponsive script'?
Can anybody tell me how to make fast this method? I tried with innerHTML also after converting data through new XMLSerializer().serializeToString(transformedTRs) but this is also giving the same popup!

Can we append small chunks of data through innerHTML or appendChild? How?

Thanks.
 
Christophe Porteneuve
Author
Ranch Hand
Posts: 43
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hey Shai,

Well, I'll assume your entire stuff is indeed client-side here, although you appear to use custom stuff (your XMLSerializer thingy is certainly not a standard API).

It is likely that the part of your script that is too slow is the loop building your markup.

When it comes to adding stuff to the DOM, there are really two ways: build DOM nodes and use appendChild as you go, or build the markup and put it inside innerHTML. You appear to know this.

However, the key to being speedier insertion-wise is to only add stuff to the DOM once you're done. Build your DOM fragment outside the DOM. So first, check you're not looping over something like "innerHTML +=", which would be very slow. Also make sure that you don't build an ever-larger String by concatenating to it.

The two ways (DOM-based and HTML-based) would ideally look like what follows. I'm assuming your table exists and you're only generating rows, but if you're going from table downwards, just adapt the code (a single root node for the DOM-based approach, and extra opening/closing lines for table and tbody in the HTML-based approach).

DOM-based:



HTML-based:



This way you only grapple with the rendered DOM once, which is important.

Now, if the loop itself is too slow, then you're in another kind of trouble. Making sure you don't use an ever-expanding String should help (which is why we use an Array of HTML lines here, and end up join'ing it). If it's still too slow, try profiling your code with whatever tools you have (Safari's Web Inspector, Firebug's Profile tool on Firefox…) to pinpoint the culprit part of your code.

'HTH
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Appending one row at a time is a bad idea when you are talking large number of rows. Table has to keep redrawing and is horrible performance wise.

Best performance would be to append the rows to a tbody, and than append the entire tbody to the table


Play with it here: http://jsbin.com/iluro4/edit


Eric
 
shai ban
Ranch Hand
Posts: 177
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi christophe, Thanks for the reply.
I only have blank DIV in my html and <table> is generated through XSL(from server) so I can't extract TR/TD from that. It will be very complex and time consuming if I try to extract that data.
So I am simply adding this table data into DIV through appendChild/innerHTML. However it is very slow. Please let me know to speedup this process either by breaking the html (first we can pick 1000 characters and so on) and then appending them thru DOM/HTML way or any other way.

Thanks.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You are adding table rows to a div and appending that to the table? That is invalid HTML.

Eric
 
shai ban
Ranch Hand
Posts: 177
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
NO. The html code that I am getting through XSL is a <table>. I am inserting it into a existing DIV.
Hope, I am clear now.
 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
How big is this table?

How are you adding it to the page? Show us that JavaScript code. [We do not care about the Ajax part, just the appending part]

Eric
 
shai ban
Ranch Hand
Posts: 177
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That table is having around 2000 records, 10 columns in each row.


Here if the browser is not IE, I tried using appendChild and innerHTML both. But that script error (unresponsive script) is coming.

Thanks.

 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yeah, that table is big and it will cause issues.

make sure the table's html markup is 100% valid. Run it through a validator

How about something like this.



Eric
 
shai ban
Ranch Hand
Posts: 177
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I will surely try it. But would you please let me know what effect it will give? I mean, I am not sure what this code is trying to do?
 
shai ban
Ranch Hand
Posts: 177
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ok I got you. I tried it out. But still bad luck with the below warning...

UNRESPONSIVE SCRIPT:
A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.



Thanks.
 
shai ban
Ranch Hand
Posts: 177
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
One more thing that might helpful to you.
We have included the YUI on the page like below...


That mean it is doing all this DOM manipulation through YUI api (I feel so) that's why in the warning it is always pointing to YUI js...


The same code is working fine on IE. Does it mean IE is not using the YUI? I don't have any idea about that. But what I am thinking is, Is that possible to do dom manipulation in IE way on firefox?
2nd thing, if I increase firefox configuration property dom.script_run_time in about:config then it is working fine. So we can change this timeout programatically only for this specific function. And then we can reset it.

Let me know what you think.



 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic