Responsive interfaces

Responsive Interfaces Nicholas C. Zakas Principal 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 onclick Start UI Thread UI Queue

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

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 page var 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: [email_address]
Twitter: @slicknet

http://www.slideshare.net	48
http://speakerrate.com	13
http://www.linkedin.com	3
http://www.lmodules.com	2
http://paper.li	1
http://www.avionnhealthcare.com	1

Responsive interfaces

by Nicholas Zakas on Apr 14, 2010

Accessibility

Upload Details

Usage Rights

6 Embeds 68

Statistics

Responsive interfaces Presentation Transcript