john lawrimore, 2014 javascript performance presenter john lawrimore...
TRANSCRIPT
![Page 1: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/1.jpg)
![Page 2: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/2.jpg)
Improving…
John Lawrimore, 2014
JavaScript Performance
![Page 3: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/3.jpg)
Presenter
JOHN [email protected]@johnlawrimore
- Principal Consultant at Improving Enterprises- Microsoft enthusiast- Background heavy in web applications development- Unable to think of interesting things to say about self
![Page 4: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/4.jpg)
Access this Presentation Online http://johnlawrimore.com/jsperformance
![Page 5: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/5.jpg)
Objectives1. Provide a better understanding of how JavaScript works2. Introduce practices and techniques that will noticeably increase
performance3. Focus ONLY on what...
• Generally applies to all browsers• You can reasonably begin implementing tomorrow
![Page 6: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/6.jpg)
Approaching Optimization• The right optimization strategy will differ by application• Do what makes sense• Pick your battles• Consider maintainability• Challenge your assumptions regularly
![Page 7: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/7.jpg)
What is scope chain?
![Page 8: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/8.jpg)
Scope Chain
![Page 9: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/9.jpg)
![Page 10: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/10.jpg)
Namespacing• Condenses the global namespace• Reduces search time for its descendants
HINT: Set distant namespaces to a variable to reduce search time
![Page 11: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/11.jpg)
Closures (anonymous functions)Pros:• Access to variables outside the function
Cons:• Adds to the scope chain• Requires a new execution context
![Page 12: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/12.jpg)
What’s wrong with this?
![Page 13: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/13.jpg)
What’s wrong with this?
![Page 14: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/14.jpg)
With and Try-Catch• Use Try-Catch sparingly• And NEVER try catch in a loop!
• NEVER use With
!
![Page 15: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/15.jpg)
What’s missing?
![Page 16: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/16.jpg)
Local variables missing the var keyword are automatically instantiated in the global namespace!!!
What’s missing?
![Page 17: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/17.jpg)
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’
![Page 18: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/18.jpg)
What is the DOM?
![Page 19: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/19.jpg)
Document Object Model
![Page 20: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/20.jpg)
Under the hood
![Page 21: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/21.jpg)
What impacts DOM performance?
![Page 22: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/22.jpg)
DOM Performance Issues
DOM search
DOM manipulation
!
!
![Page 23: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/23.jpg)
What’s wrong with this?
![Page 24: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/24.jpg)
THE DOM IS NOT A DATABASE!!
What’s wrong with this?
![Page 25: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/25.jpg)
Data Property• Maintained within the JavaScript engine (not the DOM)• Can be global or bound to a specific element
![Page 26: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/26.jpg)
Data vs. Attributes
Attribute Storage Data PropertyAvoids hits to the DOM
Accommodates types, arrays and complex objects
Optimized by built-in caching
Maintains valid HTML
![Page 27: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/27.jpg)
Data vs. Attributes
![Page 28: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/28.jpg)
What is Reflow/Repaint?
![Page 29: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/29.jpg)
Repaint vs. ReflowREPAINTVisual changes that do not alter the document layout. (aka: redraw)
Examples:• Color• Font style
REFLOWOccurs 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)
![Page 30: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/30.jpg)
Repaint vs. Reflow
• Both are expensive in terms of performance because they require traversing• Reflow may or may not affect the entire document• JavaScript engines attempt to perform reflow in batches
![Page 31: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/31.jpg)
Let’s improve this!
![Page 32: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/32.jpg)
Let’s improve this!
![Page 33: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/33.jpg)
Let’s improve this!
![Page 34: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/34.jpg)
Let’s improve this!
![Page 35: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/35.jpg)
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
![Page 36: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/36.jpg)
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
![Page 37: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/37.jpg)
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
![Page 38: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/38.jpg)
What is the outcome of this method?
![Page 39: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/39.jpg)
What is the outcome of this method?
IT NEVER ENDS!!
![Page 40: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/40.jpg)
HtmlCollectionsDon’t let them fool you! They are not arrays!
Examples:• document.getElementsByTagName• document.getElemenetsByClassName• document.images• document.forms
![Page 41: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/41.jpg)
Let’s improve this!
![Page 42: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/42.jpg)
Let’s improve this!
Only touch the HTMLCollection one time
![Page 43: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/43.jpg)
Reducing DOM InteractionNever store data on the DOM
Avoid reflow
Limit calls to HtmlCollections
![Page 44: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/44.jpg)
UI ThreadResponsibilities• Draw UI• Execute JavaScript
! UI THREAD CAN ONLY DO ONE RESPONSIBILITY AT A TIME
![Page 45: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/45.jpg)
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.
![Page 46: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/46.jpg)
Web Workers• New option for asynchronous execution in HTML5• Operates outside of UI Thread• Trigger specified event handlers when completed
![Page 47: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/47.jpg)
What loop should I use?
![Page 48: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/48.jpg)
Loopsfor
for-in
for-each
[].forEach()
$().each()
do-while
while
![Page 49: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/49.jpg)
Selecting a LoopAvoid 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
![Page 50: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/50.jpg)
Selecting a LoopWhat matters?
• Amount of work being performed• Number of iterations
Do Less Work!!
Avoid lookups inside loop
Reduce number of calculation being performed
![Page 51: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/51.jpg)
How can this be improved?
![Page 52: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/52.jpg)
Combine control condition and control variable into a single statement
How can this be improved?
BET TER!
![Page 53: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/53.jpg)
Combine the terminal condition evaluation w/ incrementing / decrementing
How can this be improved?
BET TER!
BEST!
![Page 54: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/54.jpg)
Switch or If-Then-Else?
![Page 55: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/55.jpg)
Selecting a Conditional StatementIt Depends!• As conditions increase, switch becomes more and more optimal
![Page 56: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/56.jpg)
Let’s improve this!
![Page 57: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/57.jpg)
Let’s improve this!
BET TER!Consider a combined approach!
![Page 58: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/58.jpg)
Let’s improve this!
BET TER!
Create a hash table
OR EVEN
![Page 59: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/59.jpg)
Common Pitfalls
![Page 60: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/60.jpg)
What’s wrong here?
![Page 61: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/61.jpg)
What’s wrong here?
![Page 62: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/62.jpg)
What’s wrong here?
MEMORY LEAK!!
![Page 63: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/63.jpg)
What’s wrong here?
MEMORY LEAK!!
Break the chain!
![Page 64: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/64.jpg)
What’s wrong here?
![Page 65: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/65.jpg)
What’s wrong here?
WILL BE CALLED WAY TOO MUCH!!
![Page 66: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/66.jpg)
Throttle and Debounce• Throttling limits the execution of a function to no more than once
every delay milliseconds• Debouncing guarantees that the function will only ever be executed a
single time (given a specified threshold).
![Page 67: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/67.jpg)
Smarter Coding
![Page 68: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/68.jpg)
Which is better?
![Page 69: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/69.jpg)
Which is better?
BET TER!
Use literals, avoid ‘new’
![Page 70: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/70.jpg)
Which way is better?
![Page 71: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/71.jpg)
Which way is better?
Use prototypes!
![Page 72: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/72.jpg)
Reuse/Recycle
Reuse old variables instead of creating new ones!
![Page 73: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/73.jpg)
Event DelegationHandle array element events with a single binding on the container• Events to bubble up the DOM tree• Detect the node originating the event and act accordingly• Use stopPropagation(), preventDefaults(), etc. as needed
![Page 74: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/74.jpg)
Let’s improve this!
![Page 75: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/75.jpg)
Let’s improve this!
BET TER!
Use lazy loading
![Page 76: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/76.jpg)
String Manipulation Use += over function based concatenation
Use regexes to parse and slice
![Page 77: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/77.jpg)
Which is faster?
![Page 78: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/78.jpg)
Which is faster?
BET TER!
Use bitwise operators where appropriate
![Page 79: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/79.jpg)
Traversing Always use the most optimum methods for crawling the DOM
• DOM properties such as childNode, firstChild, nextSibling, etc. don’t distinguish between element and other node types (such as spaces, comments, etc.)
![Page 80: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/80.jpg)
JSONeval() SLOW!Libraries EVEN WORSE!
Always use the JSON namespace• Native in all modern browsers (IE8+)• JSON.parse()• JSON.stringify()• toJSON() prototype
!
![Page 81: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/81.jpg)
Are libraries efficient?
![Page 82: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/82.jpg)
Using LibrariesThe most optimal library is no match to the JavaScript Engine!• Intermediaries come with overhead• Native methods are compiled machine code
Leverage libraries only in cases where value is added…
![Page 83: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/83.jpg)
Use native features over libraries• indexOf()
• lastIndexOf()
• every()
• filter()
• forEach()
• map()• some()
![Page 84: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/84.jpg)
querySelectorAll()Much faster than using JavaScript and DOM to iterate and narrow down a list of elements• Supported in IE8+
![Page 85: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/85.jpg)
What selector should I use?
![Page 86: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/86.jpg)
SelectorsAll selectors are NOT created equal
Always consider what is going on underthe covers!
Type ExampleUniversal *
Type div
ID #header
Class .promo
Attribute [type=“text”]
Pseudo-class a:hover
Adjacent sibling h2 + p
Child li > ul
Descendant ul a
![Page 87: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/87.jpg)
ID & Element Selectors$(‘#Element, form, input’)
Most optimal choice!
Backed by native DOM operations• eg. getElementById()
![Page 88: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/88.jpg)
Class Selectors$(‘.element’)
Much slower selector• Particularly in browsers where getElementsByClassName() is not supported
!
![Page 89: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/89.jpg)
Pseudo & Attribute$(‘:visible, :hidden’);$(‘[attribute=value]’);
USE SPARINGLY
No native calls available• querySelector() and querySelectorAll() help in modern browsers
!
![Page 90: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/90.jpg)
Combining SelectorsSelector engines use the Right to Left Model
Always make your MOST SPECIFIC selector on the right
![Page 91: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/91.jpg)
Let’s rank these!
A. $('.child', $('#parent')) B. $(‘#parent > .child’)
C. $parent.find(‘.child’) D. $(‘#parent .child’)
E. $(‘.child’, $parent) F. $parent.children(".child’)
![Page 92: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/92.jpg)
Let’s rank these!
D. $(‘#parent .child’)
B. $(‘#parent > .child’)
F. $parent.children(".child’)
A. $('.child', $('#parent'))
E. $(‘.child’, $parent)
C. $parent.find(‘.child’)
RESULTS:
![Page 93: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/93.jpg)
Can Script Tags Hurt Performance?
![Page 94: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/94.jpg)
Script TagsPROBLEMS• External references result in an http request• Inline scripts circumvent client-side caching
![Page 95: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/95.jpg)
Load Script Tags FasterALWAYS "minify" production code!
Bundle scripts (and styles) into single resources
Leverage Code Delivery Networks (CDN)
Lazy load scripts with AMD utilities
![Page 96: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/96.jpg)
AMDAsynchronous Module Definition
Example: require.js
![Page 97: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/97.jpg)
How do I Test Performance?
![Page 98: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/98.jpg)
jsPerfCompare the performance of code snippets across browsers
![Page 99: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/99.jpg)
YSlowGrade your site’s optimizations
![Page 100: John Lawrimore, 2014 JavaScript Performance Presenter JOHN LAWRIMORE john.lawrimore@improvingenterprises.com @johnlawrimore - Principal Consultant at](https://reader036.vdocument.in/reader036/viewer/2022062720/56649f115503460f94c243e9/html5/thumbnails/100.jpg)
Reading Material
High Performance JavaScriptNicholas C. Zakas