웹브라우저 동작 원리 알기(stack, queue)

이번 포스트에서는 웹브라우저 동작 원리에 대해 간단하게 알아보려고 합니다.

 

요즘은 node.js가 나왔기 때문에 js 구동을 어디서든지 할 수 있지만,

node.js가 나오기 전에는 js 구동이 제한적인 걸로 알고 있습니다.

그리고 그 제한적인 곳 중 하나가 브라우저 입니다.

 

js 코드를 열심히 작성하고 나서 js가 잘 실행되는지 확인하는 곳이

브라우저라는 것은 js 개발을 한 번이라도 해봤으면 아실 것입니다.

그렇기 때문에 브라우저에서 js가 어떤 식으로 동작하는지 안다면

js 개발을 좀 더 효율적으로 할 수 있지 않을까요 ㅎ

 

 

 

1. 브라우저

브라우저는 c++로 구현되어 있다고 합니다.(확인 필요)

그리고 브라우저는 stack과 queue라는 공간을 가지고 있다고 합니다.

여기서 stack은 코드를 실행하는 공간,

queue는 실행 대기 중인 코드가 있는 공간 이라고 일단 생각하면 되겠습니다.

여기서 js 코드가 인식되면 stack에 해당 코드들이 들어오고

이 코드들이 실행된다고 생각하시면 됩니다.

(그리고 브라우저들은 대부분 싱글 쓰레드로 동작한다고 합니다.)

 

2.

하지만 코드들 중에는 시간이 오래 걸리는 코드들도 존재합니다.

• ajax 요청
• setTimeout()
• 이벤트리스너
• 등등

이런 것들은 시간이 비교적 오래 걸리는 코드로 봅니다.

이런 코드들은 실행시간이 오래 걸리기 때문에 이런 코드들은 stack에 바로 들어가지 않습니다.

대신, 잠깐 보류하고 완료가 되면 그 때 stack에 들어가게 됩니다.

 

하지만 stack이라는 공간은 매우 바쁘다고 합니다.

모든 js 코드들을 처리하는 공간이기 때문에 아마도 그럴 것 같습니다.

그렇기 때문에 ajax요청, 이벤트리스너, setTimeout 등은 stack이 비어있을 때에만 실행해야 합니다.

이런 코드들은 완료되어서 실행준비가 되면 queue라는 공간에 들어갑니다.

그리고 stack이 비어있을 때 queue에서 이동해서 stack으로 들어가서 코드가 실행되게 됩니다.

 

3.

그렇기 때문에 stack에 시간이 오래 걸리는 코드를 많이 넣으면 안됩니다.

예를 들어, 한번 실행하는데 몇초, 몇십초가 걸리는 코드를 넣을 경우

stack에서 몇초, 몇십초를 기다려야 해서 다른 코드들을 실행하지 못하게 됩니다.

그러면 브라우저가 멈춘 것처럼 보이는 현상이 일어날 수 있습니다.

 

4.

그렇지만 어쩔 수 없이 시간이 오래 걸리는 코드를 실행해야 하는 경우도 있을 것입니다.

아래의 방식을 이용한다면 효율적이 될 수 있습니다.

 

4-1.

반복문을 100억번 돌린다고 생각해보면?

한번에 다 돌리면 문제가 있을 수 있습니다.

이럴 때는 setTimeout을 이용해서 1억번씩 혹은 더 잘게 나누어서 코드를 돌리게 하면

쾌적한 작업이 될 것입니다.

정해진 횟수만큼 돌리면 결과가 queue에 들어갈 것이고,

stack에서는 해당 내용을 실행하게 될 것입니다.

 

4-2.

Web Worker를 이용해서 진행해도 됩니다.

다른 js 파일을 사용해서 시간이 오래 걸리는 작업을 수행하게 하고,

완료되면 그 값을 받아와서 진행하면 됩니다.

이는 Worker 클래스를 이용하면 가능합니다.

//메인 js 파일
let my_worker = new Worker('worker.js');

my_worker.onmessage = function(e) {
    console.log(e);
    console.log(e.data);
}


//worker.js 파일
setTimeout(function() {
    let rt_msg = 'worker 클래스를 이용해서 진행'
    postMessage(rt_msg);
}, 1000);

콘솔 결과로 "worker 클래스를 이용해서 진행" 가 출력되는 것을 확인할 수 있을 것입니다.

 

이런 저런 방식을 이용하면 stack이 안 바빠지게 할 수 있습니다.

 

 

이렇게 웹브라우저의 동작방식에 대해 간단하게 알아봤습니다.

사실 js가 어떤 식으로 동작하는지 간략하게 알아봤습니다.

그래도 이렇게라도 알고 있으면 js 코드를 작성할 때 조금 더 도움이 될 것입니다.

 

 

포스트를 마칩니다.

 

 

출처: 코딩애플 - 쉽게 이해하는 JavaScript 객체지향 & ES6 신문법