SlideShare a Scribd company logo
1 of 155
Download to read offline
High Performance JavaScript
  Nicholas C. Zakas | Amazon DevCon | April 27, 2011
Who's this guy?




         Presentation       Contributor,
           Architect     Creator of YUI Test




Author     Lead Author   Contributor           Lead Author
High Performance JavaScript (Amazon DevCon 2011)
@slicknet



(Complaints: @robertduffy)
High Performance JavaScript (Amazon DevCon 2011)
Does JavaScript performance
         matter?
After all, all browsers now have
     optimizing JavaScript engines




Tracemonkey/    V8     Squirrelfish   Chakra   Karakan
JaegarMonkey   (all)      (4+)         (9+)    (10.5+)
    (3.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
Right???
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Oh yeah, one more thing
High Performance JavaScript (Amazon DevCon 2011)
http://jeftek.com/1942/motorola-xoom-sunspider-results/
It's still possible to write slow
JavaScript on the new, faster
       JavaScript engines
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
       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



time
                           UI Queue
When Clicked

UI Thread



time
                           UI Queue

                             UI Update

                             onclick

                             UI Update
When Clicked

UI Thread

 UI Update

time
                                   UI Queue

                                     onclick
        Draw down state
                                     UI Update
When Clicked

UI Thread

 UI Update   onclick

time
                              UI Queue

                                UI Update
When Clicked

UI Thread

 UI Update   onclick       UI Update

time
                                       UI Queue


               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

 UI Update   JavaScript   UI Update

time
Unresponsive UI

UI Thread

 UI Update       JavaScript    UI Update

time
The longer JavaScript runs,
the worse the user experience
The runaway script timer prevents JavaScript
         from running for too long
      Each browser imposes its own limit (except Opera)
Internet Explorer
Firefox
Safari
Chrome
High Performance JavaScript (Amazon DevCon 2011)
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

                Interpret

time
JITed JavaScript (1st Run)

UI Thread

Compile     Execute

time
JITed JavaScript (After 1st Run)

UI Thread

   Execute

time
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 :)
Doing so makes your application awesome
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

 UI Update   JavaScript   UI Update

time
Result

UI Thread

 Hello world!   foo.js   See ya!

time
Result

UI Thread

 Hello world!   Download   Parse   Run   See ya!

time




  The UI thread needs to wait for the script to
  download, parse, and run before continuing
Result

UI Thread

 Hello world!   Download    Parse   Run   See ya!



                 Variable      Constant




Download time takes the longest and is variable
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

 JavaScript   UI Update   JavaScript   UI Update   JavaScript


time




  The more scripts to download in between UI
  updates, the longer the page takes to render
Technique #1: Put scripts at the
           bottom
High Performance JavaScript (Amazon DevCon 2011)
<!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

 UI Update   UI Update   JavaScript   JavaScript   JavaScript


time




   Even if there are multiple scripts, the page
                 renders quickly
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

UI Update   JavaScript   JavaScript   JavaScript


time




       Each script has overhead of downloading
UI Thread

UI Update   JavaScript


time




 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
Basic Technique
var script = document.createElement("script"),
   body;
script.type = "text/javascript";
script.src = "foo.js";
body.insertBefore(script, body.firstChild);




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

 Hello world!      Download   Parse   Run   See ya!

time
<!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

 Hello world!   See ya!            Run   UI Update

time


                Download   Parse




Only code execution happens on the UI thread,
   which means less blocking of UI updates
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);

}
Usage


loadScript("foo.js", function(){
      alert("Loaded!");
});
Timing Note:
 Script execution begins immediately
after download and parse – timing of
     execution is not guaranteed
Using Dynamic Scripts

UI Thread

 Hello world!                      Run   See ya!   UI Update

time


                Download   Parse




Depending on time to download and script size,
 execution may happen before next 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>
Support for <script defer>




3.5 7.0      5.0 4.0           ?
Deferred scripts begin to
  download immediately,
but don't execute until all UI
     updates complete
Using <script defer>

UI Thread

 Hello world!     See ya!     More UI   More UI   Run




time


                   Download     Parse




   Similar to dynamic script nodes, but with a
    guarantee that execution will happen last
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>
Support for <script async>




3.6 7.0      5.0     ?         ?
Asynchronous scripts behave a
   lot like dynamic scripts
Using <script async>

UI Thread

 Hello world!      See ya!            Run   UI Update

time


                   Download   Parse




Download begins immediately and execution is
       slotted in at first available spot
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



time
                           UI Queue

                             UI Update

                             onclick

                             UI Update
When Clicked

UI Thread

 UI Update

time
                            UI Queue

                              onclick

                              UI Update
When Clicked

UI Thread

 UI Update   onclick




time
                                  UI Queue

                                    UI Update
When Clicked

UI Thread

 UI Update   onclick   UI Update

time
                                   UI Queue
After 25ms

UI Thread

 UI Update   onclick   UI Update

time
                                    UI Queue

                                      JavaScript
After 25ms

UI Thread

 UI Update   onclick   UI Update   JavaScript




time
                                                UI Queue
After Another 25ms

UI Thread

 UI Update   onclick   UI Update   JavaScript




time
                                                UI Queue

                                                  JavaScript
After Another 25ms

UI Thread

 UI Update   onclick   UI Update   JavaScript         JavaScript




time
                                                UI Queue
Technique #2: Web Workers
High Performance JavaScript (Amazon DevCon 2011)
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



time
                           UI Queue

                             UI Update

                             onclick

                             UI Update
When Clicked

UI Thread

 UI Update

time
                            UI Queue

                              onclick

                              UI Update
When Clicked

UI Thread

 UI Update   onclick




time
                                  UI Queue

                                    UI Update
When Clicked

UI Thread

 UI Update   onclick




time

             Worker Thread        UI Queue

                                    UI Update
When Clicked

UI Thread

 UI Update   onclick       UI Update

time

             Worker Thread             UI Queue

                       JavaScript
Worker Thread Complete

UI Thread

 UI Update    onclick   UI Update

time
                                    UI Queue

                                     onmessage
Worker Thread Complete

UI Thread

 UI Update    onclick   UI Update   onmessage




time
                                           UI Queue
Support for Web Workers




3.5 4.0    4.0      ?   10.6
Repaint and Reflow
Hidden performance costs of common operations
Long UI updates
       =
Unresponsive UI
Unresponsive UI

UI Thread

 UI Update   JavaScript   UI Update

time
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
Repaint!    Reflow!

element.style.color = "red";
element.style.height = "100px";
                                   Reflow!
element.style.fontSize = "25px";
element.style.backgroundColor = "white";



                               Repaint!
Grouping Style Changes

.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!
Technique #3
Avoid Accidental Reflow
Accidental Reflow



element.width = "100px";

var width = element.offsetWidth;


                           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

       Compositing   Drawing

time
Hardware Acceleration

UI Thread
 Prep                 Wait




time
        Rendering info            Signal complete



        Compositing     Drawing




              GPU
Recap
The browser UI thread is responsible for
both UI updates and JavaScript execution
           Only one can happen at a time
Responsive UI

UI Thread

 UI Update   JavaScript   UI Update

time
Unresponsive UI

UI Thread

 UI Update       JavaScript    UI Update

time
Unresponsive UI

UI Thread

 UI Update   JavaScript   UI Update

time
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
Don't be horrible
Do be awesome
The End
Etcetera
• My blog:
  www.nczonline.net

• Twitter:
  @slicknet

• These Slides:
  http://slideshare.net/nzakas/
Creative Commons Images Used
•   http://www.flickr.com/photos/lrargerich/3115367361/
•   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/
•   http://www.flickr.com/photos/goincase/3843348908/

More Related Content

What's hot

Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceNicholas 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 2010Nicholas Zakas
 
Nicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas Zakas
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance SnippetsSteve Souders
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery PluginsMarc Grabanski
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web DesignChristopher Schmitt
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FutureRichard Worth
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Stoyan Stefanov
 
Testing Mobile JavaScript
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScriptjeresig
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentationmasudakram
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...David Kaneda
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsStoyan Stefanov
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance PatternsStoyan Stefanov
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social PluginsStoyan Stefanov
 

What's hot (20)

Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
 
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and PerformanceJavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
 
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' Performance Talk at Google
Nicholas' Performance Talk at GoogleNicholas' Performance Talk at Google
Nicholas' Performance Talk at Google
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design[jqconatx] Adaptive Images for Responsive Web Design
[jqconatx] Adaptive Images for Responsive Web Design
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
jQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and FuturejQuery 1.9 and 2.0 - Present and Future
jQuery 1.9 and 2.0 - Present and Future
 
Cache is King
Cache is KingCache is King
Cache is King
 
Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2Progressive Downloads and Rendering - take #2
Progressive Downloads and Rendering - take #2
 
Testing Mobile JavaScript
Testing Mobile JavaScriptTesting Mobile JavaScript
Testing Mobile JavaScript
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentation
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
High Performance Social Plugins
High Performance Social PluginsHigh Performance Social Plugins
High Performance Social Plugins
 
Frontend SPOF
Frontend SPOFFrontend SPOF
Frontend SPOF
 

Viewers also liked

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
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable PerformanceNicholas 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
 
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
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScriptNicholas Zakas
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScriptNicholas Zakas
 

Viewers also liked (8)

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)
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
 
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)
 
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)
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
 

Similar to High Performance JavaScript (Amazon DevCon 2011)

Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web AppsTimothy Fisher
 
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterIvo Andreev
 
Using HttpWatch Plug-in with Selenium Automation in Java
Using HttpWatch Plug-in with Selenium Automation in JavaUsing HttpWatch Plug-in with Selenium Automation in Java
Using HttpWatch Plug-in with Selenium Automation in JavaSandeep Tol
 
User Interface Patterns and Nuxeo
User Interface Patterns and NuxeoUser Interface Patterns and Nuxeo
User Interface Patterns and Nuxeoanicewick
 
Client side scripting using Javascript
Client side scripting using JavascriptClient side scripting using Javascript
Client side scripting using JavascriptBansari Shah
 
Setting UIAutomation free with Appium
Setting UIAutomation free with AppiumSetting UIAutomation free with Appium
Setting UIAutomation free with AppiumDan Cuellar
 
Hands on web development with play 2.0
Hands on web development with play 2.0Hands on web development with play 2.0
Hands on web development with play 2.0Abbas Raza
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightPeter Gfader
 
[1C1]Service Workers
[1C1]Service Workers[1C1]Service Workers
[1C1]Service WorkersNAVER D2
 
Meebo performance ny_web_performance
Meebo performance ny_web_performanceMeebo performance ny_web_performance
Meebo performance ny_web_performancemarcuswestin
 
Plug yourself in and your app will never be the same (1 hr edition)
Plug yourself in and your app will never be the same (1 hr edition)Plug yourself in and your app will never be the same (1 hr edition)
Plug yourself in and your app will never be the same (1 hr edition)Mikkel Flindt Heisterberg
 
Setting Apple's UI Automation Free with Appium
Setting Apple's UI Automation Free with AppiumSetting Apple's UI Automation Free with Appium
Setting Apple's UI Automation Free with Appiummobiletestsummit
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 

Similar to High Performance JavaScript (Amazon DevCon 2011) (20)

Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Js Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform betterJs Saturday 2013 your jQuery could perform better
Js Saturday 2013 your jQuery could perform better
 
jQuery
jQueryjQuery
jQuery
 
Using HttpWatch Plug-in with Selenium Automation in Java
Using HttpWatch Plug-in with Selenium Automation in JavaUsing HttpWatch Plug-in with Selenium Automation in Java
Using HttpWatch Plug-in with Selenium Automation in Java
 
User Interface Patterns and Nuxeo
User Interface Patterns and NuxeoUser Interface Patterns and Nuxeo
User Interface Patterns and Nuxeo
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
 
Client side scripting using Javascript
Client side scripting using JavascriptClient side scripting using Javascript
Client side scripting using Javascript
 
Play framework
Play frameworkPlay framework
Play framework
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
Setting UIAutomation free with Appium
Setting UIAutomation free with AppiumSetting UIAutomation free with Appium
Setting UIAutomation free with Appium
 
Webpack
Webpack Webpack
Webpack
 
Hands on web development with play 2.0
Hands on web development with play 2.0Hands on web development with play 2.0
Hands on web development with play 2.0
 
Introduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and SilverlightIntroduction to JQuery, ASP.NET MVC and Silverlight
Introduction to JQuery, ASP.NET MVC and Silverlight
 
[1C1]Service Workers
[1C1]Service Workers[1C1]Service Workers
[1C1]Service Workers
 
Meebo performance ny_web_performance
Meebo performance ny_web_performanceMeebo performance ny_web_performance
Meebo performance ny_web_performance
 
Plug yourself in and your app will never be the same (1 hr edition)
Plug yourself in and your app will never be the same (1 hr edition)Plug yourself in and your app will never be the same (1 hr edition)
Plug yourself in and your app will never be the same (1 hr edition)
 
Setting Apple's UI Automation Free with Appium
Setting Apple's UI Automation Free with AppiumSetting Apple's UI Automation Free with Appium
Setting Apple's UI Automation Free with Appium
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 

More from 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
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureNicholas Zakas
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorNicholas Zakas
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScriptNicholas 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 3Nicholas Zakas
 

More from Nicholas Zakas (8)

The Pointerless Web
The Pointerless WebThe Pointerless Web
The Pointerless Web
 
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)
 
Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012Scalable JavaScript Application Architecture 2012
Scalable JavaScript Application Architecture 2012
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
Scalable JavaScript Application Architecture
Scalable JavaScript Application ArchitectureScalable JavaScript Application Architecture
Scalable JavaScript Application Architecture
 
Extreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI CompressorExtreme JavaScript Compression With YUI Compressor
Extreme JavaScript Compression With YUI Compressor
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
 
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
 

Recently uploaded

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 

Recently uploaded (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 

High Performance JavaScript (Amazon DevCon 2011)