브라우저 렌더링(soft ver)

adultlee·2023년 9월 13일

😎 브라우저란?

브라우저란 동기(Synchronous)적으로 (HTML + CSS), Javascript 언어를 해석하여 내용을 화면에 보여주는 응용 소프트웨어입니다.

브라우저의 주된 기능은 사용자가 원하는 정보를 서버에 요청하고 브라우저에 표시하는것입니다.
여기서 원하는 정보의 종류는 크게 Html , img, pdf 등입니다.
여기서 정보의 종류 특히나 Html을 구분하는 것은 주소라고 하며, 이는 Url(Uniform Resource Locator) 이라고 합니다.

브라우저의 종류에는 크롬, 사파리, 파이어폭스 (오픈소스 기반) , 네이버 웨일 등등 다양한 종류의 브라우저가 존재합니다.

최근 유저들의 브라우저 점유율 입니다. 크롬과 사파리가 대부분을 차지하는것으로 보입니다.

브라우저의 구성요소

브라우저의 여러 구성 요소가 있지만 브라우저 렌더링 과정에 중심이 되는 요소들을 중심으로 작성하겠습니다.

1. User Interface

주소 표시줄 , 이전 앞으로 가기 버튼, 즐겨찾기, 설정, 창 끄기, 텝, 등등 페이지 정보를 표시하는 창을 제외한 모든 부분입니다. 여러 브라우저들은 서로 경쟁과 발전을 통해서 어느 정도 유사한 디자인을 가지게 되었습니다.

2. Browser Engine

User Interface와 Rendering Engine 사이의 동작을 제어해주는 엔진입니다.

3. Rendering Engine

웹에서 렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 Render 시키는 역할입니다.
일반적으로 사용되는 크롬, 사파리등은 webkit 엔진을 사용하고 있습니다.

3-1. Rendering Engine 의 개략적인 동작원리

다음은 브라우저의 렌더링 엔진이 Render 시키는 동작 순서를 간략히 표현한 것이다. 렌더링 엔진은 서버로 부터 전달밭은 Html문서를 파싱하고 DOM(Document Object Model) tree를 생성합니다. 그리고 css 요소를 적용시키기 위해 마찬가지로 CSSOM(Cascading Style Sheets Object Model)tree 를 생성합니다. 그리도 두 트리를 매칭 시켜 Render tree를 생성합니다. 그 후 화면에 Render tree를 통해 구성한 요소들이 화면에 정확히 배치 될 위치를 정하고, 정해진 위치를 기반으로 화면에 render 합니다. 여기서 Render tree에는 화면에 직접적으로 표시가 될 요소들만이 존재하기 때문에 css 속성으로 visibility : hidden;인 요소는 괜찮지만 display: none 은 Render tree에서 제외됩니다.

3-2. Html문서를 파싱하던 중 script태그를 만난다면?

Html 문서를 파싱하던중

<script></script>

태그를 만나게 된다면 Html 문서의 파싱을 중단하고 js 파일을 로드하게 됩니다. 이 경우 html문서를 파싱하는 과정에 있어서 2가지 문제가 발생하게 됩니다.

html문서를 파싱하다가 script 태그를 만나게 되면 html태그를 파싱하다가 중단하게 되고 js 파일의 로드가 끝날때 까지 화면에 표시되는 것이 지연된다.
Html문서의 파싱이 끝나기 전에 script 태그를 만나게 되면 완성되지 않은 Dom에 Js가 접근할 수 있다.

따라서 위와 같은 상황을 피하기 위해 script 태그는 body태그의 최하단에 위치하는 것이 좋습니다.
혹은 다음과 같은 방법으로 js 파일을 로드하는것을 지연시킬 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>script load</title>
  </head>
  <body>
    <script>
      // window.onload가 가장 앞에 위치!
      window.onload = function () {
        console.log("afterwindowload");
        var target = document.querySelector("#test");
        console.log(target);
      };
      // DOMContentLoaded가 두번째에 위치!
      document.addEventListener("DOMContentLoaded", function () {
        console.log("afterdomload");
        var target = document.querySelector("#test");
        console.log(target);
      });
      // 일반 script 코드가 가장 끝에 위치
      console.log("바로시작");
      var target = document.querySelector("#test");
      console.log(target);
    </script>
    <div id="test">test</div>
  </body>
</html>