Как построить дом, если ты — веб-воркер

???

Браузер работает
в один поток

Конвеер рендера

Конвеер рендера

Один поток

Один поток

Отдельный поток

Внутри кода

      const myWorker = new Worker('worker.js');
        ...
        myWorker.postMessage(args);
        ...
      myWorker.addEventListener('message', (e) => {...}, false);
    

Внутри файла работяги

      self.addEventListener('message', function(e) {
        ...
        self.postMessage(result);
        ...
      }, false);
    

Потокобезопасность

Потокобезопасность

postMessage(msg);

postMessage(msg, [transfer]);

DOM не потокобезопасен

Веб-работяга не может взаимодействовать с DOM

vDOM

Решения

1. Building an async react renderer with diffing in web worker
2. Preact worker demo
3. Worker dom
4. Preact-www
5. Virtualdom-in-web-worker

Где используется?

Прогрессивно улучшайте!

Прогрессивно улучшайте!

      if (window.Worker) { 
        const myWorker = new Worker('worker.js');
      };
    

Полезные ссылки

1. Немного о worker’аx​ | Технострим
2. Как работает JS: веб-воркеры и 5 сценариев их использования
3. Web Workers API
4. Javascript web workers tutorial
5. Знакомство с web worker
6. A Guide to using Web Workers in React

Спасибо за внимание!

Вопросы?