Welcome to WebmasterWorld Guest from 54.158.51.150

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)

10+ Year Member



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)

10+ Year Member



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

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



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

10+ Year Member



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>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month