웹브라우저 렌더링 과정

웹 브라우저 렌더링 과정

1. HTML 파일과 CSS 파일을 파싱해서 Tree를 만듬- Parsing
   
2. HTML과 CSS Tree를 결합하여 Rendering Tree 만듬
   
3. Rendering Tree 각 노드를 실제 픽셀로 변환하여 레이어 합성 후 화면출력
   
   

Parsing

파싱 단계는 HTML 파일을 해석하여 DOM Tree 구성하는 단계

CSS 위치

HTML 문서를 파싱해서 DOM Tree 만들어도 스타일 규칙이 없다면 렌더링 불가 따라서, 빠른 렌더링 트리 생성을 위해 헤드 태그 사이에 위치해야 합니다.

Javascript 위치

• head 위치시
  DOM 객체를 이용해서 컴포넌트들을 조작하는 자바스크립트 태그를 head 사이 위치시 HTML 파서가 파싱을 멈추고 스크립트 파일을 읽어 시간 오래 소요됩니다.

• body 위치시
  스크립트 head에 넣었을 때의 시간이 오래 소요되는 문제로 body 하단에 스크립트를 추가하는 방식입니다.
  js파일 다운로드 전 웹페이지가 사용자들에게 이미 준비가 되어 있기 때문에 사용자가 페이지의 컨텐츠를 미리 볼 수 있습니다.
  
  
  하지만, 웹사이트가 자바스크립트에 의존적이라면 js파일 다운로드 시간과
  실행하는 시간 모두 기다려야합니다.
  
  이러한 두가지 문제를 해결하기 위한 방안
  

defer 속성

<script defer src ="script.js"></script>

head 안에 defer 라는 옵션 사용시,
자바스크립트 파일 다운로드 명령만 지시하고 나머지 html 끝까지 파싱합니다.
html 파싱하는 동안 필요한 자바스크립트를 모두 다운로드하여 페이지를 보여준 후 자바스크립트를 실행함으로 defer을 사용하면 효율적입니다!

마치며

웹 브라우저의 기본적인 작동원리에 대해 알아보았습니다.
더불어, html 문서내 js 코드 위치별 파싱 순서에 대해서도 알아보았습니다.