JavaScript Best Practices for Performance and Memory

Some common but poor practices used in Javascript programming can result in memory and performance issues, especially in large-scale and/or single-page apps and websites. We will discuss better practices as well as techniques for the refactoring of problematic existing code.

Transcript

1. JavaScript Best Practices for Performance and Memory K. Devin McIntyre devin.mcintyre@ricoh-usa.com @KDevinMcIntyre https://speakerdeck.com/miyasudokoro
2. • Causes of performance issues • Principles for high-performing code • Finding a balance • Techniques for fixing specific issues • References
3. Causes • DOM repaint and reflow • Inefficiencies at scale • Memory issues
4. DOM repaint and reflow Browser repaint and reflow slow performance.
5. Inefficiencies at scale Some techniques work best at small scales and others at large scales. • Number of operations • Size of data • Frequency of use
6. Memory issues Extra memory usage can slow or crash your app.
7. Memory issues Engines optimize memory for you but may lose optimization as complexity increases.
8. Memory issues: GC Garbage collection throws out unreachable objects only. JS execution scope Document DOM Tree DIV LI UL LI A Unreachable objB objA objB
9. Memory issues: GC Garbage collection occurs during a lull sometime after you have released some references. • Node: launch with --expose-gc and then use global.gc()
10. Memory issues: GC Garbage collection slows performance and causes stutter.
11. Memory issues Leak = trapped in memory Bloat = more memory in use than is needed
12. Memory bloat More objects are initialized than necessary.
13. Memory bloat Duplicate code.
14. Memory bloat: DOM Manipulating DOM objects has a high memory overhead.
15. Memory bloat: DOM DOM references may be bigger than you think. JS execution scope Document DOM Tree DIV LI UL Detached DOM Tree
16. Memory bloat: DOM DOM references may be bigger than you think. JS execution scope DIV LI UL Detached DOM Tree Document DOM Tree
17. Memory leaks Memory leaks occur when you fail to remove reachable references to something that’s meant to be discarded.
18. Memory leaks • asynchronous callbacks • event listeners • transient/temporary objects • elements removed from or never put in DOM
19. Memory leaks: DOM DOM objects can create large memory leaks. JS execution scope DIV LI UL Detached DOM Tree Document DOM Tree
20. Memory leaks: circular references DOM element S A Pointer Closure JS execution scope Document DOM Tree
21. Memory leaks: circular references DOM element S A Pointer Closure JS execution scope Document DOM Tree (More DOM elements) (linked list of S)
22. Principles • Least Change • Keep References Close • DOM Mindfulness
23. Principles: Least Change Make the smallest possible changes to objects.
24. Principles: Least Change If practical, change primitive values rather than swapping out objects and arrays.
25. Principles: Least Change Avoid using DOM element objects, such as the style object.
26. Principles: Keep References Close Use a modular organization that keeps functions, scopes, and objects as small as possible, each containing only what's needed.
27. Principles: Keep References Close If possible, use a framework that provides dependency injection of some kind.
28. Principles: Keep References Close When using closures, put variables in the lowest possible scope where they are reachable by whatever needs them. global~scope .makePresentation~scope .presentation global~scope .makePresentation~scope .setPresentation~scope .size
29. Principles: Keep References Close Minimize what is held in memory for asynchronous callbacks and event listeners.
30. Principles: Keep References Close Keep prototype/inheritance chains short and the number of properties low for frequently- used objects.
31. Principles: DOM Mindfulness Do not manipulate DOM elements lightly.
32. Principles: DOM Mindfulness Add minimal JS code to DOM elements, especially expando objects and functions.
33. Principles: DOM Mindfulness Limit listeners, and always remove them.
34. Finding a balance Balancing performance optimization against everything else you need to be doing.
35. Finding a balance Performance optimization competes for your time and energy with creating new features.
36. Finding a balance Constraining your team’s techniques based solely on performance can affect creativity and confidence among developers.
37. Finding a balance The best performing technique is not always the most readable one or the easiest to implement and maintain.
38. Finding a balance Today’s “fastest technique” could be replaced tomorrow.
39. Finding a balance No simple performance test (e.g. JSPerf) can reliably tell you what’s right for your code.
40. Finding a balance 1. Follow the principles of Least Change, Keep References Close, and DOM Mindfulness. 2. Identify performance bottlenecks in your app regularly and iteratively. 3. Apply known performance tricks to bottlenecks and move on quickly. 4. Only long-term bottlenecks should receive extra attention and research.
41. Techniques Choose techniques based on what specific problem you have found.
42. Best techniques: small functions (any performance issue) Use small, simple functions, and use pure functions when possible. Then reuse them.
43. Best techniques: classes (memory leak, frequently-used object) Use defined object types/classes for the majority of your objects, starting with the largest and the most frequently used objects.
44. Best techniques: named functions (memory bloat or leak) Use names for any functions that declare an object type or that have closures inside, so you can track their memory use. • function nameIsHere () ….. • var varName = function nameIsHere () ….. • NOT var varName = function () …..
45. Best techniques: auto-destruct (memory leak) Whenever a reference to or from a DOM element is created, an automatic destroyer is also created that ensures destruction of those references.
46. Best techniques: bind (memory issues from async callbacks) Use `bind` to limit the amount of memory needed for an asynchronous callback, or to prevent creating excess closures.
47. Techniques: limited closure (memory issues from async callbacks) Use a smaller function to limit the closures needed for an asynchronous callback.
48. Techniques: local pointer (slow closures) If a variable from two or more rungs up the scope chain is accessed more than once, provide it a local variable within the current scope. Global function makePresentation function setParticipants function checkValidity if(presentation.participants > presentation.room.capacity) { ….. *more code here+ …..
49. Techniques: local pointer (slow closures) If a variable from two or more rungs up the scope chain is accessed more than once, provide it a local variable within the current scope. Global function makePresentation function setParticipants function checkValidity var _presentation = presentation; if(_presentation.participants > _presentation.room.capacity)
50. Techniques: iteration of property array (object iteration bottleneck) If you know them, iterate over arrays of specific properties, rather than over objects of unknown or large sizes.
51. Techniques: integer properties (object iteration bottleneck) Integer-indexed objects (object or Array) are always faster to iterate with `for`.
52. Techniques: efficient CSS (slow repaint/reflow) Use efficient CSS selectors and remember the browser reads combinations of them from right to left. Most efficient, in order: 1. ID or class 2. Type, e.g. div 3. Adjacent sibling 4. Child 5. Descendant
53. Techniques: bubble-up events (memory bloat and leaks) 1. Make an event system object where you register callbacks based on event type and some property on the element (e.g. id, class). 2. On the parent node, create one listener for each kind of event. This listener should call your registered callbacks based on event type and the same property on event.target, then iterating upward through event.target.parentNode. 3. Because events bubble up, events on the children will reach the parent node’s listeners.
54. Techniques: V8 optimized type (frequently-used object) For frequently-used objects, don’t use the “delete” keyword and don’t add properties that aren’t in the prototype/class definition.
55. Techniques: conditional ordering (complex conditional) Put conditionals in order of most common to least common.
56. Techniques: lookup table (large scale conditional) Instead of making a long conditional, use an object with each conditional outcome as values.
57. Techniques: conditional advance loading (frequent conditional) For unchanging conditionals, swap out different functions rather than using conditional statements.
58. Techniques: memoization (large, complex bottleneck) Cache the results of functions based on their arguments. (This requires pure functions.) From https://en.wikipedia.org/wiki/Memoization
59. Techniques: object pool (GC stutter) 1. Make an array containing only objects of a specific type/class. 2. Pool accessor function first searches for an unused instance in the array, then creates one and adds it if needed.
60. Techniques: object pool (GC stutter)
61. Techniques: loop unrolling (enormous number of iterations) This uses a switch statement inside the loop so that the end condition of the loop gets evaluated less frequently. https://en.wikipedia.org/wiki/Loop_unrolling
62. Techniques: backwards loop (large number of iterations) If backwards iteration will work, writing the loop so the end condition and the iteration step are the same thing provides slightly less overhead. for (var i = array.length-1; i--; )
63. Techniques: webworker (long-running computation) Put long-running computations that hold up execution into a separate “thread” or webworker. https://www.html5rocks.com/en/tutorials/workers/basics/ https://medium.com/@roman01la/run-web-worker-with-a- function-rather-than-external-file-303add905a0
64. References: general • Zakas, Nicholas. High Performance Javascript: Build Faster Web Application Interfaces. Yahoo Press. 2010. • https://developers.google.com/speed/articles/optimi zing-javascript • https://www.smashingmagazine.com/2016/12/front- end-performance-checklist-2017-pdf-pages/ • https://www.smashingmagazine.com/2014/09/impro ving-smashing-magazine-performance-case-study/ • https://csswizardry.com/2011/09/writing-efficient- css-selectors/ • https://en.wikipedia.org/wiki/Memoization
65. References: memory • https://docs.google.com/presentation/d/1wUVmf78gG- ra5aOxvTfYdiLkdGaR9OhXRnOlIcEmu2s/pub?start=false&loop=false&del ayms=3000&slide=id.g322f9af_0_86 • https://github.com/felixge/node-memory-leak-tutorial • https://developer.mozilla.org/en- US/docs/Web/JavaScript/Memory_Management#Cycles_are_not_a_pro blem_anymore • https://www.smashingmagazine.com/2012/11/writing-fast-memory- efficient-javascript/ • https://medium.com/outsystems-experts/beyond-memory-leaks-in- javascript-d27fd48ae67e • https://stackoverflow.com/questions/18521254/cant-seem-to-cleanup- detached-dom-elements • https://developers.google.com/web/tools/chrome-devtools/memory- problems/ • https://stackoverflow.com/questions/8032928/can-i-trigger-javascripts- garbage-collection