Nicholas Zakas, profile picture
Uploaded byNicholas Zakas
61,786 views

High Performance JavaScript (YUIConf 2010)

The document discusses high-performance JavaScript and its impact on user experience, emphasizing that both UI updates and JavaScript execution cannot occur simultaneously on the browser's UI thread. It recommends limiting JavaScript execution time to no more than 50ms to maintain responsiveness and outlines techniques to optimize loading and execution, such as placing scripts at the bottom of the page, deferring execution, and using web workers for asynchronous processing. Additionally, it highlights performance pitfalls related to repaint and reflow operations in the DOM and provides strategies to minimize their impact.

Downloaded 285 times
1 / 148
2 / 148
3 / 148
4 / 148
5 / 148
6 / 148
7 / 148
8 / 148
9 / 148
10 / 148
11 / 148
12 / 148
13 / 148
14 / 148
15 / 148
16 / 148
17 / 148
18 / 148
19 / 148
20 / 148
21 / 148
22 / 148
23 / 148
24 / 148
25 / 148
26 / 148
27 / 148
28 / 148
29 / 148
30 / 148
31 / 148
32 / 148
33 / 148
34 / 148
35 / 148
36 / 148
37 / 148
38 / 148
39 / 148
40 / 148
41 / 148
42 / 148
43 / 148
44 / 148
45 / 148
46 / 148
47 / 148
48 / 148
49 / 148
50 / 148
51 / 148
52 / 148
53 / 148
54 / 148
55 / 148
56 / 148
57 / 148
58 / 148
59 / 148
60 / 148
61 / 148
62 / 148
63 / 148
64 / 148
65 / 148
66 / 148
67 / 148
68 / 148
69 / 148
70 / 148
71 / 148
72 / 148
73 / 148
74 / 148
75 / 148
76 / 148
77 / 148
78 / 148
79 / 148
80 / 148
81 / 148
82 / 148
83 / 148
84 / 148
85 / 148
86 / 148
87 / 148
88 / 148
89 / 148
90 / 148
91 / 148
92 / 148
93 / 148
94 / 148
95 / 148
96 / 148
97 / 148
98 / 148
99 / 148
100 / 148
101 / 148
102 / 148
103 / 148
104 / 148
105 / 148
106 / 148
107 / 148
108 / 148
109 / 148
110 / 148
111 / 148
112 / 148
113 / 148
114 / 148
115 / 148
116 / 148
117 / 148
118 / 148
119 / 148
120 / 148
121 / 148
122 / 148
123 / 148
124 / 148
125 / 148
126 / 148
127 / 148
128 / 148
129 / 148
130 / 148
131 / 148
132 / 148
133 / 148
134 / 148
135 / 148
136 / 148
137 / 148
138 / 148
139 / 148
140 / 148
141 / 148
142 / 148
143 / 148
144 / 148
145 / 148
146 / 148
147 / 148
148 / 148
High Performance JavaScript Nicholas C. Zakas Yahoo!, Inc. YUIConf 2010 | November 9, 2010
Greetings, program Principal Front End Engineer Contributor, Creator of YUI Test Author Lead Author Contributor Lead Author
I know what you're thinking
Is he really going to use a Tron theme throughout this presentation?
Yes, because it's awesome
JavaScript performance directly affects user experience
"Know the enemy and know yourself; in a hundred battles you will never be in peril." -Sun Tzu, The Art of War
The UI Thread The brains of the operation
The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
Jobs for UI updates and JavaScript execution are added to a UI queue if the UI thread is busy Each job must wait in line for its turn to execute
<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ //do something }; }; </script>
Before Click UI Thread UI Queue time
When Clicked UI Thread UI Queue time onclick UI Update UI Update
When Clicked UI Thread UI Queue time onclick UI Update UI Update Draw down state
When Clicked UI Thread UI Queue time onclick UI Update UI Update
When Clicked UI Thread UI Queue time onclick UI UpdateUI Update Draw up state
No UI updates while JavaScript is executing
JavaScript May Cause UI Update <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ var div = document.createElement(“div”); div.className = “tip”; div.innerHTML = “You clicked me!”; document.body.appendChild(div); }; }; </script>
A UI update must use the latest info available
Long-running JavaScript = Unresponsive UI
Responsive UI UI Thread time JavaScript UI UpdateUI Update
Unresponsive UI UI Thread time JavaScript UI UpdateUI Update
The longer JavaScript runs, the worse the user experience
The browser vendors know this and put limits on JavaScript via the runaway script 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
Does JIT compiling help?
Interpreted JavaScript UI Thread time Interpret
JITed JavaScript (1st Run) UI Thread time Compile Execute
JITed JavaScript (After 1st Run) UI Thread time Execute
How Long Is Too Long? “0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.” - Jakob Nielsen
Translation: No single JavaScript job should execute for more than 100ms to ensure a responsive UI
Recommendation: Limit JavaScript execution to no more than 50ms measured on IE6 :)
Loadtime Techniques Don't let JavaScript interfere with page load performance
During page load, JavaScript takes more time on the UI thread
<!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script src="foo.js"></script> <p>See ya!</p> </body> </html>
Result UI Thread time JavaScript UI UpdateUI Update
Result UI Thread time foo.js See ya!Hello world!
Result UI Thread time Download See ya!Hello world! Parse Run The UI thread needs to wait for the script to download, parse, and run before continuing
Result UI Thread Download time takes the longest and is variable Variable Constant UI Thread Download See ya!Hello world! Parse Run
Translation: The page doesn't render while JavaScript is downloading, parsing, or executing during page load
<!doctype html> <html> <head> <title>Example</title> </head> <body> <script src="foo.js"></script> <p>Hello world!</p> <script src="bar.js"></script> <p>See ya!</p> <script src="baz.js"></script> <p>Uh oh!</p> </body> </html>
Result UI Thread time JavaScript UI UpdateUI Update The more scripts to download in between UI updates, the longer the page takes to render JavaScript JavaScript
Technique #1: Put scripts at the bottom
<!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <p>See ya!</p> <script src="foo.js"></script> </body> </html>
Put Scripts at Bottom UI Thread time JavaScriptUI UpdateUI Update Even if there are multiple scripts, the page renders quickly JavaScript JavaScript
Technique #2: Combine JavaScript files
<!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <p>See ya!</p> <script src="foo.js"></script> <script src="bar.js"></script> <script src="baz.js"></script> </body> </html>
UI Thread time JavaScriptUI Update Each script has overhead of downloading JavaScript JavaScript
UI Thread time JavaScriptUI Update Combining all of the files limits the network overhead and gets scripts onto the page faster
<!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <p>See ya!</p> <script src="foo-and-bar-and-baz.js"></script> </body> </html>
Technique #3: Load scripts dynamically
var script = document.createElement("script"), body; script.type = "text/javascript"; script.src = "foo.js"; body.insertBefore(script, body.firstChild); Basic Technique Dynamically loaded scripts are non-blocking
Downloads no longer block the UI thread
<!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script src="foo.js"></script> <p>See ya!</p> </body> </html>
Using HTML <script> UI Thread time Download See ya!Hello world! Parse Run
<!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script> var script = document.createElement("script"), body = document.body; script.type = "text/javascript"; script.src = "foo.js"; body.insertBefore(script, body.firstChild); </script> <p>See ya!</p><!-- more content --> </body> </html>
Using Dynamic Scripts UI Thread time Download See ya!Hello world! Parse Run Only code execution happens on the UI thread, which means less blocking of UI updates UI Update
function loadScript(url, callback){ var script = document.createElement("script"), body = document.body; script.type = "text/javascript"; if (script.readyState){ //IE <= 8 script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; body.insertBefore(script, body.firstChild); }
loadScript("foo.js", function(){ alert("Loaded!"); }); Usage
Timing Note: Script execution begins immediately after download and parse – timing of execution is not guaranteed
Using Dynamic Scripts UI Thread time Download See ya!Hello world! Parse Run Depending on time to download and script size, execution may happen before next UI update UI Update
Technique #4: Defer scripts
<!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script defer src="foo.js"></script> <p>See ya!</p> <!-- even more markup --> </body> </html>
7.07.03.53.5 5.05.0 ??4.04.0 Support for <script defer>
Deferred scripts begin to download immediately, but don't execute until all UI updates complete
Using <script defer> UI Thread time Download See ya!Hello world! Parse Run Similar to dynamic script nodes, but with a guarantee that execution will happen last More UI More UI
Timing Note: Although scripts always execute after UI updates complete, the order of multiple <script defer> scripts is not guaranteed across browsers
Technique #5: Asynchronous scripts
<!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script async src="foo.js"></script> <p>See ya!</p> <!-- even more markup --> </body> </html>
7.07.03.63.6 5.05.0 ???? Support for <script async>
Asynchronous scripts behave a lot like dynamic scripts
Using <script async> UI Thread time Download See ya!Hello world! Parse Run Download begins immediately and execution is slotted in at first available spot UI Update
Note: Order of execution is explicitly not preserved for asynchronous scripts
Runtime Techniques Ways to ensure JavaScript doesn't run away
function processArray(items, process, callback){ for (var i=0,len=items.length; i < len; i++){ process(items[i]); } callback(); }
Technique #1: Timers
//create a new timer and delay by 500ms setTimeout(function(){ //code to execute here }, 500) setTimeout() schedules a function to be added to the UI queue after a delay
function timedProcessArray(items, process, callback){ //create a clone of the original var todo = items.concat(); setTimeout(function(){ var start = +new Date(); do { process(todo.shift()); } while (todo.length > 0 && (+new Date() - start < 50)); if (todo.length > 0){ setTimeout(arguments.callee, 25); } else { callback(items); } }, 25); }
When Clicked UI Thread UI Queue time onclick UI Update UI Update
When Clicked UI Thread UI Queue time onclick UI Update UI Update
When Clicked UI Thread UI Queue time onclick UI Update UI Update
When Clicked UI Thread UI Queue time UI UpdateUI Update onclick
After 25ms UI Thread UI Queue time UI UpdateUI Update onclick JavaScript
After 25ms UI Thread UI Queue time UI UpdateUI Update onclick JavaScript
After Another 25ms UI Thread UI Queue time UI UpdateUI Update onclick JavaScript JavaScript
After Another 25ms UI Thread UI Queue time UI UpdateUI Update onclick JavaScript JavaScript
Technique #2: Web Workers
Web Workers ● Asynchronous JavaScript execution ● Execution happens outside of UI thread ● Not on the UI thread = no UI delays ● Data-driven API ● Data is serialized when sending data into or out of Worker ● No access to DOM, BOM ● Completely separate execution environment
//in page var worker = new Worker("process.js"); worker.onmessage = function(event){ useData(event.data); }; worker.postMessage(values); //in process.js self.onmessage = function(event){ var items = event.data; for (var i=0,len=items.length; i < len; i++){ process(items[i]); } self.postMessage(items); };
When Clicked UI Thread UI Queue time onclick UI Update UI Update
When Clicked UI Thread UI Queue time onclick UI Update UI Update
When Clicked UI Thread UI Queue time onclick UI Update UI Update
When Clicked UI Thread UI Queue time onclick UI Update UI Update Worker Thread
When Clicked UI Thread UI Queue time UI UpdateUI Update onclick Worker Thread JavaScript
Worker Thread Complete UI Thread UI Queue time UI UpdateUI Update onclick onmessage
Worker Thread Complete UI Thread UI Queue time UI UpdateUI Update onclick onmessage
4.04.03.53.5 4.04.0 10.610.6?? Support for Web Workers
Repaint and Reflow Hidden performance costs of common operations
Long UI updates = Unresponsive UI
Unresponsive UI UI Thread time JavaScript UI UpdateUI Update
JavaScript can cause long UI updates by triggering repaint and reflow
A repaint occurs when a visual change doesn't require recalculation of layout Changes to visibility, colors (text/background), background images, etc.
Repaint <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ this.style.color = "#ff0"; }; }; </script> Repaint!
A reflow occurs when a visual change requires a change in layout Initial page load ▪ browser resize ▪ DOM structure change ▪ layout style change layout information retrieved
Reflow <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ var div = document.createElement(“div”); div.className = “tip”; div.innerHTML = “You clicked me!”; document.body.appendChild(div); }; }; </script> Reflow!
Repaints and reflows are queued up as JavaScript executes and then executed in order
Reflow var list = document.getElementsByClassName("items")[0], i, item; for (i=0; i < 10; i++){ item = document.createElement("li"); item.innerHTML = "Item #" + i; list.appendChild(item); } Reflow x 10!
Limiting repaints/reflows improves overall performance
Technique #1 Perform DOM manipulations off-document
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
DocumentFragment var list = document.getElementsByClassName("items")[0], fragment = document.createDocumentFragment(), i, item; for (i=0; i < 10; i++){ item = document.createElement("li"); item.innerHTML = "Item #" + i; fragment.appendChild(item); } list.appendChild(fragment); 1 Reflow
Technique #2 Group Style Changes
element.style.color = "red"; element.style.height = "100px"; element.style.fontSize = "25px"; element.style.backgroundColor = "white"; Repaint! Reflow! Reflow! Repaint!
.active { color: red; height: 100px; fontSize: 25px; background-color: white; } element.className = "active"; Reflow! Grouping Style Changes
var item = document.getElementById("myItem"); item.style.cssText = "color:red;height:100px;" + "font-size:25px;background-color: white"); Reflow! Grouping Style Changes
Technique #3 Avoid Accidental Reflow
element.width = "100px"; var width = element.offsetWidth; Reflow! Accidental Reflow
What to do? • Minimize access to layout information – offsetTop, offsetLeft, offsetWidth, offsetHeight – scrollTop, scrollLeft, scrollWidth, scrollHeight – clientTop, clientLeft, clientWidth, clientHeight – Most computed styles • If a value is used more than once, store in local variable
Does hardware acceleration help?
Traditional Rendering UI Thread time Compositing Drawing
Hardware Acceleration UI Thread timetime Prep GPU Compositing Rendering info Wait Drawing Signal complete
Does JavaScript performance matter?
After all, all browsers now have optimizing JavaScript engines Tracemonkey/ JaegarMonkey (3.5+) V8 (all) Squirrelfish (4+) Chakra (9+) Karakan (10.5+)
So our scripts are getting really, really fast
Old computers ran slow applications Small amounts of CPU power and memory
New computers are generally faster but slow applications still exist More CPU + more memory = less disciplined application development
It's still possible to write slow JavaScript on the new, faster JavaScript engines
Recap
awesome!!
The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
Responsive UI UI Thread time JavaScript UI UpdateUI Update
Unresponsive UI UI Thread time JavaScript UI UpdateUI Update
Unresponsive UI UI Thread time JavaScript UI UpdateUI Update
Avoid Slow Loading JavaScript • Put scripts at the bottom • Concatenate scripts into as few files as possible • Choose the right way to load your scripts – Dynamically created scripts – Deferred scripts – Asynchronous scripts
Avoid Slow JavaScript • Don't allow JavaScript to execute for more than 50ms • Break up long JavaScript processes using: – Timers – Web Workers
Avoid Long UI Updates • Be careful of repaint and reflow • Perform complex DOM operations off- document – Remove elements and re-add them – Use DocumentFragment objects • Group style changes together • Avoid accidental reflow
Etcetera • My blog: www.nczonline.net • Twitter: @slicknet • These Slides: http://slideshare.net/nzakas/ • Rate Me: http://spkr8.com/t/5000
Questions?
See ya!
Creative Commons Images Used • http://www.flickr.com/photos/hippie/2406411610/ • http://www.flickr.com/photos/55733754@N00/3325000738/ • http://www.flickr.com/photos/eurleif/255241547/ • http://www.flickr.com/photos/off_the_wall/3444915939/ • http://www.flickr.com/photos/wwarby/3296379139/ • http://www.flickr.com/photos/derekgavey/4358797365/ • http://www.flickr.com/photos/mulad/286641998/ • http://www.flickr.com/photos/torley/2361164281/ • http://www.flickr.com/photos/ottoman42/455242/

More Related Content

PDF
Performance on the Yahoo! Homepage
byNicholas Zakas
 
PDF
High Performance JavaScript - Fronteers 2010
byNicholas Zakas
 
PDF
Nicholas' Performance Talk at Google
byNicholas Zakas
 
PDF
YUI Test The Next Generation (YUIConf 2010)
byNicholas Zakas
 
PDF
High Performance JavaScript (Amazon DevCon 2011)
byNicholas Zakas
 
PPT
Responsive interfaces
byNicholas Zakas
 
PDF
High Performance JavaScript - WebDirections USA 2010
byNicholas Zakas
 
PPTX
JavaScript Timers, Power Consumption, and Performance
byNicholas Zakas
 
Performance on the Yahoo! Homepage
byNicholas Zakas
 
High Performance JavaScript - Fronteers 2010
byNicholas Zakas
 
Nicholas' Performance Talk at Google
byNicholas Zakas
 
YUI Test The Next Generation (YUIConf 2010)
byNicholas Zakas
 
High Performance JavaScript (Amazon DevCon 2011)
byNicholas Zakas
 
Responsive interfaces
byNicholas Zakas
 
High Performance JavaScript - WebDirections USA 2010
byNicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
byNicholas Zakas
 

What's hot

PPTX
Enough with the JavaScript already!
byNicholas Zakas
 
PDF
High Performance JavaScript - jQuery Conference SF Bay Area 2010
byNicholas Zakas
 
PDF
Progressive Enhancement 2.0 (Conference Agnostic)
byNicholas Zakas
 
PPTX
Browser Wars Episode 1: The Phantom Menace
byNicholas Zakas
 
PDF
Mobile Web Speed Bumps
byNicholas Zakas
 
PDF
jQuery 1.9 and 2.0 - Present and Future
byRichard Worth
 
PPTX
High Performance Snippets
bySteve Souders
 
PPTX
High Performance JavaScript (CapitolJS 2011)
byNicholas Zakas
 
PDF
Learning from the Best jQuery Plugins
byMarc Grabanski
 
PDF
Hyperlight Websites - Chris Zacharias
byChristopher Zacharias
 
PDF
Testing Mobile JavaScript
byjeresig
 
PDF
Building performance into the new yahoo homepage presentation
bymasudakram
 
PPTX
Cache is King
bySteve Souders
 
PDF
[jqconatx] Adaptive Images for Responsive Web Design
byChristopher Schmitt
 
PDF
Web versus Native: round 1!
byChris Mills
 
PDF
Empowering the "mobile web"
byChris Mills
 
PDF
APIs, now and in the future
byChris Mills
 
PPTX
What is HTML 5?
bySusan Winters
 
PDF
Frontend SPOF
byPatrick Meenan
 
PDF
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
byDavid Kaneda
 
Enough with the JavaScript already!
byNicholas Zakas
 
High Performance JavaScript - jQuery Conference SF Bay Area 2010
byNicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
byNicholas Zakas
 
Browser Wars Episode 1: The Phantom Menace
byNicholas Zakas
 
Mobile Web Speed Bumps
byNicholas Zakas
 
jQuery 1.9 and 2.0 - Present and Future
byRichard Worth
 
High Performance Snippets
bySteve Souders
 
High Performance JavaScript (CapitolJS 2011)
byNicholas Zakas
 
Learning from the Best jQuery Plugins
byMarc Grabanski
 
Hyperlight Websites - Chris Zacharias
byChristopher Zacharias
 
Testing Mobile JavaScript
byjeresig
 
Building performance into the new yahoo homepage presentation
bymasudakram
 
Cache is King
bySteve Souders
 
[jqconatx] Adaptive Images for Responsive Web Design
byChristopher Schmitt
 
Web versus Native: round 1!
byChris Mills
 
Empowering the "mobile web"
byChris Mills
 
APIs, now and in the future
byChris Mills
 
What is HTML 5?
bySusan Winters
 
Frontend SPOF
byPatrick Meenan
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
byDavid Kaneda
 

Viewers also liked

PDF
Enterprise JavaScript Error Handling (Ajax Experience 2008)
byNicholas Zakas
 
PDF
Maintainable JavaScript 2011
byNicholas Zakas
 
PDF
Extreme JavaScript Compression With YUI Compressor
byNicholas Zakas
 
PPTX
JavaScript APIs you’ve never heard of (and some you have)
byNicholas Zakas
 
PPTX
Maintainable JavaScript 2012
byNicholas Zakas
 
PDF
Writing Efficient JavaScript
byNicholas Zakas
 
Enterprise JavaScript Error Handling (Ajax Experience 2008)
byNicholas Zakas
 
Maintainable JavaScript 2011
byNicholas Zakas
 
Extreme JavaScript Compression With YUI Compressor
byNicholas Zakas
 
JavaScript APIs you’ve never heard of (and some you have)
byNicholas Zakas
 
Maintainable JavaScript 2012
byNicholas Zakas
 
Writing Efficient JavaScript
byNicholas Zakas
 

Similar to High Performance JavaScript (YUIConf 2010)

PDF
High Performance JavaScript 2011
byNicholas Zakas
 
KEY
Developing High Performance Web Apps - CodeMash 2011
byTimothy Fisher
 
PDF
Developing High Performance Web Apps
byTimothy Fisher
 
PDF
orcreatehappyusers
bytutorialsruby
 
PDF
orcreatehappyusers
bytutorialsruby
 
PPTX
Introduction to JQuery, ASP.NET MVC and Silverlight
byPeter Gfader
 
PPT
Hands on web development with play 2.0
byAbbas Raza
 
PPT
High Performance Ajax Applications 1197671494632682 2
byNiti Chotkaew
 
PPT
High Performance Ajax Applications
byJulien Lecomte
 
PDF
Js Saturday 2013 your jQuery could perform better
byIvo Andreev
 
PPT
Sanjeev ghai 12
byPraveen kumar
 
PDF
PrairieDevCon 2014 - Web Doesn't Mean Slow
bydmethvin
 
PPT
High performance java script why everything youve been taught is wrong
byTao Gao
 
PPT
Os Smarr
byoscon2007
 
PPT
Smarr Oscon 2007
bybriandemant
 
PPT
HTML5 Multithreading
byAllan Huang
 
PPT
Web 2.0 Expo: Even Faster Web Sites
bySteve Souders
 
PPTX
jQuery
byPumoTechnovation
 
PDF
Webpack
bySofian Hadiwijaya
 
PDF
Get Ahead with HTML5 on Moible
bymarkuskobler
 
High Performance JavaScript 2011
byNicholas Zakas
 
Developing High Performance Web Apps - CodeMash 2011
byTimothy Fisher
 
Developing High Performance Web Apps
byTimothy Fisher
 
orcreatehappyusers
bytutorialsruby
 
orcreatehappyusers
bytutorialsruby
 
Introduction to JQuery, ASP.NET MVC and Silverlight
byPeter Gfader
 
Hands on web development with play 2.0
byAbbas Raza
 
High Performance Ajax Applications 1197671494632682 2
byNiti Chotkaew
 
High Performance Ajax Applications
byJulien Lecomte
 
Js Saturday 2013 your jQuery could perform better
byIvo Andreev
 
Sanjeev ghai 12
byPraveen kumar
 
PrairieDevCon 2014 - Web Doesn't Mean Slow
bydmethvin
 
High performance java script why everything youve been taught is wrong
byTao Gao
 
Os Smarr
byoscon2007
 
Smarr Oscon 2007
bybriandemant
 
HTML5 Multithreading
byAllan Huang
 
Web 2.0 Expo: Even Faster Web Sites
bySteve Souders
 
jQuery
byPumoTechnovation
 
Webpack
bySofian Hadiwijaya
 
Get Ahead with HTML5 on Moible
bymarkuskobler
 

More from Nicholas Zakas

PPTX
The Pointerless Web
byNicholas Zakas
 
PPTX
Scalable JavaScript Application Architecture 2012
byNicholas Zakas
 
PDF
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
byNicholas Zakas
 
PDF
Scalable JavaScript Application Architecture
byNicholas Zakas
 
PDF
Speed Up Your JavaScript
byNicholas Zakas
 
PDF
Maintainable JavaScript
byNicholas Zakas
 
PDF
JavaScript Variable Performance
byNicholas Zakas
 
ODP
The New Yahoo! Homepage and YUI 3
byNicholas Zakas
 
PDF
Test Driven Development With YUI Test (Ajax Experience 2008)
byNicholas Zakas
 
The Pointerless Web
byNicholas Zakas
 
Scalable JavaScript Application Architecture 2012
byNicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
byNicholas Zakas
 
Scalable JavaScript Application Architecture
byNicholas Zakas
 
Speed Up Your JavaScript
byNicholas Zakas
 
Maintainable JavaScript
byNicholas Zakas
 
JavaScript Variable Performance
byNicholas Zakas
 
The New Yahoo! Homepage and YUI 3
byNicholas Zakas
 
Test Driven Development With YUI Test (Ajax Experience 2008)
byNicholas Zakas
 

Recently uploaded

PDF
A business case for open source: From lock-in to value.pdf
byMindtrek
 
PDF
Top 10+ Ajax Development Companies in France
byrockjohnson0829
 
PDF
Manage VMs on Kubernetes - Introduction to KubeVirt - Meetup MUC 10.2025
byTobias Schneck
 
PDF
Unit 3 DS - Distributed Data Storage and Retrieval - PowerPoint Content.pdf
byayesha butalia
 
PDF
Artificial Intelligence and YOU - Thinking Thoughtfully about AI
byMicah Melling
 
PDF
Master Deck: GraphSummit Bengaluru (Oct 7)
byNeo4j
 
PDF
The Role of Human Experiences (HX) in GenAI Adoption
byDr. Tathagat Varma
 
PDF
Starting a Customer Education Program: Taking Your Training to Them
byRustici Software
 
PDF
Certificate of Completion For Getting Started With Azure
byNeel Patel
 
PDF
Unleash the Power of Salesforce Winter ’26 Release.pdf
byyoyoloftis
 
PDF
Writing GPU-Ready AI Models in Pure Java with Babylon
byAna-Maria Mihalceanu
 
PPTX
⚡Level Up Your Slack Game: Workflows & Conditional Branching🎉
bySanjeetMishra29
 
PDF
CIDT: Blockchain, DeFi & Product Engineering - MVPs in 4 Weeks with a Senior-...
byTetianaBuchynska1
 
PDF
Tilannekatsaus tekoälytoimintaan Suomessa.pdf
byMindtrek
 
PDF
NeuroXR: Current Research and Opportunities
byMark Billinghurst
 
PDF
Mapping Your Ecosystem: Uniting Content and Data across Systems
byRustici Software
 
PDF
A SEA of Energy Efficiency Opportunities!
byMemoori
 
PDF
Certified Kubernetes Security Specialist (CKS): Unit 5
byVICTOR MAESTRE RAMIREZ
 
PDF
Session 1 - Specialized AI Associate Series: Essential Studio Automation Fea...
byDianaGray10
 
PDF
A PROJECT ON EVOLUTION OF DNA FINGERPRINTING AND ITS TECHNOLOGY
bychandrakalasahu568
 
A business case for open source: From lock-in to value.pdf
byMindtrek
 
Top 10+ Ajax Development Companies in France
byrockjohnson0829
 
Manage VMs on Kubernetes - Introduction to KubeVirt - Meetup MUC 10.2025
byTobias Schneck
 
Unit 3 DS - Distributed Data Storage and Retrieval - PowerPoint Content.pdf
byayesha butalia
 
Artificial Intelligence and YOU - Thinking Thoughtfully about AI
byMicah Melling
 
Master Deck: GraphSummit Bengaluru (Oct 7)
byNeo4j
 
The Role of Human Experiences (HX) in GenAI Adoption
byDr. Tathagat Varma
 
Starting a Customer Education Program: Taking Your Training to Them
byRustici Software
 
Certificate of Completion For Getting Started With Azure
byNeel Patel
 
Unleash the Power of Salesforce Winter ’26 Release.pdf
byyoyoloftis
 
Writing GPU-Ready AI Models in Pure Java with Babylon
byAna-Maria Mihalceanu
 
⚡Level Up Your Slack Game: Workflows & Conditional Branching🎉
bySanjeetMishra29
 
CIDT: Blockchain, DeFi & Product Engineering - MVPs in 4 Weeks with a Senior-...
byTetianaBuchynska1
 
Tilannekatsaus tekoälytoimintaan Suomessa.pdf
byMindtrek
 
NeuroXR: Current Research and Opportunities
byMark Billinghurst
 
Mapping Your Ecosystem: Uniting Content and Data across Systems
byRustici Software
 
A SEA of Energy Efficiency Opportunities!
byMemoori
 
Certified Kubernetes Security Specialist (CKS): Unit 5
byVICTOR MAESTRE RAMIREZ
 
Session 1 - Specialized AI Associate Series: Essential Studio Automation Fea...
byDianaGray10
 
A PROJECT ON EVOLUTION OF DNA FINGERPRINTING AND ITS TECHNOLOGY
bychandrakalasahu568
 
In this document
Powered by AI

Presentation by Nicholas C. Zakas on JavaScript performance, emphasizing its effect on user experience.

Discussion on the UI thread's role in processing JavaScript and UI updates, emphasizing that only one can execute at a time.

Explanation of how user interactions like clicks affect the UI thread and lead to unresponsive UI if JavaScript takes too long.

Details on runaway script timers in various browsers to limit JavaScript execution time and maintain responsiveness.

Exploration of the benefits of Just-In-Time (JIT) compilation in improving JavaScript execution speed.

Recommendations on limiting JavaScript execution time for maintaining a responsive UI, ideally under 50ms.

Techniques to improve page load performance by minimizing JavaScript execution impact during page load.

Best practices for loading JavaScript files efficiently to enhance page rendering, including placing scripts at the bottom.

Using dynamic scripts for non-blocking JavaScript loading and execution for better UI performance.

Techniques for deferring script execution to ensure UI updates finish before running JavaScript, including async scripts.Various methods to keep JavaScript execution responsive, including timers and web workers for asynchronous processing.Discussion on how JavaScript can trigger long UI updates through repaints and reflows, and techniques to manage performance.

Key takeaways on improving JavaScript performance by managing execution time and minimizing UI update delays.

Final notes including links for further reading, social media, and a Q&A session.

High Performance JavaScript (YUIConf 2010)