Post on 10-May-2015
Responsive Interfaces
Nicholas C. ZakasPrincipal Front-end Engineer,Yahoo! Homepage
Bayjax – April 13, 2010
The UI Thread
• Two jobs:– Draw UI updates– Execute JavaScript
• Only one job can happen at a time
• Jobs are added to a queue if they are generated while the UI thread is busy
<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button>
<script type="text/javascript">
window.onload = function(){
document.getElementById("btn").onclick = function(){
//do something
};
};
</script>
When Clicked
• A button UI change job is created– Draws the button in the down state
• A JavaScript execution job is created– The onclick event handler
• A button UI change job is created– Draws the button in the up state
Before Click
Start UI Thread
UI Queue
When Clicked
Start UI Thread
onclick
UI Queue
When Clicked
Start UI Thread
onclick
UI Queue
When Clicked
onclick
Start UI Thread
UI Queue
When Clicked
onclick
Start UI Thread
UI Queue
No UI updates while JavaScript is executing!
Why?
JavaScript May Cause UI Update
<button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button>
<script type="text/javascript">
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>
UI updates must use the latest info available
Long-running JavaScript
=
Unresponsive UI
Runaway Script Timer• Designed to prevent the browser from affecting
the operating system
• Limits the amount of time a script is allowed to execute
• Two types of limits:– Execution time
– Number of statements
• Always pops up a scary dialog to the user
• Exception: Opera has no runaway timer
Internet Explorer
Firefox
Safari
Chrome
Runaway Script Timer Limits• Internet Explorer: 5 million statements
• Firefox: 10 seconds
• Safari: 5 seconds
• Chrome: Unknown, hooks into normal crash control mechanism
• Opera: none
How long is too long?
How Long Is Too Long?
“0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.”
- Jakob Nielsen
Translation:
JavaScript should not execute for longer than 100ms to ensure
responsive UI
Recommendation:
Limit JavaScript to no more than 50ms at a time
function processArray(items, process, callback){
for (var i=0,len=items.length; i < len; i++){
process(items[i]);
}
callback();
}
Timers to the rescue!
JavaScript Timers
• Created using setTimeout()
• Schedules a new JavaScript execution job for some time in the future
• When the delay is up, the job is added to the UI queue– Note: This does not guarantee execution after
the delay, just that the job is added to the UI queue and will be executed when appropriate
JavaScript Timers
• For complex processing, split up into timed functionality
• Use timers to delay some processing for later
function timedProcessArray(items, process, callback){
//create a clone of the original var todo = items.concat();
setTimeout(function(){
var start = +new Date();
do {
process(todo.shift());
} while (todo.length > 0 &&
(+new Date() - start < 50));
if (todo.length > 0){
setTimeout(arguments.callee, 25);
} else {
callback(items);
}
}, 25);
}
Web Workers to the rescue!
Web Workers
• Asynchronous JavaScript execution
• Execution happens in a separate process– Not on the UI thread = no UI delays
• Data-driven API– Data is serialized when sending data into or out
of Worker– No access to DOM, BOM– Completely separate execution environment
//in pagevar worker = new Worker("code.js");
worker.onmessage = function(event){
alert(event.data);
};
worker.postMessage("Nicholas");
//in code.js
self.onmessage = function(event){
self.postMessage("Hello, " + event.data + "!");
};
Web Workers Support
• Firefox 3.5
• Safari 4
• Chrome 4
Summary
• UI thread is used both for JavaScript execution and UI updates
• UI cannot be updated while JavaScript is executing
• Keep JavaScript execution to 50ms – use timers and/or web workers to offload processing
Etcetera• My blog: www.nczonline.net
• My email: nzakas@yahoo-inc.com
• Twitter: @slicknet