[javascript] 웹브라우저 동작원리, 동기/비동기처리, 콜백함수 정리

1. 웹브라우저란?

• 서버에서 받아온 HTML CSS JS를 실행시켜주는 프로그램
• 브라우저는 C++로 짜여져있고, 실행해야 할 자바스크립트 코드를 발견하면 stack에 넣어 돌린다. 돌리다가 처리가 오래걸리는 코드를 만나면, (예를 들면 ajax 요청, 이벤트리스너, setTimeout 등) stack에 쌓아서 실행하는 것이 아닌 잠깐 보류해 두었다가 완료되는 시점에 Stack으로 다시 보내는 작업을 한다.즉, Queue 공간에 넣었다가 Stack이 비어 있을 때, 다시 Stack으로 옮겨 차례로 실행시키는 과정이다.
• 따라서 Stack에 연산이 오래걸리는 코드를 짜게 되면 웹사이트가 버벅거릴 수 있다.

  연산이 오래걸리는 코드를 짤 때 최적화 하는 방법

  1. setTimeout 이용
     • setTimeout()을 이용하여 0초마다 0~1억 반복, 1억~2억 반복,... 이런식으로 코드를 실행한다면 더 나은 작업속도를 기대할 수 있음.
  2. Web worker 이용
     • 다른 자바스크립트 파일을 이용하여 그 파일에서 오래 걸리는 연산을 수행하게 하고, 완료되면 값을 가져오도록 짠다. (Worker 라는 클래스 이용)

  (메인 js 파일)
  var myWorker = new Worker('worker.js'); 
  w.onmessage = function(e){
    console.log(e.data) 
  };
  (worker.js 파일)
  var i = 0;
  postMessage(i + 1); //postMessage라는 특별한 함수가 있음

  이렇게 세팅하면, worker.js 파일에서 작업이 완료될 시, postMessage()를 실행하고 다른 파일로 완료된 결과값을 전달할 수 있게 된다.

2. 동기/비동기 처리

1) 자바스크립트는 항상 동기식 처리를 한다(synchronous)

• 동기식 처리란, 한번에 코드 한줄씩 차례로 실행된다는 뜻.
• 자바스크립트를 실행하는 웹브라우저는 stack 이라는 코드 실행 공간이 있는데, 이곳에서 코드를 한줄씩 동기식 처리한다.

2) 비동기식 처리 (asynchronous) 도 가능하다.

• 자바스크립트에서 1초를 후에 실행되는 코드를 짜고 싶다면 어떻게?

console.log(1);
setTimeout(function(){}, 1000);
console.log(2);

이렇게 짜면 1초를 쉬고 2를 출력하는 것이 아닌, 1과 2를 동시에 출력한다
왜냐하면 setTimeout 이라는 함수는 읽는 시점과 동작 시점이 차이가 있는 함수인데, 이러한 함수들은 대기실인 Web API 에 옮겨서 대기시키기 때문이다.1초의 대기시간이 지난 뒤 setTimeout이 완료 되면 대기실에서 코드를 꺼내 코드가 실행되게 한다.
따라서 비동기를 지원하는 setTimeout 같은 함수를 이용하면 비동기식 처리도 가능하게 되는 것이다.

console.log(1);
setTimeout(function(){
  console.log(2);
}, 1000);
console.log(3);

이렇게 setTimeout 안에 2를 출력하는 코드를 넣는다면, 1과 3이 먼저 출력되고 그 다음 1초 후 2가 출력된다.

3) 코드를 순차적으로 실행하고 싶다면 콜백함수를 활용하라

콜백함수 디자인

function 첫째함수(콜백){
  console.log(1);
  콜백();
}
function 둘째함수(){
  console.log(2)
}
첫째함수(둘째함수);

함수에 파라미터로 콜백함수를 넘겨 주는 식으로 짤 수 있고,

첫째함수(function(){
  console.log(2)
})

직접 함수 선언문을 넣어 실행할 수도 있다.

그런데,콜백함수를 쓰게 되면 코드가 옆으로 길어지는 단점이 있다.

첫째함수(function(){
  둘째함수(function(){
    셋째함수(function(){
      어쩌구..
    });
  });
}):

이를 보완하기 위한 디자인 패턴이 바로 Promise 디자인 패턴이다.

첫째함수().then(function(){
   그 담에 실행할거
}).then(function(){
   그 담에 실행할거
});