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";
}
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";
}
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?
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!
64.
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
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!
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.
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);
}());
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
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
Editor's Notes
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.