DOM Methods vs innerHTML
Finding a fast way to create elements, every browser works differently and this can make some simple tasks fast or slow, I find sometimes a hard dilema using innerHTML I know is easy and lazy for programmers in the other hand the DOM methods such a createElement, appendChild, createTextNode are elegant, understandable but is just to much code for a small piece of HTML maybe templating your HTML would be better.
Anyway I did some speed tests with the following code (you should try it).
var timer = 0,
endTimer = 0,
iterations = 100000,
i = 0;
//DOM Methods
var ul = document.createElement('ul')
timer = +new Date;
while (i < iterations ) {
var
li_1 = document.createElement('li'),
li_2 = document.createElement('li'),
li_3 = document.createElement('li'),
li_4 = document.createElement('li');
ul.appendChild(li_1);
ul.appendChild(li_2);
ul.appendChild(li_3);
ul.appendChild(li_4);
i++;
}
endTimer = (+new Date) - timer;
console.log(endTimer);
//innerHTML
i = 0;
timer = 0;
endTimer = 0;
var ul = document.createElement('ul');
timer = +new Date;
while (i < iterations ) {
ul.innerHTML ="<li></li><li></li><li></li><li></li>";
i++;
}
endTimer = (+new Date) - timer;
console.log(endTimer);
}());
//Chrome
690 ms //Dom Methods
1577 ms //innerHTML
//Opera
1930 ms //Dom Methods
1819 ms //innerHTML
//Firefox
538 ms //Dom Methods
3300 ms //innerHTML
//Safari
782 ms //DOM Methods
722 ms //innerHTML
JSPERF TESTS
http://jsperf.com/innerhtml-vs-createelement-appendchild
After few days testing DOM Methods speed WINS, but the code is just to big so we need to use a js minifier like
http://www.crockford.com/javascript/jsmin.html
http://jscompress.com/
to reduce your script size and speed up the download.
I'm currently working in a simple tool that converts your HTML string to DOM Methods but it just work in the browser I'm taking advantage of the browser DOM parser, I guess I'll require a DOM Parser if I want to run it in another environment, you can check it here.
http://labs.ramonlechuga.com/DOMMethodfy/
Source:
https://github.com/alejandrolechuga/DOMMethodfy
Private & public properties for JavaScript
Here we have a good article about keeping private properties in your JavaScript kinda Java , well we know that JavaScript is not enough good for Object Orientation but it has a lot good parts 
is very flexible.
Here we have the normal way for making "Classes"
//this is like the constructor
};
myClass.prototype.myMethod = function () {
//wow a method :D
};
var myClassInstance = new myClass();
Well we know that everybody who use firebug or javascript pretty often could have access to this objects, so a good way for keep this objects not accesible to the window parent object.. is doing this
var myClass = function () {
//this is like the constructor
};
myClass.prototype.myMethod = function () {
//wow a method :D
};
var myClassInstance = new myClass();
});
And this way is to keep your properties private even from your own objects (I took this method from the Douglas Crockford website), the problem here is that you just access from public to private properties, and private don't have access to public.
function privateMethod() {
alert("Hello I'm the private method");
}
return {
variable:1,
method: function () {
alert(this.variable); // shows 1
},
methodCallPrivate: function () {
privateMethod();
}
}
});
var myClassInstance = new myClass();
myClassInstance.method(); // shows 1
myClassInstance.methodCallPrivate(); //shows "Hello I'm the private method"
But I found this way if you want both have access to each other
var _public = {};
var _private = {};
_public.pubVariable = "Hello World from _public.pubVariable";
_private.priVariable = "Hello World from _private.priVariable";
_public.pubMethod= function() {
alert(_private.priVariable);
};
_private.priMethod = function() {
alert(_public.pubVariable);
};
_public.callpriMethod = function() {
_private.priMethod();
};
return _public;
});
var myClassInstance = new myClass();
myClassInstance.pubMethod(); // shows "Hello World from _private.priVariable"
myClassInstance.callpriMethod(); // shows "Hello World from _private.priVariable"
myClassInstance.priMethod(); //Throws an Error
Welcome to my new blog
Hello readers, welcome to my new blog. The main reason I created because I want to share & save all the stuff I've learnt about building websites.
I'm going to post good tricks for the following languages:
JavaScript ( AJAX/DHTML)
PHP (OOP/MVC)
HTML/CSS
Flash & Flex
So welcome to anyone who comes along here. Please let me know if I have some mistakes on my posts
Thanks,
Ramon
- VPN setup done... need a dd-wrt ROUTER!!
- @yayQuery in previous podcasts Paul Irish mentioned a script that could render the DOM into a canvas is there an API for that?
- SteveJobs should be cryogenized
- woz cries http://t.co/A1p2ryma
- http://t.co/o4xr5gWd
- RT @paulsmith: Make a donation to the Pancreatic Cancer Action Network: http://t.co/OYSzHtxY