Web Workers
I like the way you work it
@nolanlawson
@nolanlawson
The web! ❤️
The web has a problem :(
Every line of frontend JS you've ever written has (momentarily) stopped your page from working.
60 frames per second (FPS)
1000ms / 60 frames = 16.7ms
Factor in browser overhead...
WEB WORKERS!
// index.js
var worker = new Worker('worker.js');
worker.postMessage('ping');
worker.onmessage = function (e) {
console.log(e.data); // 'pong'
};// worker.js
self.onmessage = function (e) {
console.log(e.data); // 'ping'
self.postMessage('pong');
};UI thread (main thread)
500KB JavaScript app
Four cores
What can Web Workers do?
- Standard JavaScript
- JSON
btoa(),atob()- FileReader, Blob, ArrayBuffer
What can Web Workers do? (cont.)
- IndexedDB
IndexedDB (async!) blocks the DOM
What can Web Workers do? (cont.)
- AJAX/fetch
Ajax (async!) blocks the DOM
What can Web Workers do?
- JavaScript
- JSON
- IndexedDB
- AJAX
- ...but not DOM 😢
- Virtual DOM!
Pokedex.org on a 2011 Galaxy Nexus
Without workers
With workers
Pokedex.org bundle sizes
| main.js | 24.1kB |
| worker.js | 90.9kB |
| serviceWorker.js | 15.8kB |
React with Web Workers
Angular 2 - without Web Workers
Angular 2 - with Web Workers
This is coming to frameworks
Angular 2
React
Ember
Final thoughts
Four cores
Four cores
Thank you!
@nolanlawson
nolanlawson.github.io/empire-2016
- First demo
- Second demo
- Paul Lewis on Making a Silky Smooth Web
- The State of JavaScript on Android in 2015 is… poor
- Introducing Pokedex.org: a progressive webapp for Pokémon fans
- React Custom Renderer using Web Workers
- Using Webworkers to make React faster
- IndexedDB, WebSQL, LocalStorage – what blocks the DOM?
- Blink Workers
- High-performance Web Worker messages
- WebWorker Performance Benchmarks
- Using WebWorkers to bring native app best practices to javascript SPAs
- Handling event.preventDefault() in a WW
- Functions and classes available to Web Workers
- Bug 801176 - Support canvas 2D API from workers
- 2016 will be the year of concurrency on the web
- Using Web Workers for more responsive apps (video)
- Angular 2 and the future of HTML5 apps