E

1. flickr.com/photos/barbourians/6662357209/
Timers,
Power Consumption,
and Performance
Nicholas C. Zakas
Chief Architect, WellFurnished

2. New

3. @slicknet
(Complaints:
@souders)

4. UI Thread
Execute
Update UI
JavaScript
flickr.com/photos/jepoirrier/954701212/

5. flickr.com/photos/55733754@N00/3325000738/

6. <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>

7. Before Click
UI Thread
time
UI Queue

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

9. When Clicked
UI Thread
Update UI
time
UI Queue
Draw down state onclick
Update UI

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

11. When Clicked
UI Thread
Update UI onclick Update UI
time
UI Queue
Draw up state

12. No UI updates while JavaScript is
executing

13. 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>

14. Each UI update applies
ALL CHANGES
since the last UI update

15. I gonna make
a
namination!!
flickr.com/photos/oakleyoriginals/3065393607/

16. 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";
}

19. Why
you no
work???
flickr.com/photos/tudor/318123668/

20. 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";
}

22. setTimeout()

23. Code to
execute
var tId = setTimeout(function(){
// do something
Delay in
}, 1500);
milliseconds
// optional
clearTimeout(tId)

24. setTimeout()
DOES NOT SAY
“Run this code after this delay”

25. setTimeout()
DOES SAY
“Add this code to the queue after this
delay”

26. <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>

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

28. When Clicked
UI Thread
Update UI
time
UI Queue
Draw down state onclick
Update UI

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

30. When Clicked
UI Thread
Update UI onclick Update UI
time
UI Queue
Draw up state

31. After 25ms
UI Thread
Update UI onclick Update UI
time
UI Queue
JavaScript
Added to back of
queue

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

33. Future
UI Thread
Update UI onclick Update UI JavaScript
time
UI Queue
Update UI
If the JavaScript changes
the UI, it triggers another
update

34. setTimeout() sends your code into the future

35. 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);

37. Animation Loop
(function(){
var delay = 100;
function moveTheThing(){
// actually move the thing
setTimeout(moveTheThing, delay);
}
setTimeout(moveTheThing, delay);
}());

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

39. And More!

40. setTimout() all the things!!!

41. Problems

43. 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)

44. var tId = setTimeout(function(){
// do something
}, 10);
What does it
mean?

45. http://ejohn.org/blog/accuracy-of-javascript-time/

49. Animation Loop
(function(){
var delay = 17;
Pretty
function moveTheThing(){
please?!?!
// actually move the thing
setTimeout(moveTheThing, delay);
}
setTimeout(moveTheThing, delay);
}());

50. http://ejohn.org/blog/analyzing-timer-performance/

53. 1ms all the timers!!!

54. http://www.belshe.com/2010/06/04/chrome-cranking-up-the-clock/

55. timeBeginPeriod()

56. timeBeginPeriod(1)

57. setTimout() all the things!!!

58. flickr.com/photos/antonfomkin/3046849320/

59. Modern CPUs are narcoleptic

60. 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

61. http://software.intel.com/en-us/articles/cpu-power-utilization-on-intel-architectures/

62. CPUs go to sleep when idle

63. 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!

65. 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

67. Web Timer Resolution Today
Battery 4ms 10ms 10ms 10ms 4ms
Background Tab - 10ms 10ms 10ms 1s
Background App - * * * 1s
* “Catches up” when switched back

68. 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!

69. Experiment
• Test single timer at different
intervals:
• 1000ms – 10ms

70. Low Frequency >= 1000ms
High Frequency < 1000ms

71. Time For 10% Power Use
By Frequency
Minutes 52-56 42-48 62-65

72. Timer frequency doesn’t matter

73. http://googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series-using.html

74. Experiment
• Test single timer at different
intervals:
• 1000ms – 10ms
• Test multiple timers at different
intervals
• 1000ms – 10ms x 10

75. Time For 10% Power Use
By Count
(same)
Minutes 52-56 42-48 62-65

76. Number of timers doesn’t matter

78. Number of timers does matter
(accuracy)

79. http://ejohn.org/apps/timers

80. http://ejohn.org/apps/timers

81. http://ejohn.org/apps/timers

82. Flooding the Queue
UI Thread
time
UI Queue
timer
timer
timer

83. Too many timers affects rendering

84. Elsewhere…

85. http://www.w3.org/TR/css3-animations/

86. Optimized animations using CSS

87. 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;
}
}

88. 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.

89. http://www.w3.org/2010/webperf/

90. moz webkit
http://www.w3.org/TR/animation-timing/

91. Code to
execute
var rId = requestAnimationFrame(function(time){
// do something
});
// optional
Time when
clearAnimationFrame(rId) the paint will
happen

92. New Animation Loop
(function(){
function moveTheThing(){ Hey browser!
I’m animating!
// actually move the thing
requestAnimationFrame(moveTheThing);
}
requestAnimationFrame(moveTheThing);
}());

93. New Animation Loop
(function(){
var element = document.getElementById("box");
function moveTheThing(){
element.style.left = (element.offsetLeft + 5) + "px";
requestAnimationFrame(moveTheThing);
}
requestAnimationFrame(moveTheThing);
}());

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

95. <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>

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

97. When Clicked
UI Thread
Update UI
time
UI Queue
Draw down state onclick
Update UI

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

99. Call to requestAnimationFrame()
UI Thread
Update UI onclick
time
UI Queue
Update UI
Changes
Anim Frame

100. When Clicked
UI Thread
Update UI onclick Update UI
time
UI Queue
Changes
Draw up state
Anim Frame

101. Before Next Frame
UI Thread
Update UI onclick Update UI Changes
time
UI Queue
Anim Frame

102. Naminate!
UI Thread
Update UI onclick Update UI Changes Anim Frame
time
UI Queue
Draw whatever changes
are necessary

103. [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)

104. Animate all the things!!!
…with CSS and
requestAnimationFrame

105. What about other things?

106. https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html

107. Code to
execute
var iId = setImmediate(function(){
// do something
msSetImmediate()
}); msClearImmediate()
// optional
clearImmediate(iId)

108. <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>

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

110. When Clicked
UI Thread
Update UI
time
UI Queue
Draw down state onclick
Update UI

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

112. Call to setImmediate()
UI Thread
Update UI onclick
time
UI Queue
Update UI
Changes
Always added after
the last UI update in
the queue

113. When Clicked
UI Thread
Update UI onclick Update UI
time
UI Queue
Changes
Draw up state

114. Immediately!
UI Thread
Update UI onclick Update UI Changes
time
UI Queue

115. https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html

116. http://www.w3.org/TR/workers/

117. //in page
var worker = new Worker("process.js");
worker.onmessage = function(event){
useData(event.data);
};
worker.postMessage(values);

118. //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);
};

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

120. When Clicked
UI Thread
Update UI
time
UI Queue
Draw down state onclick
Update UI

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

122. Create Web Worker
UI Thread
Update UI onclick
time
UI Queue
Update UI
Creates a
background
thread/process/etc.

123. postMessage()
UI Thread
Update UI onclick Update UI
time
UI Queue
process

124. Worker Complete
UI Thread
Update UI onclick Update UI
time
UI Queue
onmessage

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

126. Recommendations

127. • 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)

128. Etcetera
My company: • wellfurnished.com
My blog: • nczonline.net
Twitter • @slicknet
These Slides: • slideshare.net/nzakas