From this presentation, I picked up a few more tidbits. Never use the with statement. When it’s used, the javascript processor will have to examine the object (up the prototype chain) and the scope (up the scope chain) leading to expensive look-ups.

Never use eval if possible. This includes sending javascript strings to setTimeout and setInterval. Evaluated code must be compiled and interpreted.

Also this post discusses the potential security concerns and memory leaks associated with innerHTML.

Lastly, I want to point out an old tool that I was recently asked about for an IE6 problem. Drip can be useful for detecting those IE6 problems.

My notes

Scope chains:
-Store out of scope vars as local vars esp. global b/c they’ll be last on scope chain
-Avoid with: add another obj to scope chain -> local vars are now 1 step away. use local vars instead
-Be careful with try-catch: catch augments scope chain
-Use closure sparingly (add 2 contexts to the scope chain)
-Don’t forget var when declaring local vars (takes longer to resolve & pollutes name space)

Data Access:
-Property depth matters so store in local vars if accessed more than once

Loops:
-for … in is very inefficient for iterating over aways
-prevent repeated property look-ups var len = arr.length;
-if you can count down to 0 which evals to false can save a second evaluation
c.f. for (var i=0; i < arr.length; i++) vs. for (i = arr.length; i--;) -- 50% gain!
n.b. will change order of execution
-avoid values.forEach(function () {}) -- function based iteration up to 8x slower!

DOM:
-HTML Collections are live! Look like arrays but aren’t
-var divs = document.getElementsByTagName(‘div’);
-divs is not a static reference
-accessing divs.length queries the # of divs on every access! up to 50-60x slower in browsers
-minimize property access
-if you need to access in order as a snapshot, copy it to a static array

DOM reflow:
-reflow: how size is calculated in browsers
-reflow occurs on initial page load, browser resized, DOM nodes added/removed, new styles applied, layout info retrieved

DocumentFragment:
-DocumentFragment: doc-like object but not visually represented, considered child of doc from which it’s created,
-DocumentFragment when passed to addChild, adds children to DOM
ex. var frag = document.createDocumentFragment();
use doc frags to reflow once instead of for every added node
-alt method: if container element of elements to be added has display:none, will not reflow, then can set display: ” as last step. caution: IE may still calc reflow even with display: none

CSS:
-minimize changes to style property, each change causes reflow
-define classes with all changes and just change className property
-if retrieving layout info, can save value to var to access once

Above: the original documentation / presentation for agents. The live presentation covered use of the web application and best practices for online promotion of their clients’ listings. For best results, use the full screen button to view the slideshow.

Heavily modified component of Joomla! CMS

Provides real estate professionals with quick “listing sites” and management of their listings.

Front-end technologies include PHP, HTML, CSS, Flash, Ajax running on Linux, Apache, MySQL, and PHP back-end.

Interesting UI components include:

• time saving multiple file upload (via Flash) bypassing browser’s single file upload mode.
• automatic integration of YouTube listing videos
• rich text editor for user input
• visually attractive, sophisticated Flash mortgage calculator
• automatic Google Maps interactivity
• javascript slideshow in lightbox with shadow overlay
• Ajax user contact form
• agent backup with one click zip and download
• 1 click sharing and promotion via integration of social bookmarking tool AddThis
• optimized content delivery following best pratices guidelines of YSlow and Google Page Speed
• combined, minified, and cached CSS & JavaScript using minify & YUI comprosser, sprited images, and lazy loading of specific components
• time saving automatic fetching, parsing, and form populating based on single unique identifiers
• Separate administrative and agent views
• Ajax autocomplete fields