JavaScript의 단일 스레드 한계
JavaScript는 애초에 단일 스레드(single-threaded) 환경에서 실행되도록 설계된 언어입니다. 즉, 여러 스크립트를 동시에 실행할 수 없습니다. UI 이벤트를 처리하면서 대량의 API 데이터를 조회·가공하고, 동시에 DOM을 조작해야 하는 상황을 생각해 보세요. 모든 작업이 하나의 스레드에서 순차적으로 처리되기 때문에 성능 병목이 발생하기 쉽습니다.
무거운 연산이 브라우저를 멈추는 이유
CPU 사용률이 급격히 높아지면 JavaScript는 브라우저 전체를 멈추게(hang) 만들 수 있습니다. 다음은 큰 반복문을 실행하는 간단한 예제입니다.
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop(){
for (var i = 0; i <= 10000; i += 1){
var j = i;
}
alert("Completed " + j + " iterations");
}
function sayHello(){
alert("Hello sir....");
}
</script>
</head>
<body>
<input type = "button" onclick = "bigLoop();" value = "Big Loop" />
<input type = "button" onclick = "sayHello();" value = "Say Hello" />
</body>
</html>"Big Loop" 버튼을 클릭하면 반복문이 모두 끝날 때까지 브라우저가 응답하지 않으며, 아래와 같은 경고창이 표시될 때까지 "Say Hello" 버튼조차 누를 수 없습니다.
웹 워커(Web Worker)를 활용한 해결책
이러한 문제는 웹 워커(Web Worker)를 사용하면 깔끔하게 해결할 수 있습니다. 웹 워커는 계산 비용이 큰 작업을 별도의 백그라운드 스레드에서 처리하기 때문에, 메인 스레드의 사용자 인터페이스(UI)를 차단하지 않고 무거운 연산을 수행할 수 있습니다. 덕분에 반복문이 실행되는 동안에도 화면은 부드럽게 반응하며, 사용자는 다른 버튼을 자유롭게 클릭할 수 있습니다.