DHTML and JavaScript Performance Tuning

Using JavaScript

XML

Use content-type of application/xhtml+xml or application/xml

Using application/xhtml+xml will boost performance of DOM methods (applies to Mozilla and Safari).

For applications that run in Internet Explorer, this technique should be avoided. Internet explorer does not support application/xhtml+xml or createElementNS. Mozilla and Safari require createElementNS (instead of createElement) when a document is served with one of the aforementioned content-types.

DOM

  1. Use [] Instead of .item()
  2. innerHTML is faster than the DOM
  3. Favor cloneNode(true) over multiple calls to createElement

Use [] Instead of .item()

Demo ->

item() test

Calling item is slightly more expensive and takes up more ascii characters.

innerHTML is faster than the DOM

In some very rare instances, it will not violate accessiblity problems to create additional navigational items. For those cases, innerHTML is the fastest.

Demo ->

innerHTML VS DOM

innerHTML will not in an xml document in Mozilla or Safari.

Favor cloneNode over multiple calls to createElement

Demo ->

cloneNode VS createElement

 

Next in this tutorial:

 

*AnimTree
*Tabs
*GlideMenus
*DragLib