Presenter JOHN LAWRIMORE firstname.lastname@example.org @johnlawrimore - Principal Consultant at Improving Enterprises - Microsoft enthusiast - Background heavy in web applications development - Unable to think of interesting things to say about self
Access this Presentation Online http://johnlawrimore.com/jsperformance
Approaching Optimization • The right optimization strategy will differ by application • Do what makes sense • Pick your battles • Consider maintainability • Challenge your assumptions regularly
Namespacing • Condenses the global namespace • Reduces search time for its descendants HINT: Set distant namespaces to a variable to reduce search time
Closures (anonymous functions) Pros: • Access to variables outside the function Cons: • Adds to the scope chain • Requires a new execution context
With and Try-Catch • Use Try-Catch sparingly • And NEVER try catch in a loop! • NEVER use With !
What’s missing? ! Local variables missing the var keyword are automatically instantiated in the global namespace!!
Managing Scope • Don’t use the global namespace! • Cache out-of-scope variables referenced more than once • Limit augmentations to the scope chain • Closures • With • Try Catch • Consider scope when creating prototypes • Don’t forget to use ‘var’
DOM Performance Issues DOM search DOM manipulation ! !
What’s wrong with this? ! THE DOM IS NOT A DATABASE!
Repaint vs. Reflow REPAINT Visual changes that do not alter the document layout. (aka: redraw) Examples: • Color • Font style REFLOW Occurs when a visual change is made to the HTML document that requires layout to be computed. Examples: • Initial render • Browser window resize • Visible elements added or removed • Element position changes • Changes in size, margin, border, etc. • Text changes • Layout information is retrieved(in some cases)
DocumentFragment • Child of the document that created it • No visual representation • Construct happens behind the scenes • When passed to appended to document, only its children are added
CSS Transitions > Animation • Allows property changes in CSS values to occur smoothly over a specified duration. • Powerful, clean, and faster than JS animations • Not supported in IE 9 and earlier
Avoiding Reflow • Group styles whenever possible • Use classes or cssText instead of styles • Accumulate new elements and append with one call • innerHTML (or html() for jQuery) • documentFragment • Temporarily remove elements to be modified from the document • remove(), detach(), etc. • Avoid animation, and leverage libraries or CSS transitions when you must
What is the outcome of this method? ! IT NEVER ENDS!
HtmlCollections Don’t let them fool you! They are not arrays! Examples: • document.getElementsByTagName • document.getElemenetsByClassName • document.images • document.forms
Let’s improve this! Only touch the HTMLCollection one time
Reducing DOM Interaction Never store data on the DOM Avoid reflow Limit calls to HtmlCollections
Timers • Run secondary tasks in the back ground AFTER the page has loaded. • When timer is done, job is added to the UI Queue. • Remember that less timers with more work is better than more timers with less work.
Web Workers • New option for asynchronous execution in HTML5 • Operates outside of UI Thread • Trigger specified event handlers when completed
Loops for for-in for-each .forEach() $().each() do-while while
Selecting a Loop Avoid non-native function based loops • Creates closures (and associated overhead) in scope chain • Takes about 8-10x as long as basic for loop Avoid for-in and for-each • for-in performs expensive type evaluation • for-each deprecated in ECMA -357
Selecting a Loop What matters? • Amount of work being performed • Number of iterations Do Less Work!! Avoid lookups inside loop Reduce number of calculation being performed