Welcome to WebmasterWorld Guest from 54.158.125.71

Forum Moderators: open

Message Too Old, No Replies

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)

New User

10+ Year Member

joined:June 16, 2003
posts:4
votes: 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 June 17, 2003 (gmt 0)

New User

10+ Year Member

joined:June 16, 2003
posts:4
votes: 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");
tempParent.appendChild(newTableBody);

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).

[dannyg.com...]

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...
clearChildNodes(bodyElem);

var workingFragment = document.createDocumentFragment();

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

//--- insert td elements, etc.
}

//--- now insert back into tbody...
bodyElem.appendChild(workingFragment);
------------------------------------

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 June 17, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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
blank.

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 June 17, 2003 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 19, 2002
posts:372
votes: 0


don't use insertRow()
use appendChild/createElement

this is modified, but only for test


<body></body>
<script>
var newTableBody = document.createElement("tbody");
newTableBody.id = "MyTBodyId";

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

var tempParent = document.createElement("table");
tempParent.appendChild(newTableBody);
tempParent.border = "1";
document.body.appendChild(tempParent)
</script>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members