SlideShare a Scribd company logo
1 of 128
Download to read offline
flickr.com/photos/barbourians/6662357209/




                                 Timers,
                                 Power Consumption,
                                 and Performance

Nicholas C. Zakas
Chief Architect, WellFurnished
New
@slicknet
 (Complaints:
  @souders)
UI Thread

             Execute
Update UI
            JavaScript




                     flickr.com/photos/jepoirrier/954701212/
flickr.com/photos/55733754@N00/3325000738/
<button id="btn" style="font-size: 30px; padding: 0.5em
    1em">Click Me</button>

<script>
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
                              Update UI

                               onclick

                              Update UI
When Clicked
UI Thread
   Update UI


time
                                           UI Queue
               Draw down state                 onclick

                                              Update UI
When Clicked
UI Thread
   Update UI   onclick


time
                                   UI Queue
                                      Update UI
When Clicked
UI Thread
   Update UI   onclick            Update UI


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>
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>
Each UI update applies

ALL CHANGES
 since the last UI update
I gonna make
      a
namination!!




  flickr.com/photos/oakleyoriginals/3065393607/
function naminate(element){

    // start here
    element.style.left = "10px";

    // move to here
    element.style.left = "30px";

    // then to here
    element.style.left = "50px";

    // finally to here
    element.style.left = "70px";
}
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Why
you no
work???

flickr.com/photos/tudor/318123668/
function namimate(element){

    // start here
    element.style.left = "10px";

    // move to here
    element.style.left = "30px";

    // then to here
    element.style.left = "50px";
                                   Last state
    // finally to here               wins
    element.style.left = "70px";
}
JavaScript Timers, Power Consumption, and Performance
setTimeout()
Code to
                                   execute
var tId = setTimeout(function(){

  // do something
                           Delay in
}, 1500);
                          milliseconds
// optional
clearTimeout(tId)
setTimeout()
        DOES NOT SAY
“Run this code after this delay”
setTimeout()
             DOES SAY
“Add this code to the queue after this
               delay”
<button id="btn" style="font-size: 30px; padding: 0.5em
    1em">Click Me</button>

<script>
window.onload = function(){
   document.getElementById("btn").onclick = function(){
      setTimeout(function() {
          //do something
      }, 25);
   };
};
</script>
When Clicked
UI Thread



time
                           UI Queue
                              Update UI

                               onclick

                              Update UI
When Clicked
UI Thread
   Update UI


time
                                           UI Queue
               Draw down state                 onclick

                                              Update UI
When Clicked
UI Thread
   Update UI   onclick


time
                                        UI Queue
                                           Update UI
When Clicked
UI Thread
   Update UI   onclick     Update UI


time
                                        UI Queue

                  Draw up state
After 25ms
UI Thread
   Update UI   onclick   Update UI


time
                                                 UI Queue
                                                    JavaScript


                              Added to back of
                                  queue
Future
UI Thread
   Update UI   onclick   Update UI   JavaScript


time
                                     UI Queue
Future
UI Thread
   Update UI   onclick    Update UI                    JavaScript


time
                                                       UI Queue
                                                            Update UI


                          If the JavaScript changes
                         the UI, it triggers another
                                    update
setTimeout() sends your code into the future
setTimeout(function(){
    element.style.left = "10px";
}, 50);

setTimeout(function(){
    element.style.left = "30px";
}, 100);

setTimeout(function(){
    element.style.left = "50px";
}, 150);

setTimeout(function(){
    element.style.left = "70px";
}, 200);
JavaScript Timers, Power Consumption, and Performance
Animation Loop
(function(){
    var delay = 100;

   function moveTheThing(){

       // actually move the thing

       setTimeout(moveTheThing, delay);
   }

    setTimeout(moveTheThing, delay);
}());
(function(){
    var msg = "Some reasonably long text that keeps scrolling.",
        len = 25,
        pos = 0,
        padding = msg.replace(/./g, " ").substr(0,len)
        finalMsg = padding + msg,
        delay = 100;

   function updateText(){
       var curMsg = finalMsg.substr(pos++, len);
       window.status = curMsg;
       if (pos == finalMsg.length){
           pos = 0;
       }
       setTimeout(updateText, delay);
   }

   setTimeout(updateText, delay);

}());
And More!
setTimout() all the things!!!
Problems
JavaScript Timers, Power Consumption, and Performance
The default system-wide timer resolution in Windows is 15.6 ms, which
means that every 15.6 ms the operating system receives a clock interrupt
from the system timer hardware.

-Timers, Timer Resolution, and Development of Efficient Code (Microsoft)
var tId = setTimeout(function(){

  // do something

}, 10);

               What does it
                 mean?
http://ejohn.org/blog/accuracy-of-javascript-time/
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
Animation Loop
(function(){
    var delay = 17;
                                         Pretty
   function moveTheThing(){
                                       please?!?!
       // actually move the thing

       setTimeout(moveTheThing, delay);
   }

    setTimeout(moveTheThing, delay);
}());
http://ejohn.org/blog/analyzing-timer-performance/
JavaScript Timers, Power Consumption, and Performance
JavaScript Timers, Power Consumption, and Performance
1ms all the timers!!!
http://www.belshe.com/2010/06/04/chrome-cranking-up-the-clock/
timeBeginPeriod()
timeBeginPeriod(1)
setTimout() all the things!!!
flickr.com/photos/antonfomkin/3046849320/
Modern CPUs are narcoleptic
x86 CPU States
        C0         Active
        C1          Halt
        C2       Stop-Clock
        C3         Sleep
Low
        C4       Deep Sleep
Power
        C5   Enhanced Deep Sleep
        C6    Deep Power Down
http://software.intel.com/en-us/articles/cpu-power-utilization-on-intel-architectures/
CPUs go to sleep when idle
The default timer resolution on Windows 7 is 15.6 milliseconds (ms).
Some applications reduce this to 1 ms, which reduces the battery run
time on mobile systems by as much as 25 percent.

-Timers, Timer Resolution, and Development of Efficient Code (Microsoft)


                    Laptops!
JavaScript Timers, Power Consumption, and Performance
Web Timer Resolution Today



Plugged In     4ms    4ms     4ms    4ms           4ms

Battery        4ms   15.6ms   4ms   15.6ms         4ms

Background      1s     1s     4ms    1s*           4ms
                                      * Internet Explorer 10
JavaScript Timers, Power Consumption, and Performance
Web Timer Resolution Today




Battery          4ms   10ms   10ms       10ms           4ms

Background Tab    -    10ms   10ms       10ms            1s

Background App    -     *      *            *            1s
                                * “Catches up” when switched back
Experiment
• Hard shutdown and restart so
  no other apps are running
• Turn off brightness auto-adjust
• Turn off screen locking
• Leave WiFi/Mobile on
• Load test page in browser
• Profit!
Experiment
• Test single timer at different
  intervals:
    • 1000ms – 10ms
Low Frequency   >= 1000ms

High Frequency < 1000ms
Time For 10% Power Use
               By Frequency




Minutes   52-56     42-48          62-65
Timer frequency doesn’t matter
http://googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series-using.html
Experiment
• Test single timer at different
  intervals:
    • 1000ms – 10ms
• Test multiple timers at different
  intervals
    • 1000ms – 10ms x 10
Time For 10% Power Use
                 By Count


                  (same)
Minutes   52-56     42-48          62-65
Number of timers doesn’t matter
JavaScript Timers, Power Consumption, and Performance
Number of timers does matter
        (accuracy)
http://ejohn.org/apps/timers
http://ejohn.org/apps/timers
http://ejohn.org/apps/timers
Flooding the Queue
UI Thread



time
                                 UI Queue
                                      timer

                                      timer

                                      timer
Too many timers affects rendering
Elsewhere…
http://www.w3.org/TR/css3-animations/
Optimized animations using CSS
div {
    animation-name: diagonal-slide;
    animation-duration: 5s;
    animation-iteration-count: 10;
}

@keyframes diagonal-slide {
                                       Hey browser!
    from {                            I’m animating!
        left: 0;
        top: 0;
    }

     to {
            left: 100px;
            top: 100px;
     }
 }
Hey
                                     browser!
                                   I want to do
var tId = setTimeout(function(){
                                    something
  // do something                      later
}, 1500);


     Could be animation.
      Could be polling.
       Don’t sweat it.
http://www.w3.org/2010/webperf/
moz         webkit




http://www.w3.org/TR/animation-timing/
Code to
                                  execute
var rId = requestAnimationFrame(function(time){

  // do something

});

// optional
                                      Time when
clearAnimationFrame(rId)             the paint will
                                        happen
New Animation Loop
(function(){

   function moveTheThing(){          Hey browser!
                                    I’m animating!
       // actually move the thing

       requestAnimationFrame(moveTheThing);
   }

    requestAnimationFrame(moveTheThing);
}());
New Animation Loop
(function(){
    var element = document.getElementById("box");

   function moveTheThing(){

       element.style.left = (element.offsetLeft + 5) + "px";

       requestAnimationFrame(moveTheThing);
   }

    requestAnimationFrame(moveTheThing);
}());
New Animation Loop
(function(){
    var element = document.getElementById("box"),
        start = Date.now();

   function moveTheThing(time){
       var since = (time || Date.now()) – start;
       element.style.left = (element.offsetLeft + since)+ "px";

       requestAnimationFrame(moveTheThing);
   }

    requestAnimationFrame(moveTheThing);
}());
<button id="btn" style="font-size: 30px; padding: 0.5em
    1em">Click Me</button>

<script>
window.onload = function(){
   document.getElementById("btn").onclick = function(){
      requestAnimationFrame(function() {
          //do something
      });
   };
};
</script>
When Clicked
UI Thread



time
                           UI Queue
                              Update UI

                               onclick

                              Update UI
When Clicked
UI Thread
   Update UI


time
                                           UI Queue
               Draw down state                 onclick

                                              Update UI
When Clicked
UI Thread
   Update UI   onclick


time
                                        UI Queue
                                           Update UI
Call to requestAnimationFrame()
UI Thread
   Update UI    onclick


time
                                     UI Queue
                                        Update UI

                                         Changes

                                        Anim Frame
When Clicked
UI Thread
   Update UI   onclick     Update UI


time
                                        UI Queue
                                            Changes
                  Draw up state
                                           Anim Frame
Before Next Frame
UI Thread
   Update UI   onclick   Update UI   Changes


time
                                               UI Queue
                                                  Anim Frame
Naminate!
UI Thread
   Update UI   onclick   Update UI      Changes     Anim Frame


time
                                                   UI Queue
                           Draw whatever changes
                               are necessary
[requestAnimationFrame()’s framerate is] capped at 1000/(16 + N)
fps, where N is the number of ms it takes your callback to execute.
If your callback takes 1000ms to execute, then it's capped at under
1fps. If your callback takes 1ms to execute, you get about 60fps.

-Boris Zbarsky (Mozilla) via Paul Irish (Google)
Animate all the things!!!
 …with CSS and
 requestAnimationFrame
What about other things?
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html
Code to
                            execute
var iId = setImmediate(function(){

  // do something
                                     msSetImmediate()
});                                  msClearImmediate()


// optional
clearImmediate(iId)
<button id="btn" style="font-size: 30px; padding: 0.5em
    1em">Click Me</button>

<script>
window.onload = function(){
   document.getElementById("btn").onclick = function(){
      setImmediate(function() {
          //do something
      });
   };
};
</script>
When Clicked
UI Thread



time
                           UI Queue
                              Update UI

                               onclick

                              Update UI
When Clicked
UI Thread
   Update UI


time
                                           UI Queue
               Draw down state                 onclick

                                              Update UI
When Clicked
UI Thread
   Update UI   onclick


time
                                        UI Queue
                                           Update UI
Call to setImmediate()
UI Thread
   Update UI   onclick


time
                                                 UI Queue
                                                    Update UI

                                                     Changes
                          Always added after
                         the last UI update in
                              the queue
When Clicked
UI Thread
   Update UI   onclick     Update UI


time
                                        UI Queue
                                            Changes
                  Draw up state
Immediately!
UI Thread
   Update UI   onclick    Update UI   Changes


time
                                                UI Queue
https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html
http://www.w3.org/TR/workers/
//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
                              Update UI

                               onclick

                              Update UI
When Clicked
UI Thread
   Update UI


time
                                           UI Queue
               Draw down state                 onclick

                                              Update UI
When Clicked
UI Thread
   Update UI   onclick


time
                                        UI Queue
                                           Update UI
Create Web Worker
UI Thread
    Update UI         onclick


time
                                             UI Queue
                                                Update UI


     Creates a
    background
thread/process/etc.
postMessage()
UI Thread
   Update UI   onclick       Update UI


time
                                         UI Queue

                         process
Worker Complete
UI Thread
   Update UI   onclick   Update UI


time
                                      UI Queue
                                         onmessage
Future
UI Thread
   Update UI   onclick   Update UI   onmessage


time
                                     UI Queue
Recommendations
• Use as few as necessary
 Timers     • If multiple are necessary, use a single timer that can
              accommodate all



Animation   • Use CSS transitions and animations first
            • If not possible, use requestAnimationFrame()




 Other      • Use web workers for efficient data processing
            • If no other options, use timers (see first point)
Etcetera
My company:     • wellfurnished.com
    My blog:    • nczonline.net
     Twitter    • @slicknet
These Slides:   • slideshare.net/nzakas

More Related Content

What's hot

Advanced task management with Celery
Advanced task management with CeleryAdvanced task management with Celery
Advanced task management with CeleryMahendra M
 
How to Avoid Common Mistakes When Using Reactor Netty
How to Avoid Common Mistakes When Using Reactor NettyHow to Avoid Common Mistakes When Using Reactor Netty
How to Avoid Common Mistakes When Using Reactor NettyVMware Tanzu
 
RxJS Operators - Real World Use Cases - AngularMix
RxJS Operators - Real World Use Cases - AngularMixRxJS Operators - Real World Use Cases - AngularMix
RxJS Operators - Real World Use Cases - AngularMixTracy Lee
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJSBrainhub
 
sizeof(Object): how much memory objects take on JVMs and when this may matter
sizeof(Object): how much memory objects take on JVMs and when this may mattersizeof(Object): how much memory objects take on JVMs and when this may matter
sizeof(Object): how much memory objects take on JVMs and when this may matterDawid Weiss
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Vlad Posea
 
A Forgotten HTTP Invisibility Cloak
A Forgotten HTTP Invisibility CloakA Forgotten HTTP Invisibility Cloak
A Forgotten HTTP Invisibility CloakSoroush Dalili
 
From Java 11 to 17 and beyond.pdf
From Java 11 to 17 and beyond.pdfFrom Java 11 to 17 and beyond.pdf
From Java 11 to 17 and beyond.pdfJosé Paumard
 
Introduction to kotlin coroutines
Introduction to kotlin coroutinesIntroduction to kotlin coroutines
Introduction to kotlin coroutinesNAVER Engineering
 
Node.js Socket.IO
Node.js  Socket.IONode.js  Socket.IO
Node.js Socket.IOEyal Vardi
 
Kotlin scope functions
Kotlin scope functionsKotlin scope functions
Kotlin scope functionsWaheed Nazir
 
Developing RESTful Web APIs with Python, Flask and MongoDB
Developing RESTful Web APIs with Python, Flask and MongoDBDeveloping RESTful Web APIs with Python, Flask and MongoDB
Developing RESTful Web APIs with Python, Flask and MongoDBNicola Iarocci
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & VuexBernd Alter
 
Getting Started with Spring Authorization Server
Getting Started with Spring Authorization ServerGetting Started with Spring Authorization Server
Getting Started with Spring Authorization ServerVMware Tanzu
 

What's hot (20)

Advanced task management with Celery
Advanced task management with CeleryAdvanced task management with Celery
Advanced task management with Celery
 
How to Avoid Common Mistakes When Using Reactor Netty
How to Avoid Common Mistakes When Using Reactor NettyHow to Avoid Common Mistakes When Using Reactor Netty
How to Avoid Common Mistakes When Using Reactor Netty
 
RxJS Operators - Real World Use Cases - AngularMix
RxJS Operators - Real World Use Cases - AngularMixRxJS Operators - Real World Use Cases - AngularMix
RxJS Operators - Real World Use Cases - AngularMix
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
 
Gestion comptes bancaires Spring boot
Gestion comptes bancaires Spring bootGestion comptes bancaires Spring boot
Gestion comptes bancaires Spring boot
 
Javascript Design Patterns
Javascript Design PatternsJavascript Design Patterns
Javascript Design Patterns
 
sizeof(Object): how much memory objects take on JVMs and when this may matter
sizeof(Object): how much memory objects take on JVMs and when this may mattersizeof(Object): how much memory objects take on JVMs and when this may matter
sizeof(Object): how much memory objects take on JVMs and when this may matter
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1
 
A Forgotten HTTP Invisibility Cloak
A Forgotten HTTP Invisibility CloakA Forgotten HTTP Invisibility Cloak
A Forgotten HTTP Invisibility Cloak
 
Giới thiệu Embulk
Giới thiệu Embulk Giới thiệu Embulk
Giới thiệu Embulk
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
From Java 11 to 17 and beyond.pdf
From Java 11 to 17 and beyond.pdfFrom Java 11 to 17 and beyond.pdf
From Java 11 to 17 and beyond.pdf
 
Introduction to kotlin coroutines
Introduction to kotlin coroutinesIntroduction to kotlin coroutines
Introduction to kotlin coroutines
 
React js
React jsReact js
React js
 
Node.js Socket.IO
Node.js  Socket.IONode.js  Socket.IO
Node.js Socket.IO
 
Kotlin scope functions
Kotlin scope functionsKotlin scope functions
Kotlin scope functions
 
Developing RESTful Web APIs with Python, Flask and MongoDB
Developing RESTful Web APIs with Python, Flask and MongoDBDeveloping RESTful Web APIs with Python, Flask and MongoDB
Developing RESTful Web APIs with Python, Flask and MongoDB
 
Introduction to VueJS & Vuex
Introduction to VueJS & VuexIntroduction to VueJS & Vuex
Introduction to VueJS & Vuex
 
Polymorphisme (cours, résumé)
Polymorphisme (cours, résumé)Polymorphisme (cours, résumé)
Polymorphisme (cours, résumé)
 
Getting Started with Spring Authorization Server
Getting Started with Spring Authorization ServerGetting Started with Spring Authorization Server
Getting Started with Spring Authorization Server
 

Similar to JavaScript Timers, Power Consumption, and Performance

High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010Nicholas 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 (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)Nicholas Zakas
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010Nicholas 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 JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)Nicholas Zakas
 
JavaScript Async for Effortless UX
JavaScript Async for Effortless UXJavaScript Async for Effortless UX
JavaScript Async for Effortless UX재석 강
 
Introducing PanelKit
Introducing PanelKitIntroducing PanelKit
Introducing PanelKitLouis D'hauwe
 
JavaFX GUI architecture with Clojure core.async
JavaFX GUI architecture with Clojure core.asyncJavaFX GUI architecture with Clojure core.async
JavaFX GUI architecture with Clojure core.asyncFalko Riemenschneider
 
Setting UIAutomation free with Appium
Setting UIAutomation free with AppiumSetting UIAutomation free with Appium
Setting UIAutomation free with AppiumDan Cuellar
 
Asynchronous Programming at Netflix
Asynchronous Programming at NetflixAsynchronous Programming at Netflix
Asynchronous Programming at NetflixC4Media
 
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David OrtinauCrafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David OrtinauXamarin
 
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
 
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade ServerlessKatyShimizu
 
[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade Serverless[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade ServerlessKatyShimizu
 
Intro To webOS
Intro To webOSIntro To webOS
Intro To webOSfpatton
 
Medium TechTalk — iOS
Medium TechTalk — iOSMedium TechTalk — iOS
Medium TechTalk — iOSjimmyatmedium
 

Similar to JavaScript Timers, Power Consumption, and Performance (20)

High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010High Performance JavaScript - WebDirections USA 2010
High Performance JavaScript - WebDirections USA 2010
 
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 (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010High Performance JavaScript - Fronteers 2010
High Performance JavaScript - Fronteers 2010
 
Responsive interfaces
Responsive interfacesResponsive interfaces
Responsive interfaces
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 
High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)High Performance JavaScript (YUIConf 2010)
High Performance JavaScript (YUIConf 2010)
 
JavaScript Async for Effortless UX
JavaScript Async for Effortless UXJavaScript Async for Effortless UX
JavaScript Async for Effortless UX
 
Introducing PanelKit
Introducing PanelKitIntroducing PanelKit
Introducing PanelKit
 
JavaFX GUI architecture with Clojure core.async
JavaFX GUI architecture with Clojure core.asyncJavaFX GUI architecture with Clojure core.async
JavaFX GUI architecture with Clojure core.async
 
Setting UIAutomation free with Appium
Setting UIAutomation free with AppiumSetting UIAutomation free with Appium
Setting UIAutomation free with Appium
 
Asynchronous Programming at Netflix
Asynchronous Programming at NetflixAsynchronous Programming at Netflix
Asynchronous Programming at Netflix
 
Crafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David OrtinauCrafting interactions with Core Animations, David Ortinau
Crafting interactions with Core Animations, David Ortinau
 
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
 
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
[NDC 2019] Functions 2.0: Enterprise-Grade Serverless
 
[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade Serverless[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade Serverless
 
Android Threading
Android ThreadingAndroid Threading
Android Threading
 
Intro To webOS
Intro To webOSIntro To webOS
Intro To webOS
 
Medium TechTalk — iOS
Medium TechTalk — iOSMedium TechTalk — iOS
Medium TechTalk — iOS
 

More from Nicholas Zakas

Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!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 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011Nicholas Zakas
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)Nicholas Zakas
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! HomepageNicholas 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
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScriptNicholas Zakas
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScriptNicholas Zakas
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScriptNicholas Zakas
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable PerformanceNicholas 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 (20)

Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Enough with the JavaScript already!
Enough with the JavaScript already!Enough with the JavaScript already!
Enough with the JavaScript already!
 
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 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Maintainable JavaScript 2011
Maintainable JavaScript 2011Maintainable JavaScript 2011
Maintainable JavaScript 2011
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
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)
 
YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)YUI Test The Next Generation (YUIConf 2010)
YUI Test The Next Generation (YUIConf 2010)
 
Performance on the Yahoo! Homepage
Performance on the Yahoo! HomepagePerformance on the Yahoo! Homepage
Performance on the Yahoo! Homepage
 
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
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
 
Speed Up Your JavaScript
Speed Up Your JavaScriptSpeed Up Your JavaScript
Speed Up Your JavaScript
 
Maintainable JavaScript
Maintainable JavaScriptMaintainable JavaScript
Maintainable JavaScript
 
JavaScript Variable Performance
JavaScript Variable PerformanceJavaScript Variable Performance
JavaScript Variable Performance
 
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

20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
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
 
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
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
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
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.francesco barbera
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Recently uploaded (20)

20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
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
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
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
 
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...
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
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
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
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
 
Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.Digital magic. A small project for controlling smart light bulbs.
Digital magic. A small project for controlling smart light bulbs.
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

JavaScript Timers, Power Consumption, and Performance

Editor's Notes

  1. Go to several examples
  2. C0Operational state. CPU fully turned on.C1First idle state. Stops CPU main internal clocks via software. Bus interface unit and APIC are kept running at full speed.C2Stops CPU main internal clocks via hardware. State where the processor maintains all software-visible states, but may take longer to wake up through interrupts.C3Stops all CPU internal clocks. The processor does not need to keep its cache coherent, but maintains other states. Some processors have variations of the C3 state that differ in how long it takes to wake the processor through interrupts.