SlideShare a Scribd company logo
1 of 128
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";
}
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";
}
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);
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
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/
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/
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!
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
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
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

RESTful API Design & Implementation with CodeIgniter PHP Framework
RESTful API Design & Implementation with CodeIgniter PHP FrameworkRESTful API Design & Implementation with CodeIgniter PHP Framework
RESTful API Design & Implementation with CodeIgniter PHP Framework
Bo-Yi Wu
 
Spring test mvc 발표자료
Spring test mvc 발표자료Spring test mvc 발표자료
Spring test mvc 발표자료
수홍 이
 

What's hot (20)

Web Designing Syllabus
Web Designing SyllabusWeb Designing Syllabus
Web Designing Syllabus
 
The WebKit project
The WebKit projectThe WebKit project
The WebKit project
 
Cpu Cache and Memory Ordering——并发程序设计入门
Cpu Cache and Memory Ordering——并发程序设计入门Cpu Cache and Memory Ordering——并发程序设计入门
Cpu Cache and Memory Ordering——并发程序设计入门
 
Malware Analysis Made Simple
Malware Analysis Made SimpleMalware Analysis Made Simple
Malware Analysis Made Simple
 
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [6시내고양포CAT몬] : Cat Anti-aging Project based Style...
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [6시내고양포CAT몬] : Cat Anti-aging Project based Style...제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [6시내고양포CAT몬] : Cat Anti-aging Project based Style...
제 17회 보아즈(BOAZ) 빅데이터 컨퍼런스 - [6시내고양포CAT몬] : Cat Anti-aging Project based Style...
 
Word2Vec 개요 및 활용
Word2Vec 개요 및 활용Word2Vec 개요 및 활용
Word2Vec 개요 및 활용
 
Design by contract(계약에의한설계)
Design by contract(계약에의한설계)Design by contract(계약에의한설계)
Design by contract(계약에의한설계)
 
Baekjoon Online Judge 1019번 풀이
Baekjoon Online Judge 1019번 풀이Baekjoon Online Judge 1019번 풀이
Baekjoon Online Judge 1019번 풀이
 
#살아있다 #자프링외길12년차 #코프링2개월생존기
#살아있다 #자프링외길12년차 #코프링2개월생존기#살아있다 #자프링외길12년차 #코프링2개월생존기
#살아있다 #자프링외길12년차 #코프링2개월생존기
 
Airtest Mobile Game Automation
Airtest Mobile Game AutomationAirtest Mobile Game Automation
Airtest Mobile Game Automation
 
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
 
RESTful API Design & Implementation with CodeIgniter PHP Framework
RESTful API Design & Implementation with CodeIgniter PHP FrameworkRESTful API Design & Implementation with CodeIgniter PHP Framework
RESTful API Design & Implementation with CodeIgniter PHP Framework
 
Présentation OSGI
Présentation OSGIPrésentation OSGI
Présentation OSGI
 
Practical Object Oriented Models In Sql
Practical Object Oriented Models In SqlPractical Object Oriented Models In Sql
Practical Object Oriented Models In Sql
 
엘라스틱서치 실무 가이드_202204.pdf
엘라스틱서치 실무 가이드_202204.pdf엘라스틱서치 실무 가이드_202204.pdf
엘라스틱서치 실무 가이드_202204.pdf
 
Spring test mvc 발표자료
Spring test mvc 발표자료Spring test mvc 발표자료
Spring test mvc 발표자료
 
Robot framework 을 이용한 기능 테스트 자동화
Robot framework 을 이용한 기능 테스트 자동화Robot framework 을 이용한 기능 테스트 자동화
Robot framework 을 이용한 기능 테스트 자동화
 
스프링 시큐리티 구조 이해
스프링 시큐리티 구조 이해스프링 시큐리티 구조 이해
스프링 시큐리티 구조 이해
 
Building Advanced XSS Vectors
Building Advanced XSS VectorsBuilding Advanced XSS Vectors
Building Advanced XSS Vectors
 
Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기Jpa 잘 (하는 척) 하기
Jpa 잘 (하는 척) 하기
 

Similar to JavaScript Timers, Power Consumption, and Performance

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 (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
Nicholas Zakas
 
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
Xamarin
 

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
 
Download and restrict video files in android app
Download and restrict video files in android appDownload and restrict video files in android app
Download and restrict video files in android app
 
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] Enterprise-Grade Serverless
[NDC 2019] Enterprise-Grade Serverless[NDC 2019] Enterprise-Grade Serverless
[NDC 2019] 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] Functions 2.0: Enterprise-Grade Serverless
 
Android Threading
Android ThreadingAndroid Threading
Android Threading
 
Intro To webOS
Intro To webOSIntro To webOS
Intro To webOS
 

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 Menace
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
 

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

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 

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.