Bingo2013/05/19

1

Web WorkerWhat the

Sunday, May 19, 13

About Me

• front-end Engineer at

• http://blog.blackbing.net

• blackbing@gmail.com

• https://www.facebook.com/blackbing

2

Sunday, May 19, 13

Hello Web Worker

3

Sunday, May 19, 13

In the beginning

4

if (heard?)

if (heard? && used?)

if (heard? && used? && frustrated?)

if (heard? && used? && used_in_project?)

Sunday, May 19, 13

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

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

Sunday, May 19, 13

UI Blocking?

• javascript is single-threaded

• UI rendering

• executing javascript

8http://www.nczonline.net/blog/2010/08/10/what-is-a-non-blocking-script/

Sunday, May 19, 13

Boss said...

9

1+2+3+...+n

Sunday, May 19, 13

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

getsum(1,000)

getsum(100,000)

getsum(1,000,000,000)

杯具

Sunday, May 19, 13

DEMO

12

http://blackbing.github.com/WorkerD/why.html

Sunday, May 19, 13

13

Sunday, May 19, 13

14

Sunday, May 19, 13

1+2+..+n =

15

Sunday, May 19, 13

16

Sunday, May 19, 13

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

Sunday, May 19, 13

Expectation

19

It should be faster.It should be easy to use.It should avoid blocking UI.

Sunday, May 19, 13

CAN I USE it on Desktop?

20http://caniuse.com/#search=worker

100%

Sunday, May 19, 13

CAN I USE it on Mobile?

21http://caniuse.com/#search=worker

Sunday, May 19, 13

CAN I USE it on Mobile?

22http://caniuse.com/#search=worker

100%(!?)

Sunday, May 19, 13

23

Sunday, May 19, 13

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

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

Worker cannot access

• window

• DOM

• document

• parent

is undefined

is undefined

is undefined

is undefined

26

Sunday, May 19, 13

Pass window object?

worker.postMessage(window);

27

Master

Sunday, May 19, 13

postMessage

28

worker.postMessage({ 'number': 1234, 'reg': /[\d]+/ig, 'boolean': true, 'object': { 'foo':'bar' }, 'array': ['foo','bar']})

Master

Sunday, May 19, 13

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

30http://ajaxian.com/archives/an-implausibly-illustrated-introduction-to-html5-web-workers

Sunday, May 19, 13

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

Web Workers in IE10: Background JavaScript Makes Web Apps Faster

Sunday, May 19, 13

Debug

33

worker.addEventListener('error', function(error){ console.error(error.message); console.error(error.filename); console.error(error.lineno);});

Master

Sunday, May 19, 13

Import Scripts

34

importScripts("http://underscorejs.org/underscore.js")

no jQuery, Backbone, etc.

Worker

Sunday, May 19, 13

Release Worker

35

worker.terminate()

self.close()

Master

Worker

Sunday, May 19, 13

Cost

36

Sunday, May 19, 13

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

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

Client-Server

39

Client

Server Server Server Server

Sunday, May 19, 13

Client-Server

40

Master HTML

Worker Worker Worker Worker

Sunday, May 19, 13

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 template41

Sunday, May 19, 13

Mobile

• Limited capability on mobile

• Multicore CPU

42

Sunday, May 19, 13

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

Wanna Try?

• http://webworkersandbox.com/

44

Sunday, May 19, 13

Brief Summary

• What is web worker?

• Basic usage

• onMessage/postMessage

• Debug

• Use case and real world usage

45

Sunday, May 19, 13

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

Problems

• Break dependency

• Hardly debug

• Troublesome on postMessage

47

Sunday, May 19, 13

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

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 pluginMaster

Release resource

Sunday, May 19, 13

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

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

Passing Massive Data

52

worker.postMessage({ //it is a very very complicated JSON})

Worker

UI still block!

Master

Sunday, May 19, 13

Solution

• Split the data

• Transferable Object

53

Sunday, May 19, 13

Split data

54

Worker

Sunday, May 19, 13

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

pass Transferable Object

56

worker.postMessage(arrayBuffer, [arrayBuffer]);

var SIZE = 1024 * 1024 * 32; // 32MBvar 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

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

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

WorkerD

59

https://github.com/blackbing/WorkerD

bower install WorkerD

Sunday, May 19, 13

Why D?

60

Sunday, May 19, 13

Benefits

61

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

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

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

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

Live Demo

65

http://blackbing.github.com/WorkerD/sandbox.html

Sunday, May 19, 13

Real World Example

66

Sunday, May 19, 13

67

https://c9.io

Sunday, May 19, 13

68

http://antimatter15.github.io/js-typed-array-sha1/

Sunday, May 19, 13

69

http://arborjs.org/

Sunday, May 19, 13

70

https://start.htc.com

Sunday, May 19, 13

71

http://adambom.github.io/parallel.js/

Sunday, May 19, 13

72

前端效能提升方案

Web Worker 神器

Web Worker老木!?

做!就對了!

Sunday, May 19, 13

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

Thank you

74

Sunday, May 19, 13

We are hiring front-end Engineer

75 https://www.facebook.com/blackbingSunday, May 19, 13