Web Workers

Добавьте производительности своим Web приложениям

Сергей Мелашич
Agilie

Сергей

Мелашич

web разработчик компании Agilie

SergeyMell

Seroga.Mell

Sergey Melashych

sergey.mell@agilie.com

преподаватель school.agilie.com

Мы живем во многопоточном мире

World

Software

JavaScript

Мир JavaScript

Мир JavaScript

CORE

CORE

CORE

CORE

Мир JavaScript


 api.post('/login', userData)

   .then(response => {
     // Success stuff
   }, error => {
     // Error stuff
   });

 // Other stuff

APP THREAD

Action 1

Action 2

Action 3

Waiting for the response

Проблема однопоточности

CORE

CORE

CORE

CORE

Рендеринг чуть подробнее

Сколько времени у нас есть?

60 fps

16 ms

8 - 10 ms

"Тяжелые" операции

Обработка больших структур данных

Обработка изображений / звука

Генерация больших таблиц

Визуализация данных

...

Пример "тяжелой" операции

Решение?

1. setTimeout

2. iframe

3. Web Worker

Поддержка браузерами

Особенности Web Workers

1. Хранится в отдельном файле и запускается

как отдельный процесс

if (window.Worker) {
  const myWorker = new Worker("hard_worker.js");
}

2. Взаимодействие осуществляется посредством сообщений

myWorker.postMessage(data);

myWorker.onmessage = (event) => {
  console.log(event.data);
};

Особенности Web Workers

3. Нет доступа к DOM

4. Нет доступа к document, window, parent

5. Глобальный контекст доступен посредством self

Многопоточное исполнение

APP THREAD

WORKER THREAD

const myWorker = 
  new Worker("hard_worker.js");
myWorker.onmessage = ...
myWorker.postMessage(...);
renderResults(event.data);
self.onmessage = ...;
const result = 
  hardWork(event.data);
self.postMessage(result);

Блокировка рендеринга с решением

Shared Worker

const sharedWorker = new SharedWorker("shared.js");

sharedWorker.port.addEventListener("message", event => {
  // Subscribing Event
}, false);

sharedWorker.port.start();

sharedWorker.port.postMessage(data);

Передача данных в Web Worker

1. Структурное клонирование (structured cloning)

myWorker.postMessage(arrayOfData);

2. Передаваемые объекты (transferable objects)

myWorker.postMessage(arrayOfData, [arrayOfData]);

3. Широковещательный канал (broadcast channel)

let channel = new BroadcastChannel('channel-name');
channel.postMessage(data);

4. Общая память (shared memory)

const sharedBuffer = new SharedArrayBuffer(40);
myWorker.postMessage(sharedBuffer);

Библиотеки для работы
с Web Workers

Parallel.js

Hamsters.js

Web Workers во фреймворках

Web Workers во Vue.js

this.$worker.run((arg) => {
  return `Hello, ${arg}!`;
}, ['World'])

  .then(result => {
    console.log(result);
  })

  .catch(e => {
    console.error(e);
  });

https://github.com/israelss/vue-worker

Web Workers в React.js

https://github.com/web-perf/react-worker-dom

number of nodes

fps

react-renderer

react-worker-dom

Web Workers в Angular

UI THREAD

WORKER THREAD

Бизнес
логика

Пользовательское событие

postMessage('call');

Связанные данные

postMessage(data);

Как это сделать?

import '../polyfills.ts';
import '@angular/core';
import '@angular/common';
import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';

import { AppModule } from '../app/app.module';

platformWorkerAppDynamic().bootstrapModule(AppModule);
bootstrapWorkerUi('../webworker.bundle.js');
import { WorkerAppModule } from '@angular/platform-webworker';

webworker.ts

main.ts

app.module.ts

Angular на  стероидах  WebWorker-ах

А как же роутинг?

@NgModule({
    ...,
    providers: [
        ...,
        {provide: APP_BASE_HREF, useValue: '/'},
        WORKER_APP_LOCATION_PROVIDERS,
    ]
});

app.module.ts

bootstrapWorkerUi(
    '../webworker.bundle.js',
    WORKER_UI_LOCATION_PROVIDERS
);

main.ts

Тестирование производительности

fps

интенсивность мутаций

 Angular clean

 Angular worker

https://github.com/mathieuancelin/js-repaint-perfs

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

1. Ido Green «Web Workers»

2. Немного о worker'аx

3. Скрещиваем WebWorker и Promise

4. Using Webworkers to make React faster

5. Angular Web Worker - Building Super Responsive UI

6. Boost your Angular app with web workers

7. Превышаем скоростные лимиты с Angular 2

Благодарю за внимание

Пожалуйста, разбудите спящих соседей

SergeyMell

Seroga.Mell

Sergey Melashych

sergey.mell@agilie.com

Made with Slides.com