Getting over Moore’s Law Parallelization using JavaScript in the browser

Modern computers and devices continue the trend of having a larger number of CPU cores instead of cores with more computing power. That means that the days of waiting for Moore's Law to take effect so our apps run faster are over, and we, developers, need to start adventuring into the land of parallelism.

In this talk we will go over some of the currently available approaches (and ongoing efforts) that make it possible to take advantage of parallelism in the browser using JavaScript. This includes not only the widely spread concept of Web Workers, but also Single Instruction Multiple Data (SIMD) and the downfall of ParallelJS and rise of SharedArrayBuffers.

Transcript

1. Getting over Moore’s Law Parallelization using JavaScript in the browser by @dschenkelman
3. Time Processor Speed Moore’s law (1965)
4. Moore's Law Wolfenstein 1992 vs 2014
5. Time Processor Speed ~Today Upper Bound Moore’s law (1965)
6. GMail interface (2010)
7. UI Thread User action Asynchronous I/O UI reaction
8. Unreal Engine in Firefox with asm.js (~today)
9. UI Thread 1 2 Character killed User action UI reaction
11. UI Thread 1 2 Worker Thread 1 2 Split the bars User action Message passing UI reaction Parallelization
12. UI Thread 1 2 Make the bars shorter User action UI reaction
14. Web Workers Splitting the bars UI Thread Worker Thread
15. Basic lifetime All major browsers const  w  =  new  Worker('worker.js');   w.addEventListener('message',  function(e){   console.log('Received  from  w',  e.data);   worker.terminate();   }   w.postMessage('@jsconfco'); self.addEventListener('message',  function(e)  {      const  data  =  e.data;      self.postMessage(data  +  'rocks!!!');   }); worker.js index.html
16. postMessage Transferable objects not in IE void  postMessage(any  message  ,     optional  sequence  <  Transferable  >  transfer) const  worker  =  new  Worker('worker.js');   ...   const  items  =  new  Uint8Array([1,2,3,4]);   worker.postMessage(items,  [  items.buffer  ]); sample spec
17. Typed Arrays
18. Cloning No transferable UI Thread [1,2,3] const  xs  =  new  Uint32Array([1,2,3]);
19. Cloning (2) No transferable UI Thread Worker Thread [1,2,3] [1,2,3] const  xs  =  new  Uint32Array([1,2,3]);   worker.postMessage(xs);
20. Transferables UI Thread [1,2,3] const  xs  =  new  Uint32Array([1,2,3]);
21. Transferables(2) UI Thread Worker Thread [1,2,3] [1,2,3] const  xs  =  new  Uint32Array([1,2,3]);   worker.postMessage(xs,  [  xs.buffer  ]);
22. transferable μbenchmark http://jsperf.com/transferrable-vs-cloning/2 Transferable Cloning 16,051 ops/sec 1,669 ops/sec (89% slower)
23. Demos
24. Case study p-j-s and image transformations
25. UI Thread p-j-s Worker 1 Worker 2 Worker 3 Worker 4 A B C D A B C D A' B' C' D' A' B' C' D'
26. Relative performance 0" 0.2" 0.4" 0.6" 0.8" 1" 1.2" 1.4" 1.6" 2" 3" 4" 5" 6" Rela%ve'performance'of'parallel'compared'to'serial' #'of'elements'(log'scale)' Sapia'tone:'Parallel'vs'Serial' Firefox"41"
27. T-shirt time
28. SIMD Making the bars shorter UI Thread
29. SISD Single instruction single data 5 3 8
30. SIMD Single instruction multiple data 5 3 8 2 4 6 6 3 9 1 7 8
31. Games
32. Physics
33. Crypto
34. Battery
35. SIMD for EcmaScript Firefox Nightly
36. 128 bits float32x4 and int32x4 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 0 1 2 3 Lanes Bytes
37. const  float32x4  =  SIMD.Float32x4;   const  a  =  float32x4(1.0,  5.0,  3.0,  7.0);   const  b  =  float32x4(2.0,  2.0,  4.0,  4.0);   const  sum  =  float32x4.add(a,  b);  //optimized 1.0 5.0 3.0 7.0 2.0 2.0 2.0 4.0 b a 2.0 5.0 3.0 7.0 sum
38. sum var  f4  =  SIMD.Float32x4;   function  SIMDsum(xs){      var  i,  len  =  xs.length;      var  res  =  f32x4.splat(0);      for  (i  =  0;  i  <  len;  i+=4){          res  =  f4.add(res,  f4(xs,  ji));      }      return  res;   }; var  frnd  =  Math.fround;   function  sum(xs){      var  i,  len  =  xs.length;      var  res  =  frnd(0);      for  (i  =  0;  i  <  len;  i++){          res  =  frnd(frnd(res)  +  xs[i]);      }      return  res;   };
39. sum μbenchmark http://jsperf.com/simd-sum/4 SIMD No SIMD 11,023 ops/sec 3,438 ops/sec (68% slower)
40. Demos
41. The future At least the current proposal…
42. Going back in time
43. ParallelJS a.k.a. Rivertrail var  items  =  new  ParallelArray(1,2,3,4);   var  newItems  =  items.map(val  =>  val+1);   var  sum  =  items.reduce((a,  b)  =>  a  +  b);
47. SharedArrayBuffers var  xs  =  new  SharedUint8Array(len);   ...   worker1.postMessage(xs,  [  xs.buffer  ]);   worker2.postMessage(xs,  [  xs.buffer  ]);
48. UI Thread p-j-s Worker 1 Worker 2 Worker 3 Worker 4 A B C D A B C D A' B' C' D' A' B' C' D' with SharedArrayBuffers
49. Demo
50. Always bet on cats
51. Credits • @kaptajnjensen: SIMD IDF demos • @bnjbvr: SIMD sum • @BrendanEich: shared memory links • @cristiandouce: ideas for demos • @mgonto & @woloski: reviewers
52. SIMD Links • Proposal & polyfill: https://github.com/johnmccutchan/ecmascript_simd • Internals in FF: https://blog.mozilla.org/javascript/2015/03/10/state-of-simd-js- performance-in-firefox/ • Demos: http://peterjensen.github.io/idf2014-simd/ • IDF talk: http://intelstudios.edgesuite.net/idf/2014/sf/ti/SPCS003/index.html • Slides: https://docs.google.com/presentation/d/ 1yc2NDzFJ-0yD980URiTcV3oE_2cQDVzXuH4Rss1fG8s/ and http:// peterjensen.github.io/html5-simd/html5-simd.html#/36 • Paper: https://e9fe7ff0-a-62cb3a1a-s-sites.googlegroups.com/site/ wpmvp2014/paper_18.pdf
53. p-j-s links • Paper: https://github.com/pjsteam/pjs/blob/dev/ docs/paper/paper.pdf • Repo: https://github.com/pjsteam/pjs
54. Future Links • Shared memory model: https://lists.webkit.org/pipermail/ webkit-dev/2013-April/024682.html • SharedArrayBuffers spec draft: https://docs.google.com/ document/d/ 1NDGA_gZJ7M7w1Bh8S0AoDyEqwDdRh4uSoTPSNn77P Fk/ • TypedObjects spec draft: https://github.com/dslomov- chromium/typed-objects-es7 • TypedObjects explanations: https://github.com/ nikomatsakis/typed-objects-explainer/
55. Thanks https://github.com/dschenkelman/parallelism-js-talk @dschenkelman