What the Web Worker

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

Transcript

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