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