JavaScript Timers, Power Consumption, and Performance

flickr.com/photos/barbourians/6662357209/ Timers, Power Consumption, and PerformanceNicholas C. ZakasChief Architect, WellFurnished

@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 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);}());

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

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>

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>

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);};

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

http://localhost	299
http://www.scoop.it	241
http://www.tornil.me	68
http://lanyrd.com	65
http://bobuss.tumblr.com	43
http://tornil.me	33
http://www.plurk.com	16
http://blog.tornil.me	14
https://twitter.com	11
http://pixel67.tumblr.com	9
http://wakebot.com	6
http://us-w1.rockmelt.com	5
http://www.linkedin.com	3
http://bertrand.tornil.me	2
https://si0.twimg.com	2
http://these.tornil.me	1
http://snipick.com	1
http://translate.googleusercontent.com	1

JavaScript Timers, Power Consumption, and Performance

by Nicholas Zakas on Jun 27, 2012

Accessibility

Categories

Upload Details

Usage Rights

18 Embeds 820

Statistics

JavaScript Timers, Power Consumption, and Performance Presentation Transcript