반응형
Web Worker 란?
자바스크립트는 싱글 스레드 언어입니다.
아래와 같이 작업 1과 작업 2가 있을 때, 자바스크립트는 작업 1을 모두 마친 뒤에 작업 2를 할 수가 있습니다.
// 작업 1
let result = 0;
for(let i = 0; i < 9999999999; i++) {
result += i;
}
alert(result);
// 작업 2
// do something
하지만 이런 방대한 계산을 처리하거나, 많은 브라우저에 부담을 주는 작업이 있을 때,
Web Worker를 사용하면 주 메인 스레드가 아닌 백그라운드 스레드에서 작업을 할 수 있습니다.
Web Worker 사용하기
index.html
<!doctype html>
<html class="no-js" lang="">
<body>
<button id="calBtn">calculate</button>
<button id="calUseWorkerBtn">calculate(use worker)</button>
<button id="colorBtn">배경색 변경하기</button>
<script src="js/app.js"></script>
</body>
</html>
js/app.js
const worker = new Worker('js/worker.js');
const calBtn = document.getElementById('calBtn');
const calUseWorkerBtn = document.getElementById('calUseWorkerBtn');
const colorBtn = document.getElementById('colorBtn');
calBtn.addEventListener('click', () => {
let result = 0;
for(let i = 0; i < 9999999999; i++) {
result += i;
}
alert(result);
});
calUseWorkerBtn.addEventListener('click', () => {
worker.postMessage('hello');
})
worker.onmessage = function(e) {
alert(e.data);
}
colorBtn.addEventListener('click', () => {
if (document.body.style.backgroundColor === 'red') {
document.body.style.backgroundColor = 'white';
return;
}
document.body.style.backgroundColor = 'red';
});
js/worker.js
onmessage = function(e) {
let result = 0;
for(let i = 0; i < 9999999999; i++) {
result += i;
}
postMessage(result);
}
결과 화면
calculate 버튼에서는 누르게 되면 계산하는 동안 배경색 변경이 불가하지만,
calulate(use woreker) 버튼을 누르면 백그라운드 스레드에서 계산을 하기 때문에
계산 중에도 배경색 변경이 가능한 것을 확인할 수 있습니다.
728x90
반응형