Workers of the web - BrazilJS 2013

28,192 views

Published on

Concurrency in JavaScript, the potential and limitations.

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
28,192
On SlideShare
0
From Embeds
0
Number of Embeds
24,841
Actions
Shares
0
Downloads
22
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Workers of the web - BrazilJS 2013

  1. 1. Thibault Imbert Group Product Manager | Web Platform Workers of the Web Thibault Imbert @thibault_imbert Friday, August 23, 13
  2. 2. Records Friday, August 23, 13
  3. 3. Brazilian disco-funk Friday, August 23, 13
  4. 4. Brazilian disco-funk Friday, August 23, 13
  5. 5. Brazilian disco-funk Friday, August 23, 13
  6. 6. Brazilian disco-funk Friday, August 23, 13
  7. 7. Brazil’s food Friday, August 23, 13
  8. 8. Brazil’s food Friday, August 23, 13
  9. 9. Brazil Friday, August 23, 13
  10. 10. Estou me mudando para o Brasil Friday, August 23, 13
  11. 11. Adobe & the web? Friday, August 23, 13
  12. 12. Adobe & the web? http://html.adobe.com/webplatform/ Friday, August 23, 13
  13. 13. Friday, August 23, 13
  14. 14. JavaScript concurrency Friday, August 23, 13
  15. 15. JavaScript concurrency Multithreading Friday, August 23, 13
  16. 16. A single threaded world Friday, August 23, 13
  17. 17. Examples Friday, August 23, 13
  18. 18. Your budget 1000ms / 60fps = 16.67ms Friday, August 23, 13
  19. 19. A frame Rendering (repaint, reflow, etc.) Network (XHR) JavaScript (misc logic)6ms 2ms 8ms 16ms UI Thread Friday, August 23, 13
  20. 20. The budget 6ms 2ms 8ms Budget 16ms Rendering (repaint, reflow, etc.) Network (XHR) JavaScript (misc logic) UI Thread Friday, August 23, 13
  21. 21. 12ms 4ms 10ms Budget Over budget 26ms Rendering (repaint, reflow, etc.) Network (XHR) JavaScript (misc logic) UI Thread Friday, August 23, 13
  22. 22. Over budget 12ms 4ms 10ms Budget 10ms Rendering (repaint, reflow, etc.) Network (XHR) JavaScript (misc logic) 26ms UI Thread UI Impact Friday, August 23, 13
  23. 23. 6ms 4ms 20ms Budget Over budget 30ms Rendering (repaint, reflow, etc.) Network (XHR) JavaScript (misc logic) UI impact UI Thread Friday, August 23, 13
  24. 24. Dev tools Time spent Impact on fps Friday, August 23, 13
  25. 25. So how do we fix that? Friday, August 23, 13
  26. 26. Web Workers Friday, August 23, 13
  27. 27. Support Friday, August 23, 13
  28. 28. Detection Friday, August 23, 13
  29. 29. Detection function supports_web_workers() { return window.Worker != null; } Friday, August 23, 13
  30. 30. Detection function supports_web_workers() { return window.Worker != null; } if (Modernizr.webworkers) { // Workers are available } else { // fallback } Friday, August 23, 13
  31. 31. Most common use case 1. Responsive programming When you have an expensive computation to perform and don’t want to block the UI. Friday, August 23, 13
  32. 32. By default, the UI thread Rendering Network JavaScript6ms 2ms 8ms 16ms UI Thread Friday, August 23, 13
  33. 33. In parallel Rendering Network JavaScript6ms 2ms 8ms 16ms UI Thread (Thread 1) 10ms Web Worker (Thread 2) JavaScript Friday, August 23, 13
  34. 34. In parallel Rendering Network JavaScript6ms 2ms 8ms 16ms 28ms JavaScript UI Thread (Thread 1) Web Worker (Thread 2) Network Friday, August 23, 13
  35. 35. In parallel Rendering Network JavaScript6ms 2ms 8ms 16ms 44ms JavaScript UI Thread (Thread 1) Web Worker (Thread 2) Network Friday, August 23, 13
  36. 36. In parallel Rendering Network JavaScript6ms 2ms 8ms 16ms 44ms UI Thread (Thread 1) Web Worker (Thread 2) Loading remote data Parsing of XHR data Encoding/Decoding Physics AI (pathfinding, etc.) Friday, August 23, 13
  37. 37. Life as a worker What is available: XMLHttpRequest The Application Cache Spawning other web workers The navigator object The location object (read-only) setTimeout()/clearTimeout() and setInterval()/clearInterval() Importing external scripts using the importScripts() method What is not: The DOM The window object The document object The parent object Friday, August 23, 13
  38. 38. Web Workers == Threads ? Workers and threads Friday, August 23, 13
  39. 39. 1. Workers are higher-level than threads and safe First difference Friday, August 23, 13
  40. 40. Why not threads? Threads are hard to use. Too low-level for web development. We should not expose that level of complexity to web developers. Locks, manual synchronization, race conditions, really? Friday, August 23, 13
  41. 41. var worker = new Worker("background.js"); JSVM Impact on memory Slow instantiation time Thread Higher-level than threads Own heap and stack Friday, August 23, 13
  42. 42. 2. Data passing Second difference Friday, August 23, 13
  43. 43. Threads and memory Shared memory Thread 2 Thread 5 Thread 1 Thread 4 Thread 3 Friday, August 23, 13
  44. 44. Threads and memory Shared memory Thread 2 Thread 5 Thread 1 Thread 4 Thread 3 Friday, August 23, 13
  45. 45. Threads and memory Friday, August 23, 13
  46. 46. With Web Workers, nothing is shared var worker1 = new Worker("background-task-1.js"); var worker3 = new Worker("background-task-3.js"); var worker2 = new Worker("background-task-2.js"); Cloning Cloning Transfer of ownership Friday, August 23, 13
  47. 47. 1 Web Worker == 1 core ? Workers and cores Friday, August 23, 13
  48. 48. Workers and cores UI Thread (Thread 1) Web Worker (Thread 2) Time Single CPU Friday, August 23, 13
  49. 49. Workers and cores Time Multicore CPU UI Thread (Thread 1) Web Worker (Thread 2) Friday, August 23, 13
  50. 50. Workers and cores Friday, August 23, 13
  51. 51. Workers and cores 1. It is not possible to specify if a Web Worker should run on a specific core. Friday, August 23, 13
  52. 52. Workers and cores 1. It is not possible to specify if a Web Worker should run on a specific core. 2. Web Workers on a single core CPU, will not run in parallel but will still not block the UI. Friday, August 23, 13
  53. 53. Workers and cores 1. It is not possible to specify if a Web Worker should run on a specific core. 2. Web Workers on a single core CPU, will not run in parallel but will still not block the UI. 3. On a multicore CPU, Web Workers can run truly in parallel if the OS decides to. Friday, August 23, 13
  54. 54. mostra o código! Friday, August 23, 13
  55. 55. Creating a worker // create a new worker var worker = new Worker("background.js"); Friday, August 23, 13
  56. 56. Background logic self.postMessage('Hello from Web Worker!'); // create a new worker var worker = new Worker("background.js"); Current worker Friday, August 23, 13
  57. 57. Background logic self.postMessage('Hello from Web Worker!'); // create a new worker var worker = new Worker("background.js"); Current worker Send data Friday, August 23, 13
  58. 58. Background logic self.postMessage('Hello from Web Worker!'); // create a new worker var worker = new Worker("background.js"); // listen to the response from the Worker worker.addEventListener('message', receiveMessage);   // callback handling the response, data is available in the event object // outputs: Hello from Web Worker! function receiveMessage (e) {     console.log (e.data); } Current worker Send data Friday, August 23, 13
  59. 59. Catching errors var width = document.innerWidth; self.postMessage(width); // create a new worker var worker = new Worker("background.js"); // listen to the response from the Worker worker.addEventListener('error', receiveMessage);   // callback handling the error // outputs: Uncaught ReferenceError: document is not defined function receiveMessage (e) {     console.log (e.data); } Trying to access an object not available from a Worker Friday, August 23, 13
  60. 60. Data types supported for communication Friday, August 23, 13
  61. 61. Data types supported for communication Primitive types: Number, String, Boolean. Friday, August 23, 13
  62. 62. Data types supported for communication Primitive types: Number, String, Boolean. Composite data types: plain JSON objects, ImageData and TypedArray types. Friday, August 23, 13
  63. 63. Running expensive computation // create a new worker var worker = new Worker("background.js"); // listen to the response from the Worker worker.addEventListener('message', receiveMessage);   // callback handling the response, data is available in the event object // outputs: 400000000 function receiveMessage (e) {     console.log (e.data); } var slowSquare = function (n) { var i = 0; while (++i < n * n) {} return i; }; self.postMessage ( slowSquare( 20000 ) ); Friday, August 23, 13
  64. 64. Examples Friday, August 23, 13
  65. 65. Data cloning self.postMessage('Hello from Web Worker!'); self.postMessage([1, 13, 34, 50]); self.postMessage({name: Bob, age: 30}); self.postMessage([{name: Tom, age: 20}]); Friday, August 23, 13
  66. 66. Data cloning Web Worker A Web Worker B clone Friday, August 23, 13
  67. 67. Data cloning var data = [1, 2, 3, 4] Web Worker A Web Worker B clone Friday, August 23, 13
  68. 68. Data cloning var data = [1, 2, 3, 4] self.postMessage(data); Web Worker A Web Worker B clone Friday, August 23, 13
  69. 69. Data cloning var data = [1, 2, 3, 4] self.postMessage(data); Web Worker A Web Worker B [1, 13, 34, 50] clone Friday, August 23, 13
  70. 70. Data cloning var data = [1, 2, 3, 4] self.postMessage(data); Web Worker A Web Worker B [1, 13, 34, 50] clone data[2] = 100; Friday, August 23, 13
  71. 71. Data cloning var data = [1, 2, 3, 4] self.postMessage(data); Web Worker A Web Worker B [1, 13, 34, 50] clone var incomingArray = e.data; data[2] = 100; Friday, August 23, 13
  72. 72. Data cloning var data = [1, 2, 3, 4] self.postMessage(data); Web Worker A Web Worker B [1, 13, 34, 50] clone var incomingArray = e.data; // outputs: [1, 2, 3, 4] console.log (incomingArray); data[2] = 100; Friday, August 23, 13
  73. 73. Data cloning var data = [1, 2, 3, 4] self.postMessage(data); Web Worker A Web Worker B [1, 13, 34, 50] clone var incomingArray = e.data; // outputs: [1, 2, 3, 4] console.log (incomingArray); data[2] = 100; Overhead Friday, August 23, 13
  74. 74. Sending a 16mb typedarray with cloning // Create a 16MB "file" and fill it. var uInt8View = new Uint8Array(1024*1024*16); for (var i = 0; i < uInt8View.length; ++i) {     uInt8View[i] = i; } // transfer ownership to the worker worker.postMessage(uInt8View.buffer); Friday, August 23, 13
  75. 75. Platform Time (ms) iOS7 (Safari/iPhone 5) 214 iOS6 (Safari/iPhone 4S) 524 MacBook Pro (Chrome/10.8.4) 75 Sending a 16mb typedarray Friday, August 23, 13
  76. 76. Transfer of ownership // Create a 16MB "file" and fill it. var uInt8View = new Uint8Array(1024*1024*16); for (var i = 0; i < uInt8View.length; ++i) {     uInt8View[i] = i; } // transfer ownership to the worker worker.postMessage(uInt8View.buffer, [uInt8View.buffer]); Friday, August 23, 13
  77. 77. Transfer of ownership Web Worker A Web Worker B reference transferred to Web Worker B Friday, August 23, 13
  78. 78. Transfer of ownership var data = [1, 2, 3, 4] Web Worker A Web Worker B reference transferred to Web Worker B Friday, August 23, 13
  79. 79. Transfer of ownership var data = [1, 2, 3, 4] self.postMessage(uInt8View.buffer, Web Worker A Web Worker B reference transferred to Web Worker B Friday, August 23, 13
  80. 80. Transfer of ownership var data = [1, 2, 3, 4] self.postMessage(uInt8View.buffer, [uInt8View.buffer]); Web Worker A Web Worker B reference transferred to Web Worker B Friday, August 23, 13
  81. 81. Transfer of ownership var data = [1, 2, 3, 4] self.postMessage(uInt8View.buffer, [uInt8View.buffer]); Web Worker A Web Worker B reference transferred to Web Worker B // triggers runtime exception uInt8View.buffer = 12; Friday, August 23, 13
  82. 82. Transfer of ownership var data = [1, 2, 3, 4] self.postMessage(uInt8View.buffer, [uInt8View.buffer]); Web Worker A Web Worker B reference transferred to Web Worker B var incomingArray = e.data; // triggers runtime exception uInt8View.buffer = 12; Friday, August 23, 13
  83. 83. Transfer of ownership var data = [1, 2, 3, 4] self.postMessage(uInt8View.buffer, [uInt8View.buffer]); Web Worker A Web Worker B reference transferred to Web Worker B var incomingArray = e.data; // outputs: [1, 2, 3, 4] console.log (incomingArray); // triggers runtime exception uInt8View.buffer = 12; Friday, August 23, 13
  84. 84. Transfer of ownership, almost a 3x boost Platform Time (ms) iOS7 (Safari/iPhone 5) 80 (was 214) iOS6 (Safari/iPhone 4S) 162 (was 524) MacBook Pro (Chrome/10.8.4) 37 (was 75) Friday, August 23, 13
  85. 85. Exciting use case Friday, August 23, 13
  86. 86. Exciting use case 2. Parallel programming Friday, August 23, 13
  87. 87. Exciting use case 2. Parallel programming When you want to leverage multiple CPU cores by having computations running concurrently to solve a specific task. Friday, August 23, 13
  88. 88. Parallelization Friday, August 23, 13
  89. 89. Parallelization Friday, August 23, 13
  90. 90. Parallelization Worker 1 Worker 2 Worker 4Worker 3 Friday, August 23, 13
  91. 91. But... Friday, August 23, 13
  92. 92. But... 1. Cloning overhead is high and limits parallelization opportunities. Friday, August 23, 13
  93. 93. But... 1. Cloning overhead is high and limits parallelization opportunities. 2. Transfer of ownership does not work for parallelization. Friday, August 23, 13
  94. 94. But... 1. Cloning overhead is high and limits parallelization opportunities. 2. Transfer of ownership does not work for parallelization. 3. A more efficient communication model has to be designed for Web Workers to allow faster communication. Friday, August 23, 13
  95. 95. But... 1. Cloning overhead is high and limits parallelization opportunities. 2. Transfer of ownership does not work for parallelization. 3. A more efficient communication model has to be designed for Web Workers to allow faster communication. Software transactional memory? Friday, August 23, 13
  96. 96. Friday, August 23, 13
  97. 97. OK, let’s see if you remember the main points. Friday, August 23, 13
  98. 98. To summarize 1. Leverage Web Workers if you don’t want your UI to lock: true or false? 2. Web Workers are available pretty much everywhere on desktop and mobile: true or false? 3. Web Workers are as low-level as threads: true or false? 4. Message cloning is faster than transfer of ownership: true or false? 5. Web Workers work great to keep the UI responsive: true or false? 6. Parallel programming and responsive programming are the same things: true or false? Friday, August 23, 13
  99. 99. To summarize 1. Leverage Web Workers if you don’t want your UI to lock: true or false? 2. Web Workers are available pretty much everywhere on desktop and mobile: true or false? 3. Web Workers are as low-level as threads: true or false? 4. Message cloning is faster than transfer of ownership: true or false? 5. Web Workers work great to keep the UI responsive: true or false? 6. Parallel programming and responsive programming are the same things: true or false? Friday, August 23, 13
  100. 100. To summarize 1. Leverage Web Workers if you don’t want your UI to lock: true or false? 2. Web Workers are available pretty much everywhere on desktop and mobile: true or false? 3. Web Workers are as low-level as threads: true or false? 4. Message cloning is faster than transfer of ownership: true or false? 5. Web Workers work great to keep the UI responsive: true or false? 6. Parallel programming and responsive programming are the same things: true or false? Friday, August 23, 13
  101. 101. To summarize 1. Leverage Web Workers if you don’t want your UI to lock: true or false? 2. Web Workers are available pretty much everywhere on desktop and mobile: true or false? 3. Web Workers are as low-level as threads: true or false? 4. Message cloning is faster than transfer of ownership: true or false? 5. Web Workers work great to keep the UI responsive: true or false? 6. Parallel programming and responsive programming are the same things: true or false? Friday, August 23, 13
  102. 102. To summarize 1. Leverage Web Workers if you don’t want your UI to lock: true or false? 2. Web Workers are available pretty much everywhere on desktop and mobile: true or false? 3. Web Workers are as low-level as threads: true or false? 4. Message cloning is faster than transfer of ownership: true or false? 5. Web Workers work great to keep the UI responsive: true or false? 6. Parallel programming and responsive programming are the same things: true or false? Friday, August 23, 13
  103. 103. To summarize 1. Leverage Web Workers if you don’t want your UI to lock: true or false? 2. Web Workers are available pretty much everywhere on desktop and mobile: true or false? 3. Web Workers are as low-level as threads: true or false? 4. Message cloning is faster than transfer of ownership: true or false? 5. Web Workers work great to keep the UI responsive: true or false? 6. Parallel programming and responsive programming are the same things: true or false? Friday, August 23, 13
  104. 104. To summarize 1. Leverage Web Workers if you don’t want your UI to lock: true or false? 2. Web Workers are available pretty much everywhere on desktop and mobile: true or false? 3. Web Workers are as low-level as threads: true or false? 4. Message cloning is faster than transfer of ownership: true or false? 5. Web Workers work great to keep the UI responsive: true or false? 6. Parallel programming and responsive programming are the same things: true or false? Friday, August 23, 13
  105. 105. @thibault_imbert Blog: typedarray.org obrigado! Slides: http://bit.ly/13Lbk8d/ More details: http://bit.ly/14IWKKj Friday, August 23, 13

×