cloneNode caching
In my code, I like to be concise. I hate long-winded code. For instance, I usually replace the function document.createElement() with a function called newEl(eltype) which returns a new element as requested.
There is a small timing price to pay for that abstraction, though, as the shorter newEl() is simply a function encapsulating the original code.
I was reading through my blogs today, and came across this article, which discusses the use of element.cloneNode() instead of groups of document.createElement() blocks to create repetitive elements.
I thought a bit about that, and did a little test, and now have a very fast replacement for my newEl(eltype) function. Basically, it tests to see if a cached created version of that element type exists already, and if it does, then it returns a clone of it. If not, then it creates one, caches it, and returns a clone.
I have written up a test for it, which creates a p element 10,000 times with both methods, and the answer is definitive – cloneNode is definitely the way to go.
My new newEl(eltype) function:
var elCache=[];
function newEl(eltype){
if(!elCache[eltype])elCache[eltype]=document.createElement(eltype);
return elCache[eltype].cloneNode(true);
}
Update
After working on some tests based on the comments below, here is an updated version of the above, which takes into account that some browsers show no significant improvement with cloneNode:
var elCache=[];
function browserCheck(str){
return navigator.userAgent.toLowerCase().indexOf(str)+1;
}
var newEl=(browserCheck('konqueror')||browserCheck('opera')||browserCheck('safari'))?
function(eltype){
return document.createElement(eltype);
}:
function(eltype){
if(elCache[eltype])return elCache[eltype].cloneNode(true);
elCache[eltype]=document.createElement(eltype);
return elCache[eltype].cloneNode(true);
};
In Firefox and IE your new function is faster than the old one, but not in Konqueror and Opera. In case you do further initialisation with your nodes, I would expect the new function to win.
I had noticed the konqueror result (and wondered if it was a bug to be reported). Didn’t know about Opera, though – I’ll see if I can tweak it to be faster all-round. Maybe a customised function using a technique like this one so there is no performance loss through browser-checking.
on Safari 2.0.1 test 1 was 973 ms and test 2 was 1043 ms, I am not sure which is ment to be faster but though I would post the results in case they where of intrest.
Safari uses a version of the Konqueror engine, so I am not surprised about that. Maybe the performance increase is only evident in IE and Firefox (the dominant browsers anyway).
I have updated the post to include a more optimised version which checks for the browser type before it creates the function.
Kae,
I saw the post on IE blogs about clear CSS and Javascript cache via reload. Our browser Tablane browser which is a shell based on IE, can help a bit.
We don’t have straight way to do that, but it is much quick than IE.
Every time you want to reload a page, just create a new Tab using the same URL. (You can delete all other Tab except current on in one go)
Here is the procedure:
In Tablane Top Toolbar, click the little triangle beside the New Tab icon, choose Current Page. Every time, you create a Tab, it will load current URL in New Tab(this will reload CSS and Javascript).
Ctrl+T will create a New Tab.
Hope this will help.
Download from http://www.tablane.com
interesting… I don’t know whether to mark that as spam or not – it’s a reply a post I made here: http://blogs.msdn.com/ie/archive/2006/01/12/512232.aspx
I have no idea why Yongchun didn’t reply in that original thread.
Spam? It makes me laugh. I wrote it personally for your attention. In that IE thread, there are 160 replies. Â I think it is more proper to directly to the person to whom we may give help.