File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Firefox: appendChild is getting hanged Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Firefox: appendChild is getting hanged" Watch "Firefox: appendChild is getting hanged" New topic
Author

Firefox: appendChild is getting hanged

shai ban
Ranch Hand

Joined: Jan 05, 2010
Posts: 177
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

Joined: Jan 28, 2008
Posts: 43
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


Christophe Porteneuve aka TDD
"They did not know it was impossible, so they did it." --Mark Twain
Pragmatic Guide to JavaScript: http://books.pragprog.com/titles/pg_js/
Prototype and script.aculo.us: http://books.pragprog.com/titles/cppsu/
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jan 05, 2010
Posts: 177
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
You are adding table rows to a div and appending that to the table? That is invalid HTML.

Eric
shai ban
Ranch Hand

Joined: Jan 05, 2010
Posts: 177
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jan 05, 2010
Posts: 177
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

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Jan 05, 2010
Posts: 177
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

Joined: Jan 05, 2010
Posts: 177
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

Joined: Jan 05, 2010
Posts: 177
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.



 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Firefox: appendChild is getting hanged
 
Similar Threads
i to put hyperlink in javascript table
Ajax - load a particular part of JSP
popup window
Trying to create an array full of ongoing numbers with add/remove buttons, not showing up on page
question about objects and events in javascript