Improving… - PowerPoint PPT Presentation

slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Improving… PowerPoint Presentation
Download Presentation
Improving…

play fullscreen
1 / 101
Improving…
131 Views
Download Presentation
farica
Download Presentation

Improving…

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Improving… JavaScript Performance John Lawrimore, 2014

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

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

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

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

  6. What is scope chain?

  7. Scope Chain

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

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

  10. What’s wrong with this?

  11. What’s wrong with this?

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

  13. What’s missing?

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

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

  16. What is the DOM?

  17. Document Object Model

  18. Under the hood

  19. What impacts DOM performance?

  20. DOM Performance Issues DOM search DOM manipulation ! !

  21. What’s wrong with this?

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

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

  24. Data vs. Attributes

  25. Data vs. Attributes

  26. What is Reflow/Repaint?

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

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

  29. Let’s improve this!

  30. Let’s improve this!

  31. Let’s improve this!

  32. Let’s improve this!

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

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

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

  36. What is the outcome of this method?

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

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

  39. Let’s improve this!

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

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

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

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

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

  45. What loop should I use?

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

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

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