隨著Web Application的發展，前端開發越來越複雜，多執行緒的需求也慢慢浮現，本議題主要介紹何謂Web Worker，到底能做到什麼，不能做到什麼，以及實際案例的分享。

1. Bingo
2013/05/19
1
Web Worker
What the
Sunday, May 19, 13

2. About Me
• front-end Engineer at
• http://blog.blackbing.net
• blackbing@gmail.com
• https://www.facebook.com/blackbing
2
Sunday, May 19, 13

3. Hello Web Worker
3
Sunday, May 19, 13

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

7. 7
Sunday, May 19, 13

8. UI Blocking?
• javascript is single-threaded
• UI rendering
• executing javascript
8
http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/
Sunday, May 19, 13

9. Boss said...
9
1+2+3+...+n
Sunday, May 19, 13

10. That’s easy!
function getsum(max) {
var cnt = 0;
var sum = 0;
while (cnt <= max) {
sum += cnt++;
}
return sum;
}
10
Sunday, May 19, 13

11. 11
getsum(1,000)
getsum(100,000)
getsum(1,000,000,000)
杯具
Sunday, May 19, 13

12. DEMO
12
http://blackbing.github.com/WorkerD/why.html
Sunday, May 19, 13

13. 13
Sunday, May 19, 13

14. 14
Sunday, May 19, 13

15. 1+2+..+n =
15
Sunday, May 19, 13

16. 16
Sunday, May 19, 13

17. Don’t jump into Web Worker
for using Web Worker.
17
If you just think it’s cool
,you’ll be frustrated.
Sunday, May 19, 13

18. 18
Sunday, May 19, 13

19. Expectation
19
It should be faster.
It should be easy to use.
It should avoid blocking UI.
Sunday, May 19, 13

20. CAN I USE it on Desktop?
20
http://caniuse.com/#search=worker
100%
Sunday, May 19, 13

21. CAN I USE it on Mobile?
21
http://caniuse.com/#search=worker
Sunday, May 19, 13

22. CAN I USE it on Mobile?
22
http://caniuse.com/#search=worker
100%(!?)
Sunday, May 19, 13

23. 23
Sunday, May 19, 13

24. new Worker
var worker = new Worker('worker.js');
worker.postMessage(something);
worker.onmessage = function(e) {
console.log('Worker said: ', e.data);
});
24
self.onmessage = function(e) {
self.postMessage(e.data);
};
Master
Worker
Sunday, May 19, 13

25. var worker = new Worker('worker.js');
worker.postMessage(something);
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);
25
self.addEventListener('message', function(e) {
self.postMessage(e.data);
}, false);
Master
Worker
new Worker
Sunday, May 19, 13

26. Worker cannot access
• window
• DOM
• document
• parent
is undefined
is undefined
is undefined
is undefined
26
Sunday, May 19, 13

27. Pass window object?
worker.postMessage(window);
27
Master
Sunday, May 19, 13

28. postMessage
28
worker.postMessage({
'number': 1234,
'reg': /[d]+/ig,
'boolean': true,
'object': {
'foo':'bar'
},
'array': ['foo','bar']
})
Master
Sunday, May 19, 13

29. postMessage
29
worker.postMessage({
'number': 1234,
'reg': /[d]+/ig,
'boolean': true,
'object': {
'foo':'bar'
},
'array': ['foo','bar'],
'func': function(){
//this is a function
}
})
Master
Sunday, May 19, 13

30. 30
http://ajaxian.com/archives/an-implausibly-illustrated-introduction-to-html5-web-workers
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

33. Debug
33
worker.addEventListener('error', function(error){
console.error(error.message);
console.error(error.filename);
console.error(error.lineno);
});
Master
Sunday, May 19, 13

34. Import Scripts
34
importScripts("http://underscorejs.org/underscore.js")
no jQuery, Backbone, etc.
Worker
Sunday, May 19, 13

35. Release Worker
35
worker.terminate()
self.close()
Master
Worker
Sunday, May 19, 13

36. Cost
36
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

39. Client-Server
39
Client
Server Server Server Server
Sunday, May 19, 13

40. Client-Server
40
Master HTML
Worker Worker Worker Worker
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

42. Mobile
• Limited capability on mobile
• Multicore CPU
42
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

44. Wanna Try?
• http://webworkersandbox.com/
44
Sunday, May 19, 13

45. Brief Summary
• What is web worker?
• Basic usage
• onMessage/postMessage
• Debug
• Use case and real world usage
45
Sunday, May 19, 13

46. Known Issue
• create worker in worker, but it is
currently not support in Chrome
• Crash when trying to use many
Webworkers
46
Sunday, May 19, 13

47. Problems
• Break dependency
• Hardly debug
• Troublesome on postMessage
47
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

50. Hardly debug
50
worker.addEventListener('error', function(error){
console.error(error.message);
console.error(error.filename);
console.error(error.lineno);
});
no console !?
Master
Sunday, May 19, 13

51. Troublesome on postMessage
51
var worker = new Worker('worker.js');
worker.postMessage({'type': 'task1', data:'blabla'});
worker.postMessage({'type': 'task2', data:'blabla'});
worker.postMessage({'type': 'task3', data:'blabla'});
....
self.addEventListener('message', function(e) {
var data = e.data;
var type = data.type;
if(type === 'task1')
//blablabla
else if(type === 'task2')
//blablabla
//......etc
}, false);
Master
Worker
Sunday, May 19, 13

52. Passing Massive Data
52
worker.postMessage({
//it is a very very complicated JSON
})
Worker
UI still block!
Master
Sunday, May 19, 13

53. Solution
• Split the data
• Transferable Object
53
Sunday, May 19, 13

54. Split data
54
Worker
Sunday, May 19, 13

55. Transferable Object
55
worker.postMessage({
'number': 1234,
'reg': /[d]+/ig,
'boolean': true,
'object': {
'foo':'bar'
},
'array': ['foo','bar'],
'ref_object': object_from_closure,
})
worker.postMessage('this is a string');
Worker
structured cloning
Freeeeze!!
Master
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

59. WorkerD
59
https://github.com/blackbing/WorkerD
bower install WorkerD
Sunday, May 19, 13

60. Why D?
60
Sunday, May 19, 13

61. Benefits
worker.send('count', {s:1, e:10})
syntax sugar
self.on('count', function(data){
//data is {s:1, e:10}
})
Master
Worker
Sunday, May 19, 13

62. 62
console
console.log/error/time/etc...
require([
"./car"
"./wheel"
], (Car, Wheel) ->
car = new Car('red')
wheel = new Wheel('iron')
)
require
Worker
Worker
Benefits
Sunday, May 19, 13

63. Example
63
jscontent = require('text!inline_worker.js')
$('#sum_with_worker').on('click', ->
loading()
worker = new WorkerD(inlineWorker_js)
worker.send('getSum', sumMax)
worker.on('gotSum', (event, data)->
log "gotSum: #{data}"
loaded()
)
)
@on "getSum", (max) ->
sum = cnt = 0
while(cnt<=max)
sum += cnt++
self.send('gotSum', sum)
Master
Worker
Sunday, May 19, 13

64. console
64
@on "getSum", (max) ->
console.group 'getSum'
console.time 'getSum'
console.log 'getSum'
console.log max
sum = cnt = 0
while(cnt<=max)
sum += cnt++
console.log sum
self.send 'gotSum', sum
console.log 'inlineWorker send message'
console.timeEnd 'getSum'
console.groupEnd 'getSum'
Worker
Sunday, May 19, 13

65. Live Demo
65
http://blackbing.github.com/WorkerD/sandbox.html
Sunday, May 19, 13

66. Real World Example
66
Sunday, May 19, 13

67. 67
https://c9.io
Sunday, May 19, 13

68. 68
http://antimatter15.github.io/js-typed-array-sha1/
Sunday, May 19, 13

69. 69
http://arborjs.org/
Sunday, May 19, 13

70. 70
https://start.htc.com
Sunday, May 19, 13

71. 71
http://adambom.github.io/parallel.js/
Sunday, May 19, 13

72. 72
前端效能提升方案
Web Worker 神器
Web Worker老木!?
做!就對了!
Sunday, May 19, 13

73. More Reading
73
http://www.html5rocks.com/en/tutorials/workers/basics/
http://social.msdn.microsoft.com/Search/en-US?query=web%20worker&ac=5
Sunday, May 19, 13

74. Thank you
74
Sunday, May 19, 13

75. We are hiring
front-end Engineer
75 https://www.facebook.com/blackbing
Sunday, May 19, 13