Download - High Performance JavaScript (YUIConf 2010)
![Page 1: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/1.jpg)
High Performance JavaScriptNicholas C. ZakasYahoo!, Inc.
YUIConf 2010 | November 9, 2010
![Page 2: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/2.jpg)
Greetings, program
Principal Front End Engineer
Contributor,Creator of YUI Test
Author Lead Author Contributor Lead Author
![Page 3: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/3.jpg)
I know what you're thinking
![Page 4: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/4.jpg)
Is he really going to use a Tron theme throughout this
presentation?
![Page 5: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/5.jpg)
Yes, because it's awesome
![Page 6: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/6.jpg)
JavaScript performancedirectly
affects user experience
![Page 7: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/7.jpg)
"Know the enemy and know yourself; in a hundred battles you will never be in peril."
-Sun Tzu, The Art of War
![Page 8: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/8.jpg)
The UI ThreadThe brains of the operation
![Page 9: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/9.jpg)
The browser UI thread is responsible forboth UI updates and JavaScript execution
Only one can happen at a time
![Page 10: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/10.jpg)
Jobs for UI updates and JavaScript execution areadded to a UI queue if the UI thread is busy
Each job must wait in line for its turn to execute
![Page 11: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/11.jpg)
<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>
![Page 12: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/12.jpg)
Before Click
UI Thread
UI Queue
time
![Page 13: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/13.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 14: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/14.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
Draw down state
![Page 15: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/15.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 16: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/16.jpg)
When Clicked
UI Thread
UI Queue
time
onclick UI UpdateUI Update
Draw up state
![Page 17: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/17.jpg)
No UI updates while JavaScript is executing
![Page 18: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/18.jpg)
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>
![Page 19: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/19.jpg)
A UI update must use the latest info available
![Page 20: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/20.jpg)
Long-running JavaScript=
Unresponsive UI
![Page 21: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/21.jpg)
Responsive UI
UI Thread
time
JavaScript UI UpdateUI Update
![Page 22: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/22.jpg)
Unresponsive UI
UI Thread
time
JavaScript UI UpdateUI Update
![Page 23: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/23.jpg)
The longer JavaScript runs,the worse the user experience
![Page 24: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/24.jpg)
The browser vendors know this and put limits on JavaScript via therunaway script timer
![Page 25: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/25.jpg)
Internet Explorer
![Page 26: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/26.jpg)
Firefox
![Page 27: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/27.jpg)
Safari
![Page 28: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/28.jpg)
Chrome
![Page 29: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/29.jpg)
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
![Page 30: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/30.jpg)
Does JIT compiling help?
![Page 31: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/31.jpg)
Interpreted JavaScript
UI Thread
time
Interpret
![Page 32: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/32.jpg)
JITed JavaScript (1st Run)
UI Thread
time
Compile Execute
![Page 33: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/33.jpg)
JITed JavaScript (After 1st Run)
UI Thread
time
Execute
![Page 34: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/34.jpg)
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
![Page 35: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/35.jpg)
Translation:No single JavaScript job should execute for more than 100ms to
ensure a responsive UI
![Page 36: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/36.jpg)
Recommendation:Limit JavaScript execution to no more
than 50ms
measured on IE6 :)
![Page 37: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/37.jpg)
Loadtime TechniquesDon't let JavaScript interfere with page load performance
![Page 38: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/38.jpg)
During page load, JavaScript takes more time on the UI thread
![Page 39: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/39.jpg)
<!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p> <script src="foo.js"></script> <p>See ya!</p></body></html>
![Page 40: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/40.jpg)
Result
UI Thread
time
JavaScript UI UpdateUI Update
![Page 41: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/41.jpg)
Result
UI Thread
time
foo.js See ya!Hello world!
![Page 42: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/42.jpg)
Result
UI Thread
time
Download See ya!Hello world! Parse Run
The UI thread needs to wait for the script todownload, parse, and run before continuing
![Page 43: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/43.jpg)
Result
UI Thread
Download time takes the longest and is variable
Variable Constant
UI Thread
Download See ya!Hello world! Parse Run
![Page 44: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/44.jpg)
Translation:The page doesn't render while
JavaScript is downloading, parsing, or executing during page load
![Page 45: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/45.jpg)
<!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>
![Page 46: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/46.jpg)
Result
UI Thread
time
JavaScript UI UpdateUI Update
The more scripts to download in between UIupdates, the longer the page takes to render
JavaScript JavaScript
![Page 47: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/47.jpg)
Technique #1: Put scripts at the bottom
![Page 48: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/48.jpg)
![Page 49: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/49.jpg)
<!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p> <p>See ya!</p> <script src="foo.js"></script></body></html>
![Page 50: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/50.jpg)
Put Scripts at Bottom
UI Thread
time
JavaScriptUI UpdateUI Update
Even if there are multiple scripts, the pagerenders quickly
JavaScript JavaScript
![Page 51: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/51.jpg)
Technique #2: Combine JavaScript files
![Page 52: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/52.jpg)
<!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>
![Page 53: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/53.jpg)
UI Thread
time
JavaScriptUI Update
Each script has overhead of downloading
JavaScript JavaScript
![Page 54: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/54.jpg)
UI Thread
time
JavaScriptUI Update
Combining all of the files limits the networkoverhead and gets scripts onto the page faster
![Page 55: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/55.jpg)
<!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>
![Page 56: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/56.jpg)
Technique #3: Load scripts dynamically
![Page 57: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/57.jpg)
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
![Page 58: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/58.jpg)
Downloads no longer block the UI thread
![Page 59: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/59.jpg)
<!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p> <script src="foo.js"></script> <p>See ya!</p></body></html>
![Page 60: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/60.jpg)
Using HTML <script>
UI Thread
time
Download See ya!Hello world! Parse Run
![Page 61: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/61.jpg)
<!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>
![Page 62: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/62.jpg)
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
![Page 63: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/63.jpg)
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);
}
![Page 64: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/64.jpg)
loadScript("foo.js", function(){ alert("Loaded!");});
Usage
![Page 65: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/65.jpg)
Timing Note:Script execution begins immediately after download and parse – timing of
execution is not guaranteed
![Page 66: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/66.jpg)
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
![Page 67: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/67.jpg)
Technique #4: Defer scripts
![Page 68: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/68.jpg)
<!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>
![Page 69: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/69.jpg)
7.07.03.53.5 5.05.0 ??4.04.0
Support for <script defer>
![Page 70: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/70.jpg)
Deferred scripts begin to download immediately,
but don't execute until all UI updates complete
![Page 71: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/71.jpg)
Using <script defer>
UI Thread
time
Download
See ya!Hello world!
Parse
Run
Similar to dynamic script nodes, but with aguarantee that execution will happen last
More UI More UI
![Page 72: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/72.jpg)
Timing Note:Although scripts always execute after
UI updates complete, the order of multiple <script defer> scripts is not
guaranteed across browsers
![Page 73: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/73.jpg)
Technique #5: Asynchronous scripts
![Page 74: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/74.jpg)
<!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>
![Page 75: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/75.jpg)
7.07.03.63.6 5.05.0 ????
Support for <script async>
![Page 76: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/76.jpg)
Asynchronous scripts behave a lot like dynamic scripts
![Page 77: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/77.jpg)
Using <script async>
UI Thread
time
Download
See ya!Hello world!
Parse
Run
Download begins immediately and execution isslotted in at first available spot
UI Update
![Page 78: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/78.jpg)
Note:Order of execution is explicitly not preserved for asynchronous scripts
![Page 79: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/79.jpg)
Runtime TechniquesWays to ensure JavaScript doesn't run away
![Page 80: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/80.jpg)
function processArray(items, process, callback){ for (var i=0,len=items.length; i < len; i++){ process(items[i]); } callback();}
![Page 81: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/81.jpg)
Technique #1: Timers
![Page 82: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/82.jpg)
//create a new timer and delay by 500mssetTimeout(function(){
//code to execute here
}, 500)
setTimeout() schedules a function to be added to the UI queue after a delay
![Page 83: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/83.jpg)
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);}
![Page 84: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/84.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 85: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/85.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 86: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/86.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 87: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/87.jpg)
When Clicked
UI Thread
UI Queue
time
UI UpdateUI Update onclick
![Page 88: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/88.jpg)
After 25ms
UI Thread
UI Queue
time
UI UpdateUI Update onclick
JavaScript
![Page 89: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/89.jpg)
After 25ms
UI Thread
UI Queue
time
UI UpdateUI Update onclick JavaScript
![Page 90: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/90.jpg)
After Another 25ms
UI Thread
UI Queue
time
UI UpdateUI Update onclick JavaScript
JavaScript
![Page 91: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/91.jpg)
After Another 25ms
UI Thread
UI Queue
time
UI UpdateUI Update onclick JavaScript JavaScript
![Page 92: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/92.jpg)
Technique #2: Web Workers
![Page 93: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/93.jpg)
![Page 94: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/94.jpg)
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
![Page 95: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/95.jpg)
//in pagevar worker = new Worker("process.js");worker.onmessage = function(event){ useData(event.data);};worker.postMessage(values);
//in process.jsself.onmessage = function(event){ var items = event.data; for (var i=0,len=items.length; i < len; i++){ process(items[i]); } self.postMessage(items);};
![Page 96: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/96.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 97: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/97.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 98: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/98.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
![Page 99: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/99.jpg)
When Clicked
UI Thread
UI Queue
time
onclick
UI Update
UI Update
Worker Thread
![Page 100: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/100.jpg)
When Clicked
UI Thread
UI Queue
time
UI UpdateUI Update onclick
Worker Thread
JavaScript
![Page 101: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/101.jpg)
Worker Thread Complete
UI Thread
UI Queue
time
UI UpdateUI Update onclick
onmessage
![Page 102: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/102.jpg)
Worker Thread Complete
UI Thread
UI Queue
time
UI UpdateUI Update onclick onmessage
![Page 103: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/103.jpg)
4.04.03.53.5 4.04.0 10.610.6??
Support for Web Workers
![Page 104: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/104.jpg)
Repaint and ReflowHidden performance costs of common operations
![Page 105: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/105.jpg)
Long UI updates=
Unresponsive UI
![Page 106: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/106.jpg)
Unresponsive UI
UI Thread
time
JavaScript UI UpdateUI Update
![Page 107: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/107.jpg)
JavaScript can cause long UI updates by triggering
repaint and reflow
![Page 108: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/108.jpg)
A repaint occurs when a visual change doesn't require recalculation of layout
Changes to visibility, colors (text/background), background images, etc.
![Page 109: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/109.jpg)
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!
![Page 110: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/110.jpg)
A reflow occurs when a visual change requires a change in layout
Initial page load ▪ browser resize ▪ DOM structure change ▪ layout style changelayout information retrieved
![Page 111: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/111.jpg)
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!
![Page 112: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/112.jpg)
Repaints and reflows are queued up as JavaScript executes
and then executed in order
![Page 113: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/113.jpg)
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!
![Page 114: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/114.jpg)
Limiting repaints/reflows improves overall performance
![Page 115: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/115.jpg)
Technique #1Perform DOM manipulations
off-document
![Page 116: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/116.jpg)
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
![Page 117: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/117.jpg)
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
![Page 118: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/118.jpg)
DocumentFragmentvar 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
![Page 119: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/119.jpg)
Technique #2Group Style Changes
![Page 120: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/120.jpg)
element.style.color = "red";element.style.height = "100px";element.style.fontSize = "25px";element.style.backgroundColor = "white";
Repaint! Reflow!
Reflow!
Repaint!
![Page 121: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/121.jpg)
.active { color: red; height: 100px; fontSize: 25px; background-color: white;}
element.className = "active";
Reflow!
Grouping Style Changes
![Page 122: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/122.jpg)
var item = document.getElementById("myItem");item.style.cssText = "color:red;height:100px;" + "font-size:25px;background-color: white");
Reflow!
Grouping Style Changes
![Page 123: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/123.jpg)
Technique #3Avoid Accidental Reflow
![Page 124: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/124.jpg)
element.width = "100px";
var width = element.offsetWidth;
Reflow!
Accidental Reflow
![Page 125: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/125.jpg)
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
![Page 126: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/126.jpg)
Does hardware acceleration help?
![Page 127: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/127.jpg)
Traditional Rendering
UI Thread
time
Compositing Drawing
![Page 128: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/128.jpg)
Hardware Acceleration
UI Thread
timetime
Prep
GPU
Compositing
Rendering info
Wait
Drawing
Signal complete
![Page 129: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/129.jpg)
Does JavaScript performance matter?
![Page 130: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/130.jpg)
After all, all browsers now haveoptimizing JavaScript engines
Tracemonkey/JaegarMonkey
(3.5+)
V8(all)
Squirrelfish (4+)
Chakra (9+)
Karakan(10.5+)
![Page 131: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/131.jpg)
So our scripts are getting really, really fast
![Page 132: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/132.jpg)
Old computers ran slow applications Small amounts of CPU power and memory
![Page 133: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/133.jpg)
New computers are generally faster butslow applications still exist
More CPU + more memory = less disciplined application development
![Page 134: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/134.jpg)
It's still possible to write slow JavaScript on the new, faster
JavaScript engines
![Page 135: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/135.jpg)
![Page 136: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/136.jpg)
Recap
![Page 137: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/137.jpg)
awesome!!
![Page 138: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/138.jpg)
The browser UI thread is responsible forboth UI updates and JavaScript execution
Only one can happen at a time
![Page 139: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/139.jpg)
Responsive UI
UI Thread
time
JavaScript UI UpdateUI Update
![Page 140: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/140.jpg)
Unresponsive UI
UI Thread
time
JavaScript UI UpdateUI Update
![Page 141: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/141.jpg)
Unresponsive UI
UI Thread
time
JavaScript UI UpdateUI Update
![Page 142: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/142.jpg)
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
![Page 143: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/143.jpg)
Avoid Slow JavaScript• Don't allow JavaScript to execute for more
than 50ms• Break up long JavaScript processes using:
– Timers– Web Workers
![Page 144: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/144.jpg)
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
![Page 145: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/145.jpg)
Etcetera• My blog:
www.nczonline.net
• Twitter:@slicknet
• These Slides:http://slideshare.net/nzakas/
• Rate Me:http://spkr8.com/t/5000
![Page 146: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/146.jpg)
Questions?
![Page 147: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/147.jpg)
See ya!
![Page 148: High Performance JavaScript (YUIConf 2010)](https://reader033.vdocuments.site/reader033/viewer/2022052410/54c7a87f4a7959300f8b459d/html5/thumbnails/148.jpg)
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/