SlideShare a Scribd company logo

Writing Efficient JavaScript

Nicholas Zakas
Nicholas Zakas

Writing Efficient JavaScript discusses common issues that can slow down JavaScript performance and provides recommendations to address them. It covers scope management, data access, loops, DOM manipulation, and avoiding browser limits. The document recommends minimizing scope chain lookups, storing frequently accessed properties in local variables, optimizing loops, performing DOM changes off-document to reduce reflows, and using setTimeout() to avoid locking up the browser thread.

1 of 139
Downloaded 2,349 times
1
Writing Efficient JavaScript What makes JavaScript slow and what to do about it Nicholas C. Zakas Principal Front End Engineer, Yahoo! Velocity – June 2009
2
Who's this guy? • Principal Front End Engineer, Yahoo! Homepage • YUI Contributor • Author
3
Writing Efficient JavaScript
4
Why slow?
5
We grew up
6
Browsers didn't
7
In the Beginning
8
Now
9
What's the problem?
10
No compilation!* * Humor me for now. It'll make this easier.
11
Writing Efficient JavaScript
12
Browsers won't help your code!!!!
13
Didn't Matter Then
14
Didn't Matter Then • JavaScript used for simple form validation or image hovers • Slow Internet connections – People expected to wait • Click-and-go model • Each page contained very little code
15
Matters Now
16
Matters Now • Ajax and Web 2.0 • More JavaScript code than ever before • Fast Internet connections – People have come to expect speed • Applications that stay open for a long time – Gmail – Facebook • Download and execute more code as you interact
17
Who will help your code?
18
Writing Efficient JavaScript
19
Disclaimer What follows are graphic depictions of the parts of JavaScript that are slow. Where appropriate, the names of the offenders have been changed to protect their identities. All of the data, unless otherwise noted, is for the browsers that are being used by the majority of web users right now, in 2009. The techniques presented herein will remain valid at least for the next 2-3 years. None of the techniques will have to be reversed once browsers with super powers are the norm and handle all optimizations for us. You should not take the techniques addressed in this presentation as things you should do all of the time. Measure your performance first, find the bottlenecks, then apply the appropriate techniques to help your specific bottlenecks. Premature optimization is fruitless and should be avoided at all costs.
20
JavaScript Performance Issues • Scope management • Data access • Loops • DOM • Browser limits
21
Writing Efficient JavaScript
22
Scope Chains
23
When a Function Executes • An execution context is created • The context's scope chain is initialized with the members of the function's [[Scope]] collection • An activation object is created containing all local variables • The activation object is pushed to the front of the context's scope chain
24
Execution Context Identifier Resolution • Start at scope chain position 0 • If not found go to position 1 • Rinse, repeat
25
Identifier Resolution • Local variables = fast! • The further into the chain, the slower the resolution
26
Identifier Resolution (Reads) 200 180 160 140 Firefox 3 Time (ms) per 200,000 reads Firefox 3.5 Beta 4 120 Chrome 1 Chrome 2 Internet Explorer 7 100 Internet Explorer 8 Opera 9.64 80 Opera 10 Beta Safari 3.2 Safari 4 60 40 20 0 1 2 3 4 5 6 Identifier Depth
27
Identifer Resolution (Writes) 200 180 160 140 Firefox 3 Time (ms) per 200,000 writes Firefox 3.5 Beta 4 120 Chrome 1 Chrome 2 Internet Explorer 7 100 Internet Explorer 8 Opera 9.64 80 Opera 10 Beta Safari 3.2 Safari 4 60 40 20 0 1 2 3 4 5 6 Identifier Depth
28
Scope Chain Augmentation • The with statement • The catch clause of try-catch • Both add an object to the front of the scope chain
29
Inside of Global Function
30
Inside of with/catch Statement • Local variables now in second slot • with/catch variables now in first slot
31
“with statement considered harmful” -Douglas Crockford
32
Closures • The [[Scope]] property of closures begins with at least two objects • Calling the closure means three objects in the scope chain (minimum)
33
Writing Efficient JavaScript
34
Closures
35
Inside of Closure
36
Recommendations • Store out-of-scope variables in local variables – Especially global variables • Avoid the with statement – Adds another object to the scope chain, so local function variables are now one step away – Use local variables instead • Be careful with try-catch – The catch clause also augments the scope chain • Use closures sparingly • Don't forget var when declaring variables
37
Writing Efficient JavaScript
38
JavaScript Performance Issues • Scope management • Data access • Loops • DOM • Browser limits
39
Places to Access Data • Literal value • Variable • Object property • Array item
40
Data Access Performance • Accessing data from a literal or a local variable is fastest – The difference between literal and local variable is negligible in most cases • Accessing data from an object property or array item is more expensive – Which is more expensive depends on the browser
41
Data Access 100 90 80 70 Time (ms) per 200,000 reads 60 Literal Local Variable 50 Array Item Object Property 40 30 20 10 0 Firefox 3 Firefox 3.5 Chrome 1 Chrome 2 Internet Internet Opera 9.64 Opera 10 Safari 3.2 Safari 4 Beta 4 Explorer 7 Explorer 8 Beta
42
Property Depth • object.name < object.name.name • The deeper the property, the longer it takes to retrieve
43
Property Depth (Reads) 250 200 Firefox 3 Time (ms) per 200,000 reads Firefox 3.5 Beta 4 150 Chrome 1 Chrome 2 Internet Explorer 7 Internet Explorer 8 Opera 9.64 100 Opera 10 Beta Safari 3.2 Safari 4 50 0 1 2 3 4 Property Depth
44
Property Notation • Difference between object.name and object[“name”]? – Generally no – Exception: Dot notation is faster in Safari
45
Recommendations • Store these in a local variable: – Any object property accessed more than once – Any array item accessed more than once • Minimize deep object property/array item lookup
46
Writing Efficient JavaScript
47
-5% -10% -33%
48
JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
49
Loops • ECMA-262, 3rd Edition: – for – for-in – do-while – while • ECMA-357, 2nd Edition: – for each
50
Writing Efficient JavaScript
51
Which loop?
52
It doesn't matter!
53
What Does Matter? • Amount of work done per iteration – Includes terminal condition evaluation and incrementing/decrementing • Number of iterations • These don't vary by loop type
54
Fixing Loops • Decrease amount of work per iteration • Decrease number of iterations
55
Writing Efficient JavaScript
56
Writing Efficient JavaScript
57
Writing Efficient JavaScript
58
Easy Fixes • Eliminate object property/array item lookups
59
Writing Efficient JavaScript
60
Easy Fixes • Eliminate object property/array item lookups • Combine control condition and control variable change – Work avoidance!
61
Two evaluations: j < len j < len == true
62
One evaluation j-- == true -50%
63
Easy Fixes • Eliminate object property/array item lookups • Combine control condition and control variable change – Work avoidance!
64
Things to Avoid for Speed • ECMA-262, 3rd Edition: – for-in nd • ECMA-357, 2 Edition: – for each • ECMA-262, 5th Edition: – array.forEach() • Function-based iteration: – jQuery.each() – Y.each() – $each – Enumerable.each()
65
• Introduces additional function • Function requires execution (execution context created, destroyed) • Function also creates additional object in scope chain 8x
66
JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
67
DOM
68
HTMLCollection
69
HTMLCollection Objects • document.images, document.forms, etc. • getElementsByTagName() • getElementsByClassName()
70
Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
71
Infinite Loop!
72
HTMLCollection Objects • Look like arrays, but aren't – Bracket notation – length property • Represent the results of a specific query • The query is re-run each time the object is accessed – Include accessing length and specific items – Much slower than accessing the same on arrays – Exceptions: Opera, Safari
73
15x 53x 68x
74
= = =
75
HTMLCollection Objects • Minimize property access – Store length, items in local variables if used frequently • If you need to access items in order frequently, copy into a regular array
76
function array(items){ try { return Array.prototype.slice.call(items); } catch (ex){ var i = 0, len = items.length, result = Array(len); while (i < len){ result[i] = items[i]; i++; } } return result; }
77
Repaint & Reflow
78
Repaint...is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. - Mark 'Tarquin' Wilton-Jones, Opera
79
When Repaint? • Change to visibility • Formatting styles changed – Backgrounds – Borders – Colors – Anything that doesn't change the size, shape, or position of the element but does change its appearance • When a reflow occurs
80
Reflow is the process by which the geometry of the layout engine's formatting objects are computed. - Chris Waterson, Mozilla
81
When Reflow? • Initial page load • Browser window resize • DOM nodes added or removed • Layout styles applied • Layout information retrieved
82
Addressing Repaint & Reflow • Perform DOM changes off-document • Groups style changes • Cache retrieved layout information
83
Reflow!
84
Off-Document Operations • Fast because there's no repaint/reflow • Techniques: – Remove element from the document, make changes, insert back into document – Set element's display to “none”, make changes, set display back to default – Build up DOM changes on a DocumentFragment then apply all at once
85
DocumentFragment • A document-like object • Not visually represented • Considered to be owned by the document from which it was created • When passed to appendChild(), appends all of its children rather than itself
86
No reflow! Reflow!
87
Addressing Repaint & Reflow • Perform DOM changes off-document • Group style changes • Cache retrieved layout information
88
Repaint! Reflow! Reflow! Repaint!
89
What to do? • Minimize changes on style property • Define CSS class with all changes and just change className property • Set cssText on the element directly
90
Reflow!
91
Reflow!
92
Addressing Repaint & Reflow • Perform DOM changes off-document • Group style changes • Cache retrieved layout information – Reflow may be cached
93
Reflow? Reflow? Reflow?
94
What to do? • Minimize access to layout information • If a value is used more than once, store in local variable
95
Speed Up Your DOM • Be careful using HTMLCollection objects • Perform DOM manipulations off the document • Group CSS changes to minimize repaint/reflow • Be careful when accessing layout information
96
JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
97
Call Stack Runaway Timer
98
Call Stack • Controls how many functions can be executed in a single process • Varies depending on browser and JavaScript engine • Errors occur when call stack size is exceeded
99
Note: Internet Explorer changes call stack size based on available memory
100
Call Stack Overflow • Error messages – IE: “Stack overflow at line x” – Firefox: “Too much recursion” – Safari: “Maximum call stack size exceeded.” – Opera: “Abort (control stack overflow)” – Chrome: n/a • Browsers throw a regular JavaScript error when this occurs – Exception: Opera just aborts the script
101
Runaway Script Timer • Designed to prevent the browser from affecting the operating system • Limits the amount of time a script is allowed to execute • Two types of limits: – Execution time – Number of statements • Always pops up a scary dialog to the user • Exception: Opera has no runaway timer
102
Internet Explorer
103
Firefox
104
Safari
105
Chrome
106
Runaway Script Timer Limits • Internet Explorer: 5 million statements • Firefox: 10 seconds • Safari: 5 seconds • Chrome: Unknown, hooks into normal crash control mechanism • Opera: none
107
The Browser UI Thread • Shared between JavaScript and UI updates • Only one can happen at a time • Page UI frozen while JavaScript is executing • A queue of actions is kept containing what to do next
108
Browser Limit Causes • Too much DOM interaction – Repaint & reflow • Too much recursion • Long-running loops
109
Writing Efficient JavaScript
110
Recursion Pattern #1
111
Recursion Pattern #2
112
Recursion Solutions • Iteration
113
Writing Efficient JavaScript
114
Writing Efficient JavaScript
115
Recursion Solutions • Iteration • Memoization
116
Writing Efficient JavaScript
117
Writing Efficient JavaScript
118
Writing Efficient JavaScript
119
Browser Limit Causes • Too much DOM interaction – Repaint & reflow • Too much recursion • Long-running loops – Too much per iteration – Too many iterations – Lock up the browser UI
120
setTimeout() • Schedules a task to be added to the UI queue later • Can be used to yield the UI thread • Timer functions begin with a new call stack • Extremely useful for avoiding browser limits
121
Loops galore!
122
Just do one pass Defer the rest
123
Writing Efficient JavaScript
124
Avoiding Browser Limits • Mind your DOM – Limit repaint/reflow • Mind your recursion – Consider iteration or memoization • Mind your loops – Keep small, sprinkle setTimeout() liberally if needed
125
Will it be like this forever?
126
No
127
Browsers With Optimizing Engines • Chrome (V8) • Safari 4+ (Nitro) • Firefox 3.5+ (TraceMonkey) • Opera 10? 11? (Carakan) All use native code generation and JIT compiling to achieve faster JavaScript execution.
128
Summary
129
Writing Efficient JavaScript
130
Writing Efficient JavaScript
131
Writing Efficient JavaScript
132
Writing Efficient JavaScript
133
Writing Efficient JavaScript
134
Writing Efficient JavaScript
135
Writing Efficient JavaScript
136
Writing Efficient JavaScript
137
Questions?
138
Etcetera • My blog: www.nczonline.net • My email: nzakas@yahoo-inc.com • Twitter: @slicknet
139
Creative Commons Images Used • http://www.flickr.com/photos/neogabox/3367815587/ • http://www.flickr.com/photos/lydz/3355198458/ • http://www.flickr.com/photos/37287477@N00/515178157/ • http://www.flickr.com/photos/ottoman42/455242/ • http://www.flickr.com/photos/hippie/2406411610/ • http://www.flickr.com/photos/flightsaber/2204113449/ • http://www.flickr.com/photos/crumbs/2702429363/ • http://www.flickr.com/photos/oberazzi/318947873/ • http://www.flickr.com/photos/vox_efx/2912195591/ • http://www.flickr.com/photos/fornal/385054886/ • http://www.flickr.com/photos/29505605@N08/3198765320/ • http://www.flickr.com/photos/torley/2361164281/ • http://www.flickr.com/photos/rwp-roger/171490824/
Writing Efficient JavaScript What makes JavaScript slow and what to do about it Nicholas C. Zakas Principal Front End Engineer, Yahoo! Velocity – June 2009
Who's this guy? • Principal Front End Engineer, Yahoo! Homepage • YUI Contributor • Author
Writing Efficient JavaScript
Why slow?
We grew up
Browsers didn't
In the Beginning
Now
What's the problem?
No compilation!* * Humor me for now. It'll make this easier.
Writing Efficient JavaScript
Browsers won't help your code!!!!
Didn't Matter Then
Didn't Matter Then • JavaScript used for simple form validation or image hovers • Slow Internet connections – People expected to wait • Click-and-go model • Each page contained very little code
Matters Now
Matters Now • Ajax and Web 2.0 • More JavaScript code than ever before • Fast Internet connections – People have come to expect speed • Applications that stay open for a long time – Gmail – Facebook • Download and execute more code as you interact
Who will help your code?
Writing Efficient JavaScript
Disclaimer What follows are graphic depictions of the parts of JavaScript that are slow. Where appropriate, the names of the offenders have been changed to protect their identities. All of the data, unless otherwise noted, is for the browsers that are being used by the majority of web users right now, in 2009. The techniques presented herein will remain valid at least for the next 2-3 years. None of the techniques will have to be reversed once browsers with super powers are the norm and handle all optimizations for us. You should not take the techniques addressed in this presentation as things you should do all of the time. Measure your performance first, find the bottlenecks, then apply the appropriate techniques to help your specific bottlenecks. Premature optimization is fruitless and should be avoided at all costs.
JavaScript Performance Issues • Scope management • Data access • Loops • DOM • Browser limits
Writing Efficient JavaScript
Scope Chains
When a Function Executes • An execution context is created • The context's scope chain is initialized with the members of the function's [[Scope]] collection • An activation object is created containing all local variables • The activation object is pushed to the front of the context's scope chain
Execution Context Identifier Resolution • Start at scope chain position 0 • If not found go to position 1 • Rinse, repeat
Identifier Resolution • Local variables = fast! • The further into the chain, the slower the resolution
Identifier Resolution (Reads) 200 180 160 140 Firefox 3 Time (ms) per 200,000 reads Firefox 3.5 Beta 4 120 Chrome 1 Chrome 2 Internet Explorer 7 100 Internet Explorer 8 Opera 9.64 80 Opera 10 Beta Safari 3.2 Safari 4 60 40 20 0 1 2 3 4 5 6 Identifier Depth
Identifer Resolution (Writes) 200 180 160 140 Firefox 3 Time (ms) per 200,000 writes Firefox 3.5 Beta 4 120 Chrome 1 Chrome 2 Internet Explorer 7 100 Internet Explorer 8 Opera 9.64 80 Opera 10 Beta Safari 3.2 Safari 4 60 40 20 0 1 2 3 4 5 6 Identifier Depth
Scope Chain Augmentation • The with statement • The catch clause of try-catch • Both add an object to the front of the scope chain
Inside of Global Function
Inside of with/catch Statement • Local variables now in second slot • with/catch variables now in first slot
“with statement considered harmful” -Douglas Crockford
Closures • The [[Scope]] property of closures begins with at least two objects • Calling the closure means three objects in the scope chain (minimum)
Writing Efficient JavaScript
Closures
Inside of Closure
Recommendations • Store out-of-scope variables in local variables – Especially global variables • Avoid the with statement – Adds another object to the scope chain, so local function variables are now one step away – Use local variables instead • Be careful with try-catch – The catch clause also augments the scope chain • Use closures sparingly • Don't forget var when declaring variables
Writing Efficient JavaScript
JavaScript Performance Issues • Scope management • Data access • Loops • DOM • Browser limits
Places to Access Data • Literal value • Variable • Object property • Array item
Data Access Performance • Accessing data from a literal or a local variable is fastest – The difference between literal and local variable is negligible in most cases • Accessing data from an object property or array item is more expensive – Which is more expensive depends on the browser
Data Access 100 90 80 70 Time (ms) per 200,000 reads 60 Literal Local Variable 50 Array Item Object Property 40 30 20 10 0 Firefox 3 Firefox 3.5 Chrome 1 Chrome 2 Internet Internet Opera 9.64 Opera 10 Safari 3.2 Safari 4 Beta 4 Explorer 7 Explorer 8 Beta
Property Depth • object.name < object.name.name • The deeper the property, the longer it takes to retrieve
Property Depth (Reads) 250 200 Firefox 3 Time (ms) per 200,000 reads Firefox 3.5 Beta 4 150 Chrome 1 Chrome 2 Internet Explorer 7 Internet Explorer 8 Opera 9.64 100 Opera 10 Beta Safari 3.2 Safari 4 50 0 1 2 3 4 Property Depth
Property Notation • Difference between object.name and object[“name”]? – Generally no – Exception: Dot notation is faster in Safari
Recommendations • Store these in a local variable: – Any object property accessed more than once – Any array item accessed more than once • Minimize deep object property/array item lookup
Writing Efficient JavaScript
-5% -10% -33%
JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
Loops • ECMA-262, 3rd Edition: – for – for-in – do-while – while • ECMA-357, 2nd Edition: – for each
Writing Efficient JavaScript
Which loop?
It doesn't matter!
What Does Matter? • Amount of work done per iteration – Includes terminal condition evaluation and incrementing/decrementing • Number of iterations • These don't vary by loop type
Fixing Loops • Decrease amount of work per iteration • Decrease number of iterations
Writing Efficient JavaScript
Writing Efficient JavaScript
Writing Efficient JavaScript
Easy Fixes • Eliminate object property/array item lookups
Writing Efficient JavaScript
Easy Fixes • Eliminate object property/array item lookups • Combine control condition and control variable change – Work avoidance!
Two evaluations: j < len j < len == true
One evaluation j-- == true -50%
Easy Fixes • Eliminate object property/array item lookups • Combine control condition and control variable change – Work avoidance!
Things to Avoid for Speed • ECMA-262, 3rd Edition: – for-in nd • ECMA-357, 2 Edition: – for each • ECMA-262, 5th Edition: – array.forEach() • Function-based iteration: – jQuery.each() – Y.each() – $each – Enumerable.each()
• Introduces additional function • Function requires execution (execution context created, destroyed) • Function also creates additional object in scope chain 8x
JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
DOM
HTMLCollection
HTMLCollection Objects • document.images, document.forms, etc. • getElementsByTagName() • getElementsByClassName()
Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
Infinite Loop!
HTMLCollection Objects • Look like arrays, but aren't – Bracket notation – length property • Represent the results of a specific query • The query is re-run each time the object is accessed – Include accessing length and specific items – Much slower than accessing the same on arrays – Exceptions: Opera, Safari
15x 53x 68x
= = =
HTMLCollection Objects • Minimize property access – Store length, items in local variables if used frequently • If you need to access items in order frequently, copy into a regular array
function array(items){ try { return Array.prototype.slice.call(items); } catch (ex){ var i = 0, len = items.length, result = Array(len); while (i < len){ result[i] = items[i]; i++; } } return result; }
Repaint & Reflow
Repaint...is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. - Mark 'Tarquin' Wilton-Jones, Opera
When Repaint? • Change to visibility • Formatting styles changed – Backgrounds – Borders – Colors – Anything that doesn't change the size, shape, or position of the element but does change its appearance • When a reflow occurs
Reflow is the process by which the geometry of the layout engine's formatting objects are computed. - Chris Waterson, Mozilla
When Reflow? • Initial page load • Browser window resize • DOM nodes added or removed • Layout styles applied • Layout information retrieved
Addressing Repaint & Reflow • Perform DOM changes off-document • Groups style changes • Cache retrieved layout information
Reflow!
Off-Document Operations • Fast because there's no repaint/reflow • Techniques: – Remove element from the document, make changes, insert back into document – Set element's display to “none”, make changes, set display back to default – Build up DOM changes on a DocumentFragment then apply all at once
DocumentFragment • A document-like object • Not visually represented • Considered to be owned by the document from which it was created • When passed to appendChild(), appends all of its children rather than itself
No reflow! Reflow!
Addressing Repaint & Reflow • Perform DOM changes off-document • Group style changes • Cache retrieved layout information
Repaint! Reflow! Reflow! Repaint!
What to do? • Minimize changes on style property • Define CSS class with all changes and just change className property • Set cssText on the element directly
Reflow!
Reflow!
Addressing Repaint & Reflow • Perform DOM changes off-document • Group style changes • Cache retrieved layout information – Reflow may be cached
Reflow? Reflow? Reflow?
What to do? • Minimize access to layout information • If a value is used more than once, store in local variable
Speed Up Your DOM • Be careful using HTMLCollection objects • Perform DOM manipulations off the document • Group CSS changes to minimize repaint/reflow • Be careful when accessing layout information
JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
Call Stack Runaway Timer
Call Stack • Controls how many functions can be executed in a single process • Varies depending on browser and JavaScript engine • Errors occur when call stack size is exceeded
Note: Internet Explorer changes call stack size based on available memory
Call Stack Overflow • Error messages – IE: “Stack overflow at line x” – Firefox: “Too much recursion” – Safari: “Maximum call stack size exceeded.” – Opera: “Abort (control stack overflow)” – Chrome: n/a • Browsers throw a regular JavaScript error when this occurs – Exception: Opera just aborts the script
Runaway Script Timer • Designed to prevent the browser from affecting the operating system • Limits the amount of time a script is allowed to execute • Two types of limits: – Execution time – Number of statements • Always pops up a scary dialog to the user • Exception: Opera has no runaway timer
Internet Explorer
Firefox
Safari
Chrome
Runaway Script Timer Limits • Internet Explorer: 5 million statements • Firefox: 10 seconds • Safari: 5 seconds • Chrome: Unknown, hooks into normal crash control mechanism • Opera: none
The Browser UI Thread • Shared between JavaScript and UI updates • Only one can happen at a time • Page UI frozen while JavaScript is executing • A queue of actions is kept containing what to do next
Browser Limit Causes • Too much DOM interaction – Repaint & reflow • Too much recursion • Long-running loops
Writing Efficient JavaScript
Recursion Pattern #1
Recursion Pattern #2
Recursion Solutions • Iteration
Writing Efficient JavaScript
Writing Efficient JavaScript
Recursion Solutions • Iteration • Memoization
Writing Efficient JavaScript
Writing Efficient JavaScript
Writing Efficient JavaScript
Browser Limit Causes • Too much DOM interaction – Repaint & reflow • Too much recursion • Long-running loops – Too much per iteration – Too many iterations – Lock up the browser UI
setTimeout() • Schedules a task to be added to the UI queue later • Can be used to yield the UI thread • Timer functions begin with a new call stack • Extremely useful for avoiding browser limits
Loops galore!
Just do one pass Defer the rest
Writing Efficient JavaScript
Avoiding Browser Limits • Mind your DOM – Limit repaint/reflow • Mind your recursion – Consider iteration or memoization • Mind your loops – Keep small, sprinkle setTimeout() liberally if needed
Will it be like this forever?
No
Browsers With Optimizing Engines • Chrome (V8) • Safari 4+ (Nitro) • Firefox 3.5+ (TraceMonkey) • Opera 10? 11? (Carakan) All use native code generation and JIT compiling to achieve faster JavaScript execution.
Summary
Writing Efficient JavaScript
Writing Efficient JavaScript
Writing Efficient JavaScript
Writing Efficient JavaScript
Writing Efficient JavaScript
Writing Efficient JavaScript
Writing Efficient JavaScript
Writing Efficient JavaScript
Questions?
Etcetera • My blog: www.nczonline.net • My email: nzakas@yahoo-inc.com • Twitter: @slicknet
Creative Commons Images Used • http://www.flickr.com/photos/neogabox/3367815587/ • http://www.flickr.com/photos/lydz/3355198458/ • http://www.flickr.com/photos/37287477@N00/515178157/ • http://www.flickr.com/photos/ottoman42/455242/ • http://www.flickr.com/photos/hippie/2406411610/ • http://www.flickr.com/photos/flightsaber/2204113449/ • http://www.flickr.com/photos/crumbs/2702429363/ • http://www.flickr.com/photos/oberazzi/318947873/ • http://www.flickr.com/photos/vox_efx/2912195591/ • http://www.flickr.com/photos/fornal/385054886/ • http://www.flickr.com/photos/29505605@N08/3198765320/ • http://www.flickr.com/photos/torley/2361164281/ • http://www.flickr.com/photos/rwp-roger/171490824/
Ad

Recommended

Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
Nicholas Zakas
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
Nicholas Zakas
 
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)Enterprise JavaScript Error Handling (Ajax Experience 2008)
Enterprise JavaScript Error Handling (Ajax Experience 2008)
Nicholas Zakas
 
Angular
AngularAngular
Angular
Mouad EL Fakir
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
Nicholas Zakas
 
Docker
DockerDocker
Docker
SangtongPeesing
 
Flutter
FlutterFlutter
Flutter
shreyash singh
 
Angular
AngularAngular
Angular
sridhiya
 
Flutter vs React Native Development in 2020
Flutter vs React Native Development in 2020Flutter vs React Native Development in 2020
Flutter vs React Native Development in 2020
Devathon
 
Laravel Tutorial PPT
Laravel Tutorial PPTLaravel Tutorial PPT
Laravel Tutorial PPT
Piyush Aggarwal
 
Dockerfile
Dockerfile Dockerfile
Dockerfile
Jeffrey Ellin
 
Agile & Secure SDLC
Agile & Secure SDLCAgile & Secure SDLC
Agile & Secure SDLC
Paul Yang
 
A brief study on Kubernetes and its components
A brief study on Kubernetes and its componentsA brief study on Kubernetes and its components
A brief study on Kubernetes and its components
Ramit Surana
 
laravel.pptx
laravel.pptxlaravel.pptx
laravel.pptx
asif290119
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
Ilia Idakiev
 
Angular 10 course_content
Angular 10 course_contentAngular 10 course_content
Angular 10 course_content
NAVEENSAGGAM1
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
Crampete
 
React-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle Methods
ANKUSH CHAVAN
 
Express js
Express jsExpress js
Express js
Manav Prasad
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutter
Ahmed Abu Eldahab
 
Docker introduction
Docker introductionDocker introduction
Docker introduction
Phuc Nguyen
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Important React Hooks
Important React HooksImportant React Hooks
Important React Hooks
Knoldus Inc.
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .
 
Laravel - The PHP Framework for Web Artisans
Laravel - The PHP Framework for Web ArtisansLaravel - The PHP Framework for Web Artisans
Laravel - The PHP Framework for Web Artisans
Windzoon Technologies
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker Introduction
Jeffrey Ellin
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker Introduction
Peng Xiao
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
WebStackAcademy
 
Javascript Best Practices
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
Christian Heilmann
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas
 

More Related Content

What's hot (20)

Flutter vs React Native Development in 2020
Flutter vs React Native Development in 2020Flutter vs React Native Development in 2020
Flutter vs React Native Development in 2020
Devathon
 
Laravel Tutorial PPT
Laravel Tutorial PPTLaravel Tutorial PPT
Laravel Tutorial PPT
Piyush Aggarwal
 
Dockerfile
Dockerfile Dockerfile
Dockerfile
Jeffrey Ellin
 
Agile & Secure SDLC
Agile & Secure SDLCAgile & Secure SDLC
Agile & Secure SDLC
Paul Yang
 
A brief study on Kubernetes and its components
A brief study on Kubernetes and its componentsA brief study on Kubernetes and its components
A brief study on Kubernetes and its components
Ramit Surana
 
laravel.pptx
laravel.pptxlaravel.pptx
laravel.pptx
asif290119
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
Ilia Idakiev
 
Angular 10 course_content
Angular 10 course_contentAngular 10 course_content
Angular 10 course_content
NAVEENSAGGAM1
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
Crampete
 
React-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle Methods
ANKUSH CHAVAN
 
Express js
Express jsExpress js
Express js
Manav Prasad
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutter
Ahmed Abu Eldahab
 
Docker introduction
Docker introductionDocker introduction
Docker introduction
Phuc Nguyen
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Important React Hooks
Important React HooksImportant React Hooks
Important React Hooks
Knoldus Inc.
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .
 
Laravel - The PHP Framework for Web Artisans
Laravel - The PHP Framework for Web ArtisansLaravel - The PHP Framework for Web Artisans
Laravel - The PHP Framework for Web Artisans
Windzoon Technologies
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker Introduction
Jeffrey Ellin
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker Introduction
Peng Xiao
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
WebStackAcademy
 
Flutter vs React Native Development in 2020
Flutter vs React Native Development in 2020Flutter vs React Native Development in 2020
Flutter vs React Native Development in 2020
Devathon
 
Laravel Tutorial PPT
Laravel Tutorial PPTLaravel Tutorial PPT
Laravel Tutorial PPT
Piyush Aggarwal
 
Dockerfile
Dockerfile Dockerfile
Dockerfile
Jeffrey Ellin
 
Agile & Secure SDLC
Agile & Secure SDLCAgile & Secure SDLC
Agile & Secure SDLC
Paul Yang
 
A brief study on Kubernetes and its components
A brief study on Kubernetes and its componentsA brief study on Kubernetes and its components
A brief study on Kubernetes and its components
Ramit Surana
 
laravel.pptx
laravel.pptxlaravel.pptx
laravel.pptx
asif290119
 
Web Components Everywhere
Web Components EverywhereWeb Components Everywhere
Web Components Everywhere
Ilia Idakiev
 
Angular 10 course_content
Angular 10 course_contentAngular 10 course_content
Angular 10 course_content
NAVEENSAGGAM1
 
Full stack web development
Full stack web developmentFull stack web development
Full stack web development
Crampete
 
React-JS Component Life-cycle Methods
React-JS Component Life-cycle MethodsReact-JS Component Life-cycle Methods
React-JS Component Life-cycle Methods
ANKUSH CHAVAN
 
Express js
Express jsExpress js
Express js
Manav Prasad
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutter
Ahmed Abu Eldahab
 
Docker introduction
Docker introductionDocker introduction
Docker introduction
Phuc Nguyen
 
Angular 9
Angular 9 Angular 9
Angular 9
Raja Vishnu
 
Important React Hooks
Important React HooksImportant React Hooks
Important React Hooks
Knoldus Inc.
 
Introduction to react_js
Introduction to react_jsIntroduction to react_js
Introduction to react_js
MicroPyramid .
 
Laravel - The PHP Framework for Web Artisans
Laravel - The PHP Framework for Web ArtisansLaravel - The PHP Framework for Web Artisans
Laravel - The PHP Framework for Web Artisans
Windzoon Technologies
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker Introduction
Jeffrey Ellin
 
Docker Introduction
Docker IntroductionDocker Introduction
Docker Introduction
Peng Xiao
 
Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming Angular - Chapter 2 - TypeScript Programming
Angular - Chapter 2 - TypeScript Programming
WebStackAcademy
 

Viewers also liked (20)

Javascript Best Practices
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
Christian Heilmann
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
Sehwan Noh
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQueryUnobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuery
Simon Willison
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
jeresig
 
Javascript
JavascriptJavascript
Javascript
Sun Technlogies
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
Remy Sharp
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
Nicholas Zakas
 
Satellite communications ppt
Satellite communications pptSatellite communications ppt
Satellite communications ppt
Niranjan kumar
 
Work with my sql database in java
Work with my sql database in javaWork with my sql database in java
Work with my sql database in java
Asya Dudnik
 
Computer Vision
Computer Vision Computer Vision
Computer Vision
Inman News
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
Nicholas Zakas
 
JavaScript in the Real World
JavaScript in the Real WorldJavaScript in the Real World
JavaScript in the Real World
Andrew Nesbitt
 
An overview of java script in 2015 (ecma script 6)
An overview of java script in 2015 (ecma script 6)An overview of java script in 2015 (ecma script 6)
An overview of java script in 2015 (ecma script 6)
LearningTech
 
Aspnet mvc4
Aspnet mvc4Aspnet mvc4
Aspnet mvc4
LearningTech
 
Il Diritto d'autore ad uso dei blogger. Le slide della seconda lezione
Il Diritto d'autore ad uso dei blogger. Le slide della seconda lezioneIl Diritto d'autore ad uso dei blogger. Le slide della seconda lezione
Il Diritto d'autore ad uso dei blogger. Le slide della seconda lezione
Elena Trombetta
 
Building Sexy User Interfaces in Servoy
Building Sexy User Interfaces in ServoyBuilding Sexy User Interfaces in Servoy
Building Sexy User Interfaces in Servoy
Thomas Immich
 
Financial Workshop Internet
Financial Workshop InternetFinancial Workshop Internet
Financial Workshop Internet
Josh (Tzvika) Avnery
 
Javascript Best Practices
Javascript Best PracticesJavascript Best Practices
Javascript Best Practices
Christian Heilmann
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
Nicholas Zakas
 
JavaScript Programming
JavaScript ProgrammingJavaScript Programming
JavaScript Programming
Sehwan Noh
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQueryUnobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuery
Simon Willison
 
JavaScript Library Overview
JavaScript Library OverviewJavaScript Library Overview
JavaScript Library Overview
jeresig
 
Javascript
JavascriptJavascript
Javascript
Sun Technlogies
 
HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
Remy Sharp
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)JavaScript APIs you’ve never heard of (and some you have)
JavaScript APIs you’ve never heard of (and some you have)
Nicholas Zakas
 
Satellite communications ppt
Satellite communications pptSatellite communications ppt
Satellite communications ppt
Niranjan kumar
 
Work with my sql database in java
Work with my sql database in javaWork with my sql database in java
Work with my sql database in java
Asya Dudnik
 
Computer Vision
Computer Vision Computer Vision
Computer Vision
Inman News
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
Nicholas Zakas
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
Nicholas Zakas
 
JavaScript in the Real World
JavaScript in the Real WorldJavaScript in the Real World
JavaScript in the Real World
Andrew Nesbitt
 
An overview of java script in 2015 (ecma script 6)
An overview of java script in 2015 (ecma script 6)An overview of java script in 2015 (ecma script 6)
An overview of java script in 2015 (ecma script 6)
LearningTech
 
Aspnet mvc4
Aspnet mvc4Aspnet mvc4
Aspnet mvc4
LearningTech
 
Il Diritto d'autore ad uso dei blogger. Le slide della seconda lezione
Il Diritto d'autore ad uso dei blogger. Le slide della seconda lezioneIl Diritto d'autore ad uso dei blogger. Le slide della seconda lezione
Il Diritto d'autore ad uso dei blogger. Le slide della seconda lezione
Elena Trombetta
 
Building Sexy User Interfaces in Servoy
Building Sexy User Interfaces in ServoyBuilding Sexy User Interfaces in Servoy
Building Sexy User Interfaces in Servoy
Thomas Immich
 
Financial Workshop Internet
Financial Workshop InternetFinancial Workshop Internet
Financial Workshop Internet
Josh (Tzvika) Avnery
 
Ad

Similar to Writing Efficient JavaScript (20)

JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
Nicholas Zakas
 
Firefox 3.5 Overview
Firefox 3.5 OverviewFirefox 3.5 Overview
Firefox 3.5 Overview
Wichai Termwuttipreecha
 
Firefox 3.1 in 3.1 minutes
Firefox 3.1 in 3.1 minutesFirefox 3.1 in 3.1 minutes
Firefox 3.1 in 3.1 minutes
Thomas Bassetto
 
Fosdem 13: Pharo 2.0 update
Fosdem 13: Pharo 2.0 updateFosdem 13: Pharo 2.0 update
Fosdem 13: Pharo 2.0 update
Marcus Denker
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
mihaiionescu
 
Performance Of Web Applications On Client Machines
Performance Of Web Applications On Client MachinesPerformance Of Web Applications On Client Machines
Performance Of Web Applications On Client Machines
Curelet Marius
 
[E4]triple s deview
[E4]triple s deview[E4]triple s deview
[E4]triple s deview
NAVER D2
 
Pharo Status ESUG 2014
Pharo Status ESUG 2014Pharo Status ESUG 2014
Pharo Status ESUG 2014
Pharo
 
TWaver Flex Performance Report
TWaver Flex Performance ReportTWaver Flex Performance Report
TWaver Flex Performance Report
253725291
 
วิธีการ
วิธีการวิธีการ
วิธีการ
0897169760
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101
Uri Lavi
 
Internet browsers by Andres Haydar
Internet browsers by Andres HaydarInternet browsers by Andres Haydar
Internet browsers by Andres Haydar
AndresHaydar
 
ผู้ไม่หวังดี
ผู้ไม่หวังดีผู้ไม่หวังดี
ผู้ไม่หวังดี
Papichaya Chengtong
 
ผู้ไม่หวังดี
ผู้ไม่หวังดีผู้ไม่หวังดี
ผู้ไม่หวังดี
Papichaya Chengtong
 
Trabajo de jose
Trabajo de jose Trabajo de jose
Trabajo de jose
josemgg
 
Browsers
BrowsersBrowsers
Browsers
Sebastian Lora
 
Browsers
BrowsersBrowsers
Browsers
Sebastian Lora
 
Browsers
BrowsersBrowsers
Browsers
Sebastian Lora
 
Browsers .
Browsers .Browsers .
Browsers .
seripa3
 
Toster - Understanding the Rails Web Model and Scalability Options
Toster - Understanding the Rails Web Model and Scalability OptionsToster - Understanding the Rails Web Model and Scalability Options
Toster - Understanding the Rails Web Model and Scalability Options
Fabio Akita
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
Nicholas Zakas
 
Firefox 3.5 Overview
Firefox 3.5 OverviewFirefox 3.5 Overview
Firefox 3.5 Overview
Wichai Termwuttipreecha
 
Firefox 3.1 in 3.1 minutes
Firefox 3.1 in 3.1 minutesFirefox 3.1 in 3.1 minutes
Firefox 3.1 in 3.1 minutes
Thomas Bassetto
 
Fosdem 13: Pharo 2.0 update
Fosdem 13: Pharo 2.0 updateFosdem 13: Pharo 2.0 update
Fosdem 13: Pharo 2.0 update
Marcus Denker
 
HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09HTML5 and Google Chrome - DevFest09
HTML5 and Google Chrome - DevFest09
mihaiionescu
 
Performance Of Web Applications On Client Machines
Performance Of Web Applications On Client MachinesPerformance Of Web Applications On Client Machines
Performance Of Web Applications On Client Machines
Curelet Marius
 
[E4]triple s deview
[E4]triple s deview[E4]triple s deview
[E4]triple s deview
NAVER D2
 
Pharo Status ESUG 2014
Pharo Status ESUG 2014Pharo Status ESUG 2014
Pharo Status ESUG 2014
Pharo
 
TWaver Flex Performance Report
TWaver Flex Performance ReportTWaver Flex Performance Report
TWaver Flex Performance Report
253725291
 
วิธีการ
วิธีการวิธีการ
วิธีการ
0897169760
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101
Uri Lavi
 
Internet browsers by Andres Haydar
Internet browsers by Andres HaydarInternet browsers by Andres Haydar
Internet browsers by Andres Haydar
AndresHaydar
 
ผู้ไม่หวังดี
ผู้ไม่หวังดีผู้ไม่หวังดี
ผู้ไม่หวังดี
Papichaya Chengtong
 
ผู้ไม่หวังดี
ผู้ไม่หวังดีผู้ไม่หวังดี
ผู้ไม่หวังดี
Papichaya Chengtong
 
Trabajo de jose
Trabajo de jose Trabajo de jose
Trabajo de jose
josemgg
 
Browsers
BrowsersBrowsers
Browsers
Sebastian Lora
 
Browsers
BrowsersBrowsers
Browsers
Sebastian Lora
 
Browsers
BrowsersBrowsers
Browsers
Sebastian Lora
 
Browsers .
Browsers .Browsers .
Browsers .
seripa3
 
Toster - Understanding the Rails Web Model and Scalability Options
Toster - Understanding the Rails Web Model and Scalability OptionsToster - Understanding the Rails Web Model and Scalability Options
Toster - Understanding the Rails Web Model and Scalability Options
Fabio Akita
 
Ad

More from Nicholas Zakas (20)

Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas
 
The Pointerless Web
The Pointerless WebThe Pointerless Web
The Pointerless Web
Nicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
Nicholas Zakas
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
Nicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
Nicholas Zakas
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
Nicholas Zakas
 
The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3
Nicholas Zakas
 
Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)
Nicholas Zakas
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
Nicholas Zakas
 
The Pointerless Web
The Pointerless WebThe Pointerless Web
The Pointerless Web
Nicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Nicholas Zakas
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
Nicholas Zakas
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
Nicholas Zakas
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
Nicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
Nicholas Zakas
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
Nicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010High Performance JavaScript - jQuery Conference SF Bay Area 2010
High Performance JavaScript - jQuery Conference SF Bay Area 2010
Nicholas Zakas
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
Nicholas Zakas
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
Nicholas Zakas
 
The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3The New Yahoo! Homepage and YUI 3
The New Yahoo! Homepage and YUI 3
Nicholas Zakas
 
Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)Test Driven Development With YUI Test (Ajax Experience 2008)
Test Driven Development With YUI Test (Ajax Experience 2008)
Nicholas Zakas
 

Recently uploaded (20)

June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdfHigh Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementaryMurdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdfCrypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdfvertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptxFIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdfArtificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data ResilienceFloods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven InfrastructureNo-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdfHigh Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Scaling GenAI Inference From Prototype to Production: Real-World Lessons in S...
Anish Kumar
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
Oracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI ProfessionalOracle Cloud Infrastructure Generative AI Professional
Oracle Cloud Infrastructure Generative AI Professional
VICTOR MAESTRE RAMIREZ
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementaryMurdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdfCrypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdfvertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training RoadblocksDown the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptxFIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdfArtificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data ResilienceFloods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUEIntroduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy SurveyTrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 

Writing Efficient JavaScript

  • 1. Writing Efficient JavaScript What makes JavaScript slow and what to do about it Nicholas C. Zakas Principal Front End Engineer, Yahoo! Velocity – June 2009
  • 2. Who's this guy? • Principal Front End Engineer, Yahoo! Homepage • YUI Contributor • Author
  • 8. Now
  • 10. No compilation!* * Humor me for now. It'll make this easier.
  • 14. Didn't Matter Then • JavaScript used for simple form validation or image hovers • Slow Internet connections – People expected to wait • Click-and-go model • Each page contained very little code
  • 16. Matters Now • Ajax and Web 2.0 • More JavaScript code than ever before • Fast Internet connections – People have come to expect speed • Applications that stay open for a long time – Gmail – Facebook • Download and execute more code as you interact
  • 17. Who will help your code?
  • 19. Disclaimer What follows are graphic depictions of the parts of JavaScript that are slow. Where appropriate, the names of the offenders have been changed to protect their identities. All of the data, unless otherwise noted, is for the browsers that are being used by the majority of web users right now, in 2009. The techniques presented herein will remain valid at least for the next 2-3 years. None of the techniques will have to be reversed once browsers with super powers are the norm and handle all optimizations for us. You should not take the techniques addressed in this presentation as things you should do all of the time. Measure your performance first, find the bottlenecks, then apply the appropriate techniques to help your specific bottlenecks. Premature optimization is fruitless and should be avoided at all costs.
  • 20. JavaScript Performance Issues • Scope management • Data access • Loops • DOM • Browser limits
  • 23. When a Function Executes • An execution context is created • The context's scope chain is initialized with the members of the function's [[Scope]] collection • An activation object is created containing all local variables • The activation object is pushed to the front of the context's scope chain
  • 24. Execution Context Identifier Resolution • Start at scope chain position 0 • If not found go to position 1 • Rinse, repeat
  • 25. Identifier Resolution • Local variables = fast! • The further into the chain, the slower the resolution
  • 26. Identifier Resolution (Reads) 200 180 160 140 Firefox 3 Time (ms) per 200,000 reads Firefox 3.5 Beta 4 120 Chrome 1 Chrome 2 Internet Explorer 7 100 Internet Explorer 8 Opera 9.64 80 Opera 10 Beta Safari 3.2 Safari 4 60 40 20 0 1 2 3 4 5 6 Identifier Depth
  • 27. Identifer Resolution (Writes) 200 180 160 140 Firefox 3 Time (ms) per 200,000 writes Firefox 3.5 Beta 4 120 Chrome 1 Chrome 2 Internet Explorer 7 100 Internet Explorer 8 Opera 9.64 80 Opera 10 Beta Safari 3.2 Safari 4 60 40 20 0 1 2 3 4 5 6 Identifier Depth
  • 28. Scope Chain Augmentation • The with statement • The catch clause of try-catch • Both add an object to the front of the scope chain
  • 29. Inside of Global Function
  • 30. Inside of with/catch Statement • Local variables now in second slot • with/catch variables now in first slot
  • 32. Closures • The [[Scope]] property of closures begins with at least two objects • Calling the closure means three objects in the scope chain (minimum)
  • 36. Recommendations • Store out-of-scope variables in local variables – Especially global variables • Avoid the with statement – Adds another object to the scope chain, so local function variables are now one step away – Use local variables instead • Be careful with try-catch – The catch clause also augments the scope chain • Use closures sparingly • Don't forget var when declaring variables
  • 38. JavaScript Performance Issues • Scope management • Data access • Loops • DOM • Browser limits
  • 39. Places to Access Data • Literal value • Variable • Object property • Array item
  • 40. Data Access Performance • Accessing data from a literal or a local variable is fastest – The difference between literal and local variable is negligible in most cases • Accessing data from an object property or array item is more expensive – Which is more expensive depends on the browser
  • 41. Data Access 100 90 80 70 Time (ms) per 200,000 reads 60 Literal Local Variable 50 Array Item Object Property 40 30 20 10 0 Firefox 3 Firefox 3.5 Chrome 1 Chrome 2 Internet Internet Opera 9.64 Opera 10 Safari 3.2 Safari 4 Beta 4 Explorer 7 Explorer 8 Beta
  • 42. Property Depth • object.name < object.name.name • The deeper the property, the longer it takes to retrieve
  • 43. Property Depth (Reads) 250 200 Firefox 3 Time (ms) per 200,000 reads Firefox 3.5 Beta 4 150 Chrome 1 Chrome 2 Internet Explorer 7 Internet Explorer 8 Opera 9.64 100 Opera 10 Beta Safari 3.2 Safari 4 50 0 1 2 3 4 Property Depth
  • 44. Property Notation • Difference between object.name and object[“name”]? – Generally no – Exception: Dot notation is faster in Safari
  • 45. Recommendations • Store these in a local variable: – Any object property accessed more than once – Any array item accessed more than once • Minimize deep object property/array item lookup
  • 47. -5% -10% -33%
  • 48. JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
  • 49. Loops • ECMA-262, 3rd Edition: – for – for-in – do-while – while • ECMA-357, 2nd Edition: – for each
  • 53. What Does Matter? • Amount of work done per iteration – Includes terminal condition evaluation and incrementing/decrementing • Number of iterations • These don't vary by loop type
  • 54. Fixing Loops • Decrease amount of work per iteration • Decrease number of iterations
  • 58. Easy Fixes • Eliminate object property/array item lookups
  • 60. Easy Fixes • Eliminate object property/array item lookups • Combine control condition and control variable change – Work avoidance!
  • 61. Two evaluations: j < len j < len == true
  • 63. Easy Fixes • Eliminate object property/array item lookups • Combine control condition and control variable change – Work avoidance!
  • 64. Things to Avoid for Speed • ECMA-262, 3rd Edition: – for-in nd • ECMA-357, 2 Edition: – for each • ECMA-262, 5th Edition: – array.forEach() • Function-based iteration: – jQuery.each() – Y.each() – $each – Enumerable.each()
  • 65. • Introduces additional function • Function requires execution (execution context created, destroyed) • Function also creates additional object in scope chain 8x
  • 66. JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
  • 67. DOM
  • 69. HTMLCollection Objects • document.images, document.forms, etc. • getElementsByTagName() • getElementsByClassName()
  • 70. Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
  • 72. HTMLCollection Objects • Look like arrays, but aren't – Bracket notation – length property • Represent the results of a specific query • The query is re-run each time the object is accessed – Include accessing length and specific items – Much slower than accessing the same on arrays – Exceptions: Opera, Safari
  • 73. 15x 53x 68x
  • 74. = = =
  • 75. HTMLCollection Objects • Minimize property access – Store length, items in local variables if used frequently • If you need to access items in order frequently, copy into a regular array
  • 76. function array(items){ try { return Array.prototype.slice.call(items); } catch (ex){ var i = 0, len = items.length, result = Array(len); while (i < len){ result[i] = items[i]; i++; } } return result; }
  • 78. Repaint...is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. - Mark 'Tarquin' Wilton-Jones, Opera
  • 79. When Repaint? • Change to visibility • Formatting styles changed – Backgrounds – Borders – Colors – Anything that doesn't change the size, shape, or position of the element but does change its appearance • When a reflow occurs
  • 80. Reflow is the process by which the geometry of the layout engine's formatting objects are computed. - Chris Waterson, Mozilla
  • 81. When Reflow? • Initial page load • Browser window resize • DOM nodes added or removed • Layout styles applied • Layout information retrieved
  • 82. Addressing Repaint & Reflow • Perform DOM changes off-document • Groups style changes • Cache retrieved layout information
  • 84. Off-Document Operations • Fast because there's no repaint/reflow • Techniques: – Remove element from the document, make changes, insert back into document – Set element's display to “none”, make changes, set display back to default – Build up DOM changes on a DocumentFragment then apply all at once
  • 85. DocumentFragment • A document-like object • Not visually represented • Considered to be owned by the document from which it was created • When passed to appendChild(), appends all of its children rather than itself
  • 86. No reflow! Reflow!
  • 87. Addressing Repaint & Reflow • Perform DOM changes off-document • Group style changes • Cache retrieved layout information
  • 88. Repaint! Reflow! Reflow! Repaint!
  • 89. What to do? • Minimize changes on style property • Define CSS class with all changes and just change className property • Set cssText on the element directly
  • 92. Addressing Repaint & Reflow • Perform DOM changes off-document • Group style changes • Cache retrieved layout information – Reflow may be cached
  • 93. Reflow? Reflow? Reflow?
  • 94. What to do? • Minimize access to layout information • If a value is used more than once, store in local variable
  • 95. Speed Up Your DOM • Be careful using HTMLCollection objects • Perform DOM manipulations off the document • Group CSS changes to minimize repaint/reflow • Be careful when accessing layout information
  • 96. JavaScript Performance Issues • Scope management • Data Access • Loops • DOM • Browser limits
  • 97. Call Stack Runaway Timer
  • 98. Call Stack • Controls how many functions can be executed in a single process • Varies depending on browser and JavaScript engine • Errors occur when call stack size is exceeded
  • 99. Note: Internet Explorer changes call stack size based on available memory
  • 100. Call Stack Overflow • Error messages – IE: “Stack overflow at line x” – Firefox: “Too much recursion” – Safari: “Maximum call stack size exceeded.” – Opera: “Abort (control stack overflow)” – Chrome: n/a • Browsers throw a regular JavaScript error when this occurs – Exception: Opera just aborts the script
  • 101. Runaway Script Timer • Designed to prevent the browser from affecting the operating system • Limits the amount of time a script is allowed to execute • Two types of limits: – Execution time – Number of statements • Always pops up a scary dialog to the user • Exception: Opera has no runaway timer
  • 104. Safari
  • 105. Chrome
  • 106. Runaway Script Timer Limits • Internet Explorer: 5 million statements • Firefox: 10 seconds • Safari: 5 seconds • Chrome: Unknown, hooks into normal crash control mechanism • Opera: none
  • 107. The Browser UI Thread • Shared between JavaScript and UI updates • Only one can happen at a time • Page UI frozen while JavaScript is executing • A queue of actions is kept containing what to do next
  • 108. Browser Limit Causes • Too much DOM interaction – Repaint & reflow • Too much recursion • Long-running loops
  • 119. Browser Limit Causes • Too much DOM interaction – Repaint & reflow • Too much recursion • Long-running loops – Too much per iteration – Too many iterations – Lock up the browser UI
  • 120. setTimeout() • Schedules a task to be added to the UI queue later • Can be used to yield the UI thread • Timer functions begin with a new call stack • Extremely useful for avoiding browser limits
  • 122. Just do one pass Defer the rest
  • 124. Avoiding Browser Limits • Mind your DOM – Limit repaint/reflow • Mind your recursion – Consider iteration or memoization • Mind your loops – Keep small, sprinkle setTimeout() liberally if needed
  • 125. Will it be like this forever?
  • 126. No
  • 127. Browsers With Optimizing Engines • Chrome (V8) • Safari 4+ (Nitro) • Firefox 3.5+ (TraceMonkey) • Opera 10? 11? (Carakan) All use native code generation and JIT compiling to achieve faster JavaScript execution.
  • 138. Etcetera • My blog: www.nczonline.net • My email: [email protected] • Twitter: @slicknet
  • 139. Creative Commons Images Used • http://www.flickr.com/photos/neogabox/3367815587/ • http://www.flickr.com/photos/lydz/3355198458/ • http://www.flickr.com/photos/37287477@N00/515178157/ • http://www.flickr.com/photos/ottoman42/455242/ • http://www.flickr.com/photos/hippie/2406411610/ • http://www.flickr.com/photos/flightsaber/2204113449/ • http://www.flickr.com/photos/crumbs/2702429363/ • http://www.flickr.com/photos/oberazzi/318947873/ • http://www.flickr.com/photos/vox_efx/2912195591/ • http://www.flickr.com/photos/fornal/385054886/ • http://www.flickr.com/photos/29505605@N08/3198765320/ • http://www.flickr.com/photos/torley/2361164281/ • http://www.flickr.com/photos/rwp-roger/171490824/