[Front] Webworker 소개

Webworker

  • 자바스크립트 로직이 백그라운드에서 동작할 수 있도록 하는 HTML5 스팩
  • 브라우저의 OS래밸의 스래드
  • 완벽하게 분리된 쓰레드기 때문에 분리된 파일이어야함. (꼼수로 임베디드 하는 방법은 있음)
  • 돔에 직접 액세스 할 수 없음
  • 사용방법은 이벤트 드리븐 방식으로 웹소켓 방식과 비슷 post로 보내고 onmessage 이벤트를 통해 받음

사용 가능한 객체

  • object, array, data, math, string등 자바스크립트 객체
  • navigator
  • location (일기만)
  • Window.requestAnimationFrame, WindowTimers.setTimeout, and WindowTimers.setInterval
  • xmlhttprequest

브라우저 지원 범위 (2016-03)

var myWorker = new Worker("worker.js");
first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

worker.js

onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}
myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Message received from worker');
}

shared-worker

여러 다른파일에서 하나의 워커에 접근가능하도록 설정할 수 있음
아레 예제는 index1.html과 index2.html에서 동시에 worker에 접근함
port 라는 프로퍼티를 통해 접근해야함

https://github.com/mdn/simple-shared-worker

어디에 쓰일까

  • 시간이 오래 걸리는 작업들, timeout이 걸린 작업들 등
  • 복잡한 수식
  • 차트라이브러리 같은 계산이 복잡한 로직들

Service Worker

  • 백그라운드에서 네트워크 요청들을 다룸. 오프라인 환경에서도 요청에 대한 처리가 가능.
  • 요청들을 인터샙터 할 수 있음
  • 생명주기가 있음
  • https환경에서 동작

http://vnthf.github.io/blog/serviceworker/

ServiceWorkers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercepting network requests and taking appropriate action based on whether the network is available and updated assets reside on the server. They will also allow access to push notifications and background sync APIs.

참고

Comments

comments powered by Disqus
comments powered by Disqus