• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript Timers, Power Consumption, and Performance
 

JavaScript Timers, Power Consumption, and Performance

on

  • 11,924 views

E

E

Statistics

Views

Total Views
11,924
Views on SlideShare
11,005
Embed Views
919

Actions

Likes
42
Downloads
213
Comments
2

20 Embeds 919

http://localhost 299
http://www.scoop.it 242
http://lanyrd.com 84
https://twitter.com 73
http://www.tornil.me 72
http://bobuss.tumblr.com 50
http://tornil.me 33
http://www.plurk.com 16
http://blog.tornil.me 14
http://pixel67.tumblr.com 9
http://wakebot.com 6
http://us-w1.rockmelt.com 5
https://www.linkedin.com 5
http://www.linkedin.com 3
http://bertrand.tornil.me 2
https://si0.twimg.com 2
http://snipick.com 1
http://translate.googleusercontent.com 1
http://these.tornil.me 1
http://moderation.local 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Go to several examples
  • 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.

JavaScript Timers, Power Consumption, and Performance JavaScript Timers, Power Consumption, and Performance Presentation Transcript

  • flickr.com/photos/barbourians/6662357209/ Timers, Power Consumption, and PerformanceNicholas C. ZakasChief Architect, WellFurnished
  • New
  • @slicknet (Complaints: @souders)
  • UI Thread ExecuteUpdate 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 ClickUI Threadtime UI Queue
  • When ClickedUI Threadtime UI Queue Update UI onclick Update UI
  • When ClickedUI Thread Update UItime UI Queue Draw down state onclick Update UI
  • When ClickedUI Thread Update UI onclicktime UI Queue Update UI
  • When ClickedUI Thread Update UI onclick Update UItime 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 appliesALL CHANGES since the last UI update
  • I gonna make anamination!! 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";}
  • Whyyou nowork???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 executevar tId = setTimeout(function(){ // do something Delay in}, 1500); milliseconds// optionalclearTimeout(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 ClickedUI Threadtime UI Queue Update UI onclick Update UI
  • When ClickedUI Thread Update UItime UI Queue Draw down state onclick Update UI
  • When ClickedUI Thread Update UI onclicktime UI Queue Update UI
  • When ClickedUI Thread Update UI onclick Update UItime UI Queue Draw up state
  • After 25msUI Thread Update UI onclick Update UItime UI Queue JavaScript Added to back of queue
  • FutureUI Thread Update UI onclick Update UI JavaScripttime UI Queue
  • FutureUI Thread Update UI onclick Update UI JavaScripttime 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, whichmeans that every 15.6 ms the operating system receives a clock interruptfrom 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 SleepLow C4 Deep SleepPower 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 runtime on mobile systems by as much as 25 percent.-Timers, Timer Resolution, and Development of Efficient Code (Microsoft) Laptops!
  • Web Timer Resolution TodayPlugged In 4ms 4ms 4ms 4ms 4msBattery 4ms 15.6ms 4ms 15.6ms 4msBackground 1s 1s 4ms 1s* 4ms * Internet Explorer 10
  • Web Timer Resolution TodayBattery 4ms 10ms 10ms 10ms 4msBackground Tab - 10ms 10ms 10ms 1sBackground 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 >= 1000msHigh Frequency < 1000ms
  • Time For 10% Power Use By FrequencyMinutes 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 QueueUI Threadtime 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 dovar 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 webkithttp://www.w3.org/TR/animation-timing/
  • Code to executevar rId = requestAnimationFrame(function(time){ // do something});// optional Time whenclearAnimationFrame(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 ClickedUI Threadtime UI Queue Update UI onclick Update UI
  • When ClickedUI Thread Update UItime UI Queue Draw down state onclick Update UI
  • When ClickedUI Thread Update UI onclicktime UI Queue Update UI
  • Call to requestAnimationFrame()UI Thread Update UI onclicktime UI Queue Update UI Changes Anim Frame
  • When ClickedUI Thread Update UI onclick Update UItime UI Queue Changes Draw up state Anim Frame
  • Before Next FrameUI Thread Update UI onclick Update UI Changestime UI Queue Anim Frame
  • Naminate!UI Thread Update UI onclick Update UI Changes Anim Frametime 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 its capped at under1fps. 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 executevar iId = setImmediate(function(){ // do something msSetImmediate()}); msClearImmediate()// optionalclearImmediate(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 ClickedUI Threadtime UI Queue Update UI onclick Update UI
  • When ClickedUI Thread Update UItime UI Queue Draw down state onclick Update UI
  • When ClickedUI Thread Update UI onclicktime UI Queue Update UI
  • Call to setImmediate()UI Thread Update UI onclicktime UI Queue Update UI Changes Always added after the last UI update in the queue
  • When ClickedUI Thread Update UI onclick Update UItime UI Queue Changes Draw up state
  • Immediately!UI Thread Update UI onclick Update UI Changestime UI Queue
  • https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html
  • http://www.w3.org/TR/workers/
  • //in pagevar worker = new Worker("process.js");worker.onmessage = function(event){ useData(event.data);};worker.postMessage(values);
  • //in process.jsself.onmessage = function(event){ var items = event.data; for (var i=0,len=items.length; i < len; i++){ process(items[i]); } self.postMessage(items);};
  • When ClickedUI Threadtime UI Queue Update UI onclick Update UI
  • When ClickedUI Thread Update UItime UI Queue Draw down state onclick Update UI
  • When ClickedUI Thread Update UI onclicktime UI Queue Update UI
  • Create Web WorkerUI Thread Update UI onclicktime UI Queue Update UI Creates a backgroundthread/process/etc.
  • postMessage()UI Thread Update UI onclick Update UItime UI Queue process
  • Worker CompleteUI Thread Update UI onclick Update UItime UI Queue onmessage
  • FutureUI Thread Update UI onclick Update UI onmessagetime UI Queue
  • Recommendations
  • • Use as few as necessary Timers • If multiple are necessary, use a single timer that can accommodate allAnimation • 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)
  • EtceteraMy company: • wellfurnished.com My blog: • nczonline.net Twitter • @slicknetThese Slides: • slideshare.net/nzakas