구름의 글들

[TIL] 브라우저 동작 방식 (파서, 파싱, DOM) 본문

TIL

[TIL] 브라우저 동작 방식 (파서, 파싱, DOM)

여그린 2022. 9. 17. 17:52

# 브라우저 동작 방식 

브라우저가 HTML 문서를 읽어들이고 스타일을 입히고 실제 화면에 출력하기까지의 과정을 Critical Rendering Path라고 한다.

이 과정은 여러 단계로 나눠져 있지만 크게 2개의 단계로 표현할 수 있는데, 해당 단계는 하기와 같다.

 

[STEP1] 브라우저는 읽어들인 문서를 파싱하면서 어떤 내용을 최종적으로 페이지에 랜더링할지 결정한다.

[STEP2] 브라우저가 랜더링을 수행한다.

 

여기서 STEP1을 겪으면서 랜더링 트리가 생성되며 랜더트리는 HTML 및 CSS 요소들로 구성된다. 그리고 랜더트리를 생성하기 위해서는 두가지 모델이 필요한데, 이는 DOM과 CSSOM이다.

 

출처 : https://wit.nts-corp.com/2019/02/14/5522

 

브라우저 동작방식을 자바스크립트 딥다이브 책의 정의에 따라 다시 나열하자면,

 

브라우저는 사용자가 보고자 하는 웹페이지 로딩을 위해 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시한다. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.

 

🧐 이게 무슨말이지..? 위 문장을 이해하기 위해서는 하기 내용들에 대한 선이해가 필요하다.

 

랜더링이란?

HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다.

HTML, CSS 등을 파싱하여 요청한 콘텐츠를 화면에 출력한다.브라우저마다 사용하는 렌더링 엔진이 각각 다르기 때문에, 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않고 엔진마다 읽을 수 있는 코드의 버전도 다르다.

 

파서와 파싱이란?

a) 파싱 

  • 파싱(Parsing)이란 구문 분석이라는 뜻으로 문장을 분해해 구성성분 간의 관계를 분석하는 것을 뜻한다. 다시 말해, 서버로부터 전송받은 문서의 문자열을 브라우저가 이해할 수 있는 구조로 변환하는 과정을 말한다.
  • 컴퓨터 과학에서 파싱은 문자열을 의미있는 어휘 분석 단위(token)으로 분해하고 그것들로 이루어진 parse tree를 만드는 과정이다. 

 

b) 파서

  • 앞서말한 위 분석과정은 파서(parser)에서 이루어진다. 파싱을 하는 프로세스가 파서인 것. (파서가 파싱 작업을 한다.)
  • 파서란 컴파일러의 일부로서 컴파일러나 인터프리터에서 원시 프로그램을 읽어 들여 해당 문장의 구조를 알아내는 구문 분석을 하는 프로그램을 말한다.

 

DOM, CSSOM 트리란?

a) DOM(Document Object Model)

HTML 요소들의 구조화된 표현으로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미한다. 

  • 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환한 것.
  • 다르게 표현하자면, XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

b) CSSOM (CSS Object Model)

CSS 요소들의 구조화된 표현

 

🤔 그렇다면 왜 문서 내 모든 요소를 정의하고 각 요소에 접근할 수 있어야 하는가..?

 

A : 이렇게 함으로써 화면에 무엇을 렌더링 할지 결정할 수 있고, 자바스크립트 등 언어를 이용해 페이지의 콘텐츠 및 구조, 그리고 스타일을 손쉽게 수정할 수 있기 때문이다.  즉, 단순 텍스트 형태인 HTML을 객체화 시킴으러써 프로그래밍 언어를 이용한 접근이 용이해지고 프로그래머로 하여금 객체화된 HTML 구성요소들을 자유자재로 다룰 수 있게 된다. 🧚

 

 

랜더 트리란?

DOM과 CSSOM을 최종적으로 병합해 화면에 랜더링하기 위한 마지막 단계로 DOM과 CSSOM이 결합해 랜더 트리가 생성된다.

랜더링 엔진은 생성된 랜더 트리를 참조해 요소들의 각 위치를 잡고(HTML), 위치가 잡힌 각 요소들을 그려낸다(CSS). 

 

출처 : https://onlydev.tistory.com/9

 

 

브라우저의 동작방식을 알아보았는데, 자바스크립트의 동작방식은 어떻게 될까?

 

# 자바스크립트 동작방식

  • HTML 파일 내 자바스크립트 파일을 연결할 경우 어떤 위치에 스크립트를 위치하냐에 따라 파일의 동작 속도 및 동작 순서가 달라질 수 있다.
  • HTML 파일을 다운받았을 때, 브라우저가 코드를 한 줄 한 줄씩 분석(parsing)하는데 이를 CSS와 병합하여 DOM요소로 변환한다.
  • 한줄씩 브라우저가 읽어나가다가 자바스크립트 파일을 발견할 경우 ‘오! 스크립트 파일을 다운받아야 하네?’ 라고 이해하게 된다. 그 즉시 HTML 파싱(parsing)을 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아 실행한 뒤 다시 HTML 코드를 파싱하기 시작한다.

 

그렇다면 효율적인 parsing을 위해 JS 파일을 HTML의 어떤 영역에 넣어야 할까?

async & defer

[CASE1] <head> 영역에 넣기

  • <head> 영역에 넣을 경우, HTML 스크립트가 동작하기 전에 head 영역에서 자바스크립트 스크립트가 먼저 실행된다.
    • 단점) 이 경우, 사용자가 보는 화면상에서 자바스크립트 파일의 내용이 많을 경우 HTML 로드까지 너무 오랜시간이 걸린다.

출처 : Dream Coding Youtube

 

[CASE2] <body> 영역에 넣기

  • 만약 <head> 영역이 아닌 <body> 영역의 마지막에 넣는다면?
    • 단점) 물론 HTML 파일을 먼저 로드할 수 있다는 장점은 있지만 웹사이트가 js 파일에 많이 의존적이라면 (사용자가 의미있는 컨텐츠를 보기위해서는) 정상적인 페이지를 보기 전까지는 자바스크립트 파일의 fectching과 실행까지 기다려야 한다. 브라우저가 HTML 파싱 완료된 뒤 자바스크립트 파일을 서버에서 fetching 하고 실행하게 된다.

출처 : Dream Coding Youtube

 

[CASE3] <head> 영역 + async

  • head 영역에 넣돼 async라는 속성 값을 함께 이용할 경우, async는 boolean 타입의 속성값이기 때문에 선언하는 것만으로 true로 설정이 된다. -> (이 부분 추가설명 필요)
    • 브라우저가 HTML 다운받아 파싱하다가 자바스크립트 파일 보면 다운로드하고 다시 HTML 파일 파싱을 시작한다. 그러다가 자바스크립트 파일이 다운로드 완료되면 실행을 한 뒤 마지막으로 나머지 HTML 파일 파싱을 시작한다.
    • 장점) <body>의 끝에 사용하는 것보다는 fectching이 파싱하는동안 병렬적으로 일어나기 때문에 다운로드 받는 시간 절약이 된다.
    • 단점) 그러나 자바스크립트가 HTML이 모두 파싱되기 전에 실행이 되기 때문에 만약 자바스크립트 파일 내 쿼리셀렉터를 이용해 DOM 요소를 조작한다 하면 이 조작하려는 시점에 우리가 원하는 HTML 요소가 정의되지 않았을 수도 있다. 더불어 사용자가 페이지를 보기까지 여전히 시간이 걸림.

출처 : Dream Coding Youtube

 

[CASE4] <head> 영역 + defer

  • 파싱 하다가 script defer가 있다면 일단 자바스크립트 파일을 다운로드 받고 실제 실행은 HTML 파일 파싱이 모두 완료된 뒤 실행한다.
  • 더불어 async의 경우 script 파일이 여러개 있다면 코드 순서대로 다운로드 되지 않고 먼저 다운로드 된 파일이 먼저 실행되지만, defer의 경우 코드의 순서대로 스크립트가 다운로드 된다.

출처 : Dream Coding Youtube

 

 

 

Doubts

 

Deep Dive [4] : 브라우저 동작 원리 중 "프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행되지만 웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다."

 

Q1) 운영체제 위에서 실행된다는 것과 브라우저에서 실행된다는 것의 차이가 무엇인가?

  • 말그대로 Linux, Window 등의 운영체제에서 실행되는 것과 Chrome, Safari 등 브라우저에서 실행된다는 것의 차이를 말함

 

Q2) DOM이 객체단위로 나눠진 HTML 요소인데, 이미지 참고시 태그 단위로 나눠져 있다. Tag 단위가 곧 객체 단위를 뜻하는 것일까?

  •  

 

 

# 참고문서

'TIL' 카테고리의 다른 글

[TIL] GIT 개념 및 사용법 : add, commit, push, pull  (0) 2022.10.05
[TIL] 스터디키워드 정리 (데이터 타입, 변수, 함수, 조건문, 배열)  (0) 2022.10.04
[TIL] 스터디키워드 정리 (블록레벨 태그, 인라인 태그)  (0) 2022.09.30
'TIL' Related Articles more
Comments