2. Improving… JavaScript Performance John Lawrimore, 2014

3. Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at Improving Enterprises - Microsoft enthusiast - Background heavy in web applications development - Unable to think of interesting things to say about self

4. Access this Presentation Online http://johnlawrimore.com/jsperformance

5. Objectives • Provide a better understanding of how JavaScript works • Introduce practices and techniques that will noticeably increase performance • Focus ONLY on what... • Generally applies to all browsers • You can reasonably begin implementing tomorrow

6. Approaching Optimization • The right optimization strategy will differ by application • Do what makes sense • Pick your battles • Consider maintainability • Challenge your assumptions regularly

7. What is scope chain?

8. Scope Chain

10. Namespacing • Condenses the global namespace • Reduces search time for its descendants HINT: Set distant namespaces to a variable to reduce search time

11. Closures (anonymous functions) Pros: • Access to variables outside the function Cons: • Adds to the scope chain • Requires a new execution context

12. What’s wrong with this?

13. What’s wrong with this?

14. With and Try-Catch • Use Try-Catch sparingly • And NEVER try catch in a loop! • NEVER use With !

15. What’s missing?

16. What’s missing? ! Local variables missing the var keyword are automatically instantiated in the global namespace!!

17. 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’

18. What is the DOM?

19. Document Object Model

20. Under the hood

21. What impacts DOM performance?

22. DOM Performance Issues DOM search DOM manipulation ! !

23. What’s wrong with this?

24. What’s wrong with this? ! THE DOM IS NOT A DATABASE!

25. Data Property • Maintained within the JavaScript engine (not the DOM) • Can be global or bound to a specific element

26. Data vs. Attributes

27. Data vs. Attributes

28. What is Reflow/Repaint?

29. 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)

30. Repaint vs. Reflow • Both are expensive in terms of performancebecause they require traversing • Reflow may or may not affect the entire document • JavaScript engines attempt to perform reflow in batches

31. Let’s improve this!

32. Let’s improve this!

33. Let’s improve this!

34. Let’s improve this!

35. 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

36. 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

37. 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

38. What is the outcome of this method?

39. What is the outcome of this method? ! IT NEVER ENDS!

40. HtmlCollections Don’t let them fool you! They are not arrays! Examples: • document.getElementsByTagName • document.getElemenetsByClassName • document.images • document.forms

41. Let’s improve this!

42. Let’s improve this! Only touch the HTMLCollection one time

43. Reducing DOM Interaction Never store data on the DOM Avoid reflow Limit calls to HtmlCollections

44. UI Thread Responsibilities • Draw UI • Execute JavaScript ! UI THREAD CAN ONLY DO ONE RESPONSIBILITY AT A TIME

45. 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.

46. Web Workers • New option for asynchronous execution in HTML5 • Operates outside of UI Thread • Trigger specified event handlers when completed

47. What loop should I use?

48. Loops for for-in for-each [].forEach() $().each() do-while while

49. 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

50. 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