4. In the beginning
4
if (heard?)
if (heard? && used?)
if (heard? && used? && frustrated?)
if (heard? && used? && used_in_project?)
Sunday, May 19, 13
5. Web Worker
A web worker, as defined by the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working
Group (WHATWG), is a JavaScript script executed from an HTML
page that runs in the background, independently of other, user-
interface scripts that may also have been executed from the same
HTML page. Web workers are able to utilize multi-core CPUs more
effectively.
http://en.wikipedia.org/wiki/Web_worker
5
Sunday, May 19, 13
6. Web Worker
6
http://en.wikipedia.org/wiki/Web_worker
A web worker, as defined by the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working
Group (WHATWG), is a JavaScript script executed from an HTML
page that runs in the background, independently of other, user-
interface scripts that may also have been executed from the same
HTML page. Web workers are able to utilize multi-core CPUs more
effectively.
Sunday, May 19, 13
31. Worker can use
• navigator
• location(read-only)
• XMLHttpRequest
• setTimeout/setInterval
• Basic Javascript data Structure and
Function(Math, Date, Array, etc.)
31
Functions available to workers : https://developer.mozilla.org/en-US/docs/DOM/Worker/Functions_available_to_workers
Sunday, May 19, 13
32. 32
Web Workers in IE10: Background JavaScript Makes Web Apps Faster
Sunday, May 19, 13
37. Use Case
Prefetching and/or caching data for later use
• Code syntax highlighting or other real-time text formatting
• Spell checker
• Analyzing video or audio data
• Background I/O or polling of web services
• Processing large arrays or humungous JSON responses
• Image filtering in <canvas>
• Updating many rows of a local web database
37
Sunday, May 19, 13
38. front-end is more and more
• upload image: resize/rotate/filtering
• upload/download file format: use a
format for the server, translating
other format in client side.
38
powerful
Sunday, May 19, 13
41. Background tasks run while user
interacting
• auto save the draft of article
• syntax highlighting
• log user’s behavior(mouse tracking,
clicking, etc...)
• prefetching data
• predicting user behavior
• Generate complicated html template
41
Sunday, May 19, 13
43. Real world usage
• Syntax highlighting : ace code editor(Bespin)
• Crypto : SHA1 Checksum Calculator
• Graphics/image
• snowCam
• arborjs: http://arborjs.org/
• A User-Driven Web OS: http://grimwire.github.io/grimwire
• parallel.js: http://adambom.github.io/parallel.js/
• Post huge data to server
43
Sunday, May 19, 13
48. Break dependency
48
worker = new Worker('/worker_path/my_worker.js');
define (require)->
require 'jquery'
car = require 'lib/car'
plane = require 'lib/plane'
break requirejs dependency
Master
Sunday, May 19, 13
49. inline Worker
49
var jscontent = require('text!workerScript/inline_worker.js');
var blobWorker = new Blob([jscontent], {type:'application/javascript'});
var blobWorker_url = URL.createObjectURL(blobWorker);
URL.revokeObjectURL(blobWorker_url);
inlineWorker.terminate();
var inlineWorker = new Worker(blobWorker_url);
require text plugin
Master
Release resource
Sunday, May 19, 13
56. pass Transferable Object
56
worker.postMessage(arrayBuffer, [arrayBuffer]);
var SIZE = 1024 * 1024 * 32; // 32MB
var arrayBuffer = new ArrayBuffer(SIZE);
var uInt8View = new Uint8Array(arrayBuffer);
var originalLength = uInt8View.length;
for (var i = 0; i < originalLength; ++i) {
uInt8View[i] = i;
}
worker.postMessage(uInt8View.buffer, [uInt8View.buffer]);
Master
Sunday, May 19, 13
57. Feature Detection
57
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
//If the buffer is transferred and not copied,
its .byteLength will go to 0:
if (ab.byteLength) {
alert('Transferables are not supported in your browser!');
} else {
// Transferables are supported.
}
http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast
Master
Sunday, May 19, 13
58. Expectation?
58
It must be faster.
It should be easy to use.
It should avoid blocking UI.
Cost of creating Worker
Hardly to set up dependency
if we need to pass massive data
Sunday, May 19, 13