Webworker 언제 사용 해야 될까?

web worker란?
- 스크립트 작업이 오래 걸린다고 해서 페이지를 멈추고 기다릴 필요가 없어졌다. 웹 워커는 자바스크립트 코드를 UI 쓰레드와는 별도인 백그라운드에서 수행될 수 있도록 하는 표준적인 방법을 제공하기 때문에 웹 페이지를 가로막지 않고 스크립트를 돌릴 수 있게 되었다.

Web worker를 언제 사용해야 될까? 
- 매우 복잡한 수학적 계산 작업
- 원격지에 있는 리소스에 대한 액세스 작업(또는 로컬 스토리지를 액세스 하는 경우)
- 백그라운드에서 조용히 오랜시간 작업애햐 하는 경우
- UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등
- 현재 프로젝트에 트래픽 높은 네트워크 통신에 의해서 UI화면이 멈추는 증상이 있어서 알아보게 되었다.

Web worker VS React Virtual Dom

 web worker의 프레임이 더 좋은걸 확인할수 있다.

React에서 Test로 해볼수 있는 Web worker 예제 <출처:https://github.com/facebook/create-react-app/pull/3934>

// hello.worker.js

let helloInterval;

const sayHello = () => {
  self.postMessage({ message: 'Hello' });
};

self.addEventListener('message', event => {
  if (event.data.run === true) {
    self.postMessage({ status: 'Worker started' });
    helloInterval = setInterval(sayHello, 1000);
  }

  if (event.data.run === false) {
    self.postMessage({ status: 'Worker stopped' });
    clearInterval(helloInterval);
  }
});

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import HelloWorker from './hello.worker.js';

ReactDOM.render(<App />, document.getElementById('root'));

const helloWorker = new HelloWorker();
let messageCount = 0;

helloWorker.postMessage({ run: true });

helloWorker.onmessage = event => {
  if (event.data.status) {
    console.log('STATUS', event.data.status);
  }

  if (event.data.message) {
    messageCount += 1;
    console.log('MESSAGE', event.data.message);

    if (messageCount >= 5) {
      helloWorker.postMessage({ run: false });
    }
  }
}

 

참조한 사이트:

http://blog.nparashuram.com/search/label/react

Parashuram's blog

https://kentcdodds.com/blog/speed-up-your-app-with-web-workers

Speed up your App with Web Workers