[Javascript] 모던 자바스크립트 Deep Dive - 38장 브라우저의 렌더링 과정

해당 내용은 [모던 자바스크립트 Deep Dive] 도서의 핵심 내용을 정리한 글 입니다.

 

💡 브라우저의 렌더링 과정

용어 정리

• 파싱(구문 분석)
  • 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 실행하기 위해 텍스트 문서의 문자열을 토근으로 분해(어휘 분석)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정을 말한다.
  • 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트 코드를 생성하고 실행한다.
• 렌더링
  • HTML, CSS, 자바스크립트로 작성된 문서를 파싱 하여 브라우저에 시각적으로 출력하는 것을 말한다.
• ✨ 브라우저 렌더링 과정
  1. HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받는다
  2. 브라우저의 렌더링 엔진은 HTML과 CSS를 파싱 하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성한다.
  3. 브라우저 자바스크립트 엔진은 자바스크립트를 파싱 하여 AST를 생성하고 바이트 코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더트리로 결합된다.
     1. DOM, CSSOM이 생성되기 전에 변경하려고 하면 에러가 발생한다.
  4. 렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 브라우저 화면에 HTML를 페인팅한다.

 

요청과 응답

• 브라우저의 핵심 기능
  1. 서버에 리소스 요청하고 응답받기
     1. 방법 1: 브라우저 주소창으로 요청하기
        • 정적파일
        • 주소창으로 요청하면 브라우저는 해당 데이터를 화면에 나타냄(렌더링)
     2. 방법 2: 자바스크립트로 요청하기 (AJAX)
        • 정적/동적파일
  2. 리소스 렌더링하기
  • ✨ 즉, 렌더링에 필요한 소스는 모두 서버에 존재한다.
• URI

• 루트요청
  • 프로토콜 + 호스트만으로 구성된 URI
  • https://naver.com (루트 요청) === https://naver.com/index.html
• 리소스 종류
  • 정적 파일 :
    • 프로그램이 실행되는 동안 변하지 않는 값 = 정적
    • HTML, CSS, 자바스크립트, 이미지 등
  • 동적 파일 :
    • 프로그램이 실행되는 동안 변할 수 있는 값 = 동적
    • 사용자, 상품, 게시글, 댓글 등등…
• URI 표기법
  • index.html : https://naver.com
  • data : https://naver.com/data
• HTTP 요청과 응답 확인하기 ⇒ 개발자 도구 Network 패널
  • naver.com ⇒ index.html
  • ~~.css
  • ~~.css

 

✨ HTTP 1.1과 HTTP 2.0

• HTTP
  • 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약)이다.
• HTTP/1.1
  • 커넥션 당 하나의 요청과 응답만 처리한다. 즉, 여러 개의 요청을 한 번에 전송할 수 없고 응답 또한 마찬가지다. 여러개의 리소스 요청이 개별적으로 전송되고 응답 또한 개별적으로 전송된다.
  • HTTP1.1은 리소스의 동시 전송이 불가능한 구조이므로 요청할 리소스의 개수에 비례하여 응답 시간도 증가하는 단점이 있다.
  • 다중 요청/응답 불가
• HTTP/2
  • 커넥션당 여러개의 요청과 응답, 즉 다중 요청/응답이 가능하다.
  • 여러 리소스의 동시 전송이 가능하여 HTTP/1.1에 비해 페이지 로드 속도가 약 50% 정도 빠르다고 알려져 있다.

 

HTML 파싱과 DOM 생성

• 브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트이다.
  • 브라우저가 렌더링 하려면 브라우저가 이해할 수 있는 자료구조로 변환하여 메모리에 저장해야 함
• DOM 생성 과정
  1. 서버는 브라우저가 요청한 HTML 파일을 바이트로 인터넷을 경유하여 응답한다
  2. 브라우저는 meta태그의 charset 어트리뷰트에 지정된 인코딩 방식을 기준으로 문자열로 변환한다.
  3. 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해한다.
  4. 각 토큰을 객체로 변환하여 노드들을 생성한다.
  5. HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 자료구조로 구성한다. 이를 DOM이라고 부른다.

 

CSS 파싱과 CSSOM 생성

• 렌더링 엔진은 HTML을 처음부터 한 줄씩 파싱 하여 DOM을 생성하다가 CSS 로드하는 태그나 style 태그를 만나면 HTML 파싱 중단하고 CSS 파싱하여 CSSOM 생성함
• HTML 파싱 과정과 동일함
  • 바이트 → 문자열 → 토큰 → 노드 → 트리

 

렌더 트리 생성

• 렌더 트리
  • 각 HTML 요소의 레이아웃(위치와 크기)을 계산하는 데 사용되는 렌더링을 위한 자료구조
  • 렌더링 엔진이 파싱 된 DOM과 CSSOM을 생성하고 이 둘을 렌더링을 위해 렌더 트리로 결합한다.
  • 브라우저 화면에 렌더링 되는 노드만으로 구성된다.

 

자바스크립트 파싱과 실행

• DOM이 생성되면 자바스크립트에서 DOM API를 사용해서 DOM 조작할 수 있다.
• HTML 파싱 도중 자바스크립트 태그를 만나면 자바스크립트 엔진에게 제어권이 넘어가고 자바스크립트를 로드> 파싱 > 실행한다. 그 후 HTML 파싱이 재개된다.
• 자바스크립트 엔진은 자바스크립트를 해석하여 AST를 생성하고 이를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트 코드를 생성하여 실행한다.

 

리플로우와 리페인트

• 리플로우, 리페인트 공통점
  • 자바스크립트가 DOM API로 DOM이나 CSSOM을 변경한 경우 다시 렌더트리로 결합되고 변경된 렌더트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저 화면에 다시 렌더링 한다.
• 리플로우 :
  • 레이아웃 계산을 다시 하는 것을 말한다.
  • 노드 추가/삭제, 요소 크기/위치 변경 등 레이아웃에 영향을 주는 변경
• 리페인트
  • 다시 페인트 하는 것을 만한다.

 

✨ 자바스크립트 파싱에 의한 HTML 파싱 중단

• HTML 파싱 중단
  • 기본적으로 렌더링 엔진과 자바스크립트 엔진은 직렬적으로 파싱을 수행한다.
  • script 태그를 만나면 파싱이 블로킹되기 때문에 script 위치가 중요함
    • 발생할 수 있는 문제
      1. 아직 DOM 생성 안 됐는데 DOM에 접근하면 문제 발생함
      2. 렌더링이 늦어지기 때문에 사용자 경험 저하됨
• script 태그는 body요소의 가장 아래에 위치시키는 것이 좋은 아이디어이다.
  • 페이지 로드 시간이 빨라진다
  • DOM 조작 에러를 방지할 수 있다.

 

✨ script 태그의 async/defer 어트리뷰트

• async, defer
  • 자바스크립트 파싱에 의해 DOM생성이 중단되는 문제를 해결하기 위해 등장
  • 인라인 자바스크립트에는 사용할 수 없다 ⇒ <script> 안에 작성하는 코드
  • 둘 다 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.
  • 하지만, 자바스크립트의 실행 시점에 차이가 있다.
• async 어트리뷰트
  • 자바스크립트 파일 로드를 비동기적으로 동시에 진행한다.
  • 로드가 끝나면 HTML 파싱이 중단되고 자바스크립트 파싱과 실행이 진행된다.
• defer 어트리뷰트
  • 자바스크립트 파일 로드를 비동기적으로 동시에 진행한다.
  • 로드가 끝나도 HTML 파싱을 중단하지 않고 HTML 파싱이 끝나면 자바스크립트 파싱과 실행이 진행된다.
  • defer 어트리뷰트를 많이 사용한다.