Frontend

브라우저 동작 원리

강하다이녀석 2024. 3. 13. 22:00

 

브라우저 동작 원리

대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행

  1. 서버에 요청을 보내서 HTML, CSS,JS,이미지파일 등을 응답받는다.
  2.  HTML, CSS 파일을 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합.
  3. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지 표시
  4. 자바스크립트는 자바스크립트 엔진(렌더링 엔진x)이 처리 : HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하려고 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어를 넘김. 
  5.  script 태그 내의 JS 코드 or script 태그의 src 속성에 정의된 JS 파일을 로드하고 파싱하여 실행.
  6. JS 실행이 완료되면 다시 HTML 파서로 제어권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성 재개.

 

Q :<script>는 왜 body 아래에 위치하는 게 좋나요?

A :

-> script 태그 위치에 따라 블로킹이 발생하여 DOM 생성이 지연될 수 있어서 위치가 중요하다.

body 요소 가장 아래에 JS를 위치시키는 것은 좋다

1. 스크립트 로딩 지연으로 인해 렌더링에 지장을 받지 않아 로딩 시간 단축.

2. DOM이 완성되지 않았는데 JS가 DOM을 조작하면 에러 발생.

 

 

1. 스크립트가 하단에 위치한 예시

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Counter</title>
</head>
<body>
  <div id="counter">0</div>
  <button id="increase">+</button>
  <button id="decrease">-</button>
  //스크립트를 하단에 위치시킨 경우
  <script>
    const $counter = document.getElementById('counter');
    const $increase = document.getElementById('increase');
    const $decrease = document.getElementById('decrease');

    let num = 0;
    const render = function () { $counter.innerHTML = num; };

    $increase.onclick = function () {
      num++;
      console.log('increase 버튼 클릭', num);
      render();
    };

    $decrease.onclick = function () {
      num--;
      console.log('decrease 버튼 클릭', num);
      render();
    };
  </script>
</body>
</html>

스크립트를 하단에 위치시킨 해당 코드의 경우 DOM이 완성되고 script가 있어서 문제 없이 동작

 

2. 스크립트가 상단에 위치한 예시

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Counter</title>
</head>
<body>

  <script>
    const $counter = document.getElementById('counter');
    const $increase = document.getElementById('increase');
    const $decrease = document.getElementById('decrease');

    let num = 0;
    const render = function () { $counter.innerHTML = num; };

    $increase.onclick = function () {
      num++;
      console.log('increase 버튼 클릭', num);
      render();
    };

    $decrease.onclick = function () {
      num--;
      console.log('decrease 버튼 클릭', num);
      render();
    };
  </script>
  // HTML DOM요소들이 밑 스크립트보다 밑으로 간 경우
  <div id="counter">0</div>
  <button id="increase">+</button>
  <button id="decrease">-</button>

</body>
</html>

 

script가 상단에 있을 경우, 에러 발생

script가 DOM 요소를 조작해야 하는데, 해당 요소(div와 button)가 script보다 하단에 위치하면 DOM요소가 아직 로드되지 않아서 에러가 발생.

 

 

https://d2.naver.com/helloworld/59361

이후에 참고하면 좋을 구체적인 브라우저 동작 원리. 더 읽어 봐야겠다.