homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

JS which adds many Dom nodes, how do I temporarily disable rendering?
programmed insertion of table rows slows up rendering

 1:11 am on Jun 17, 2003 (gmt 0)

I have a page where I use a JavaScript method to programmatically insert rows into a table via the Dom interface (after clearing all the previous rows of course).

Depending on the content, sometimes there may be quite a few rows... I've noticed its very slow if there are > 50 rows and I believe this is probably due to the fact that the browser never really knows when I'm done inserting these rows (at what point does it decide : "Ok, their done updating this table, now let me re-render it"). I suspect its starting this re-render process several times during the time I'm inserting rows.

What I would LIKE to do is :

1) tell the browser (or a portion of the Dom tree) to: "Ignore updates for a bit, I'm going to be inserting a bunch of nodes, so you might as well wait until I'm done...."
2) insert all my nodes (rows in a table in this case)
3) tell the browser (or Dom tree): "Ok, you can re-render now, I'm done with my modifications to the Dom tree".

Anyone got a clue on how to do this...?

BTW - I've tried just building up a big string and saying

someDomElement.innerHTML = myHtmlSnippit;

But this causes some other timing issues for me.



 3:47 am on Jun 17, 2003 (gmt 0)

I tried this (note IE6 didn't like me trying to insert rows into a dom element of type "tbody" unless that element had a parent "table").

var newTableBody = document.createElement("tbody");
newTableBody.id = "MyTBodyId";

//--- keep IE happy...
var tempParent = document.createElement("table");

for (...)
var documentTr = newTableBody.insertRow(i);
//--- <snip> populate each row...

//--- replace the old tbody with the new one...
var oldTableBody = document.getElementById("MyTBodyId");
var domTable = oldTableBody.parentNode;

domTable.replaceChild(newTableBody, oldTableBody);

This works fine...

Anyway, about the time I got this all working, I came across the following example from Danny Goodman (the Orielly DHTML guy).


He says in his 4/2003 update not to use the specialized table inserts (use the normal dom manipulation stuff instead). He also suggested using the DocumentFragment facility. I revamped mine to do follow this, so now it looks like :

var bodyElem =document.getElementById("MyTBodyId");

//--- clear the old table body...

var workingFragment = document.createDocumentFragment();

for (...)
var domTr = document.createElement("tr");

//--- insert td elements, etc.

//--- now insert back into tbody...

I can tell a speed difference (thought its still not blazing fast for > 100 rows in IE). Interestingly, performance in Mozilla Firebird .6 is MUCH faster (about 2-3 times faster than IE6).


 4:29 am on Jun 17, 2003 (gmt 0)

Welcome to the forum, and thanks very much for sharing your development process with us. Sorry no one had anything to add so far, including me :(

But you have given me some new areas to study, especially the documentFragment approach.

IE6 didn't like me trying to insert rows into a
dom element of type "tbody" unless that element had a
parent "table"

It's not just the IE browser, but the W3C spec itself that says tbody MUST be inside a table:

If you use the thead, tfoot and tbody elements,
you must use every element, but you can leave them

They should appear in this order:
<thead>, <tfoot> and <tbody>, so that browsers can
render the foot before receiving all the data.

You must use these tags within the table element.

W3Schools reference [w3schools.com]


 11:30 am on Jun 17, 2003 (gmt 0)

don't use insertRow()
use appendChild/createElement

this is modified, but only for test

var newTableBody = document.createElement("tbody");
newTableBody.id = "MyTBodyId";

var documentTr = newTableBody.appendChild(document.createElement("TR"));

var tempParent = document.createElement("table");
tempParent.border = "1";

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved