Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Thibault Imbert
Group Product Manager | Web Platform
Workers of
the Web
Thibault Imbert
@thibault_imbert
Friday, August 23...
Records
Friday, August 23, 13
Brazilian disco-funk
Friday, August 23, 13
Brazilian disco-funk
Friday, August 23, 13
Brazilian disco-funk
Friday, August 23, 13
Brazilian disco-funk
Friday, August 23, 13
Brazil’s food
Friday, August 23, 13
Brazil’s food
Friday, August 23, 13
Brazil
Friday, August 23, 13
Estou me mudando para o Brasil
Friday, August 23, 13
Adobe & the web?
Friday, August 23, 13
Adobe & the web?
http://html.adobe.com/webplatform/
Friday, August 23, 13
Friday, August 23, 13
JavaScript concurrency
Friday, August 23, 13
JavaScript concurrency
Multithreading
Friday, August 23, 13
A single threaded world
Friday, August 23, 13
Examples
Friday, August 23, 13
Your budget
1000ms / 60fps = 16.67ms
Friday, August 23, 13
A frame
Rendering (repaint, reflow, etc.)
Network (XHR)
JavaScript (misc logic)6ms
2ms
8ms
16ms
UI Thread
Friday, August 23...
The budget
6ms
2ms
8ms
Budget
16ms
Rendering (repaint, reflow, etc.)
Network (XHR)
JavaScript (misc logic)
UI Thread
Friday...
12ms
4ms
10ms
Budget
Over budget
26ms
Rendering (repaint, reflow, etc.)
Network (XHR)
JavaScript (misc logic)
UI Thread
Fri...
Over budget
12ms
4ms
10ms
Budget
10ms
Rendering (repaint, reflow, etc.)
Network (XHR)
JavaScript (misc logic)
26ms
UI Threa...
6ms
4ms
20ms
Budget
Over budget
30ms
Rendering (repaint, reflow, etc.)
Network (XHR)
JavaScript (misc logic)
UI impact
UI T...
Dev tools
Time spent
Impact on fps
Friday, August 23, 13
So how do we fix that?
Friday, August 23, 13
Web Workers
Friday, August 23, 13
Support
Friday, August 23, 13
Detection
Friday, August 23, 13
Detection
function supports_web_workers() {
return window.Worker != null;
}
Friday, August 23, 13
Detection
function supports_web_workers() {
return window.Worker != null;
}
if (Modernizr.webworkers) {
// Workers are ava...
Most common use case
1. Responsive programming
When you have an expensive computation to perform
and don’t want to block t...
By default, the UI thread
Rendering
Network
JavaScript6ms
2ms
8ms
16ms
UI Thread
Friday, August 23, 13
In parallel
Rendering
Network
JavaScript6ms
2ms
8ms
16ms
UI Thread
(Thread 1)
10ms
Web Worker
(Thread 2)
JavaScript
Friday...
In parallel
Rendering
Network
JavaScript6ms
2ms
8ms
16ms 28ms
JavaScript
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Networ...
In parallel
Rendering
Network
JavaScript6ms
2ms
8ms
16ms 44ms
JavaScript
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Networ...
In parallel
Rendering
Network
JavaScript6ms
2ms
8ms
16ms 44ms
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Loading remote da...
Life as a worker
What is available:
XMLHttpRequest
The Application Cache
Spawning other web workers
The navigator object
T...
Web Workers == Threads ?
Workers and threads
Friday, August 23, 13
1. Workers are higher-level than threads and safe
First difference
Friday, August 23, 13
Why not threads?
Threads are hard to use.
Too low-level for web development.
We should not expose that level of complexity...
var worker = new Worker("background.js");
JSVM Impact on memory
Slow instantiation time
Thread
Higher-level than threads
O...
2. Data passing
Second difference
Friday, August 23, 13
Threads and memory
Shared memory
Thread 2
Thread 5
Thread 1
Thread 4
Thread 3
Friday, August 23, 13
Threads and memory
Shared memory
Thread 2
Thread 5
Thread 1
Thread 4
Thread 3
Friday, August 23, 13
Threads and memory
Friday, August 23, 13
With Web Workers, nothing is shared
var worker1 = new Worker("background-task-1.js");
var worker3 = new Worker("background...
1 Web Worker == 1 core ?
Workers and cores
Friday, August 23, 13
Workers and cores
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Time
Single CPU
Friday, August 23, 13
Workers and cores
Time
Multicore
CPU
UI Thread
(Thread 1)
Web Worker
(Thread 2)
Friday, August 23, 13
Workers and cores
Friday, August 23, 13
Workers and cores
1. It is not possible to specify if a Web Worker
should run on a specific core.
Friday, August 23, 13
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 singl...
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 singl...
mostra o código!
Friday, August 23, 13
Creating a worker
// create a new worker
var worker = new Worker("background.js");
Friday, August 23, 13
Background logic
self.postMessage('Hello from Web Worker!');
// create a new worker
var worker = new Worker("background.js...
Background logic
self.postMessage('Hello from Web Worker!');
// create a new worker
var worker = new Worker("background.js...
Background logic
self.postMessage('Hello from Web Worker!');
// create a new worker
var worker = new Worker("background.js...
Catching errors
var width = document.innerWidth;
self.postMessage(width);
// create a new worker
var worker = new Worker("...
Data types supported for communication
Friday, August 23, 13
Data types supported for communication
Primitive types: Number, String, Boolean.
Friday, August 23, 13
Data types supported for communication
Primitive types: Number, String, Boolean.
Composite data types: plain JSON objects,...
Running expensive computation
// create a new worker
var worker = new Worker("background.js");
// listen to the response f...
Examples
Friday, August 23, 13
Data cloning
self.postMessage('Hello from Web Worker!');
self.postMessage([1, 13, 34, 50]);
self.postMessage({name: Bob, a...
Data cloning
Web Worker A Web Worker B
clone
Friday, August 23, 13
Data cloning
var data = [1, 2, 3, 4]
Web Worker A Web Worker B
clone
Friday, August 23, 13
Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
clone
Friday, August 23, 13
Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
Friday, Augus...
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...
Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
var incomingA...
Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
var incomingA...
Data cloning
var data = [1, 2, 3, 4]
self.postMessage(data);
Web Worker A Web Worker B
[1, 13, 34, 50]
clone
var incomingA...
Sending a 16mb typedarray with cloning
// Create a 16MB "file" and fill it.
var uInt8View = new Uint8Array(1024*1024*16);
...
Platform Time (ms)
iOS7 (Safari/iPhone 5) 214
iOS6 (Safari/iPhone 4S) 524
MacBook Pro (Chrome/10.8.4) 75
Sending a 16mb ty...
Transfer of ownership
// Create a 16MB "file" and fill it.
var uInt8View = new Uint8Array(1024*1024*16);
for (var i = 0; i...
Transfer of ownership
Web Worker A Web Worker B
reference transferred
to Web Worker B
Friday, August 23, 13
Transfer of ownership
var data = [1, 2, 3, 4]
Web Worker A Web Worker B
reference transferred
to Web Worker B
Friday, Augu...
Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
Web Worker A Web Worker B
reference trans...
Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
[uInt8View.buffer]);
Web Worker A Web Wor...
Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
[uInt8View.buffer]);
Web Worker A Web Wor...
Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
[uInt8View.buffer]);
Web Worker A Web Wor...
Transfer of ownership
var data = [1, 2, 3, 4]
self.postMessage(uInt8View.buffer,
[uInt8View.buffer]);
Web Worker A Web Wor...
Transfer of ownership, almost a 3x boost
Platform Time (ms)
iOS7 (Safari/iPhone 5) 80 (was 214)
iOS6 (Safari/iPhone 4S) 16...
Exciting use case
Friday, August 23, 13
Exciting use case
2. Parallel programming
Friday, August 23, 13
Exciting use case
2. Parallel programming
When you want to leverage multiple CPU cores by
having computations running conc...
Parallelization
Friday, August 23, 13
Parallelization
Friday, August 23, 13
Parallelization
Worker 1 Worker 2
Worker 4Worker 3
Friday, August 23, 13
But...
Friday, August 23, 13
But...
1. Cloning overhead is high and limits
parallelization opportunities.
Friday, August 23, 13
But...
1. Cloning overhead is high and limits
parallelization opportunities.
2. Transfer of ownership does not work for
pa...
But...
1. Cloning overhead is high and limits
parallelization opportunities.
2. Transfer of ownership does not work for
pa...
But...
1. Cloning overhead is high and limits
parallelization opportunities.
2. Transfer of ownership does not work for
pa...
Friday, August 23, 13
OK, let’s see if you remember the main points.
Friday, August 23, 13
To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty...
To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty...
To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty...
To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty...
To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty...
To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty...
To summarize
1. Leverage Web Workers if you don’t want your UI
to lock: true or false?
2. Web Workers are available pretty...
@thibault_imbert
Blog: typedarray.org
obrigado!
Slides: http://bit.ly/13Lbk8d/
More details: http://bit.ly/14IWKKj
Friday,...
Upcoming SlideShare
Loading in …5
×

Workers of the web - BrazilJS 2013

30,944 views

Published on

Concurrency in JavaScript, the potential and limitations.

Published in: Technology, Education
  • Hey guys,I'm so excited my ex-husband is back after a breakup with the help of a real spell caster called Dr. klin I was going crazy when my husband breakup with me and left me for another woman!! All thanks to Dr. klin the best love spell caster online that helped me to bring back my husband today and restore happiness in my marriage.. I'm Sonia Williams by name i lives in England. My husband breakup with me and left me to be with another woman, and i wanted him back. I was so frustrated and i could not know what next to do again, I love my husband so much but he was cheating on me with another woman and this makes him break up with me so that he can be able to get married to the other lady and this lady i think use witchcraft on my husband to make him hate me and my kids and this was so critical and uncalled-for, I cry all day and night for God to send me a helper to get back my husband!! I was really upset and i needed help, so i searched for help online and I came across a website that suggested that Dr. klin can help get ex back fast. So, I felt I should give him a try. I contacted him and he told me what to do and i did it then he did a spell for me. 28 hours later, my husband really called me and told me that he miss me so much, Oh My God! i was so happy, and today i am happy with my man again and we are joyfully living together as one big family and i thank the powerful spell caster Dr. klin he is so powerful and i decided to share my story on the internet that Dr. klin spell caster is best spell caster online who i will always pray to live long to help his children in the time of trouble, if you are here and your lover is turning you down, or your husband moved to another woman, do not cry anymore, contact this powerful spell caster now. Here’s his contact: Email him at: klinspelltemple@gmail.com ,you can also call him or add him on Whats-app: +2347059014517 , his website:http://klinspelltemple@gmail.com .
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×