38. 브라우저의 렌더링 과정

• 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행
  • 파싱 (parsing, 구문 분석)
    • 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 토근으로 분해하고, 문법적 의미와 구조를 반영하여 파스 트리를 생성하는 일련의 과정
    • 파싱이 완료된 이후에는 파스 트리를 기반으로 바이트코드를 생성하고 실행함
  • 렌더링 (rendering)
    • HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력
• 브라우저 렌더링 순서
  • 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지 등 필요한 리소스를 요청하고 서버로부터 응답 받음
  • 2. 렌더링 엔진은 응답된 HTML과 CSS를 파싱하여, DOM과 CSSOM을 생성 및 결합하여 렌더 트리 생성
  • 3. 자바스크립트 엔진은 응답된 자바스크립트를 파싱하여 AST 생성하고 바이트코드로 변환하여 실행함, 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음
  • 4. 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅함

38.1. 요청과 응답

• 브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 응답 받아 시각적으로 렌더링하는 것
  • 렌더링에 필요한 리소스는 모두 서버에 존재하므로, 서버에 요청하고 응답한 리소스를 파싱하여 렌더링하는 것
• 서버 요청 전송하기 위한 주소창 제공
• 요청과 응답은 개발자 도구의 Network 패널 확인 가능

38.2. HTTP 1.1과 HTTP 2.0

• HTTP : 웹에서 브라우저와 서버가 통신하기 위한 프로토콜 (규약)
• HTTP/1.1
  • 커넥션 당 하나의 요청과 응답만 처리, 동시 전송이 불가능한 구조
  • 요청할 리소스의 개수에 따라 응답 시간 증가
• HTTP/2
  • 다중 요청/응답 가능
  • 1.1에 비해 페이지 로드 속도 50% 가량 빠름

38.3. HTML 파싱과 DOM 생성

• 브라우저의 렌더링 과정
  • 1. 브라우저의 요청에 의해 HTML 파일 바이트로 응답
  • 2. 응답된 바이트 형태의 HTML 문서를 meta charset에 지정된 인코딩 방식으로 문자열 변환
  • 3. 변환된 HTML 문서를 문법적 의미를 갖는 코드의 최소 단위인 토큰으로 분해
  • 4. 각 토큰들을 객체로 변환하여 노드 생성, DOM을 구성하는 기본 요소가 됨
  • 5. 중첩 관계를 갖는 HTML 요소 간 관계를 반영하여 트리 자료구조(DOM) 구성
• DOM (Document Object Model) : HTML 문서를 파싱한 결과물

38.4. CSS 파싱과 CSSOM 생성

• 1. 렌더링 엔진은 HTML을 순차적으로 파싱하며 DOM 생성
• 2. 생성 중 CSS를 로드하는 link 또는 style 태그를 만나면 일시 중단
• 3. HTML과 동일한 파싱 과정을 거치며 CSSOM (CSS Object Model) 생성
• 4. CSS 파싱이 완료되면 중단 지점부터 다시 DOM 생성 재개

38.5. 렌더 트리 생성

• 렌더 트리 : 렌더링을 위한 트리 구조의 자료구조
  • 생성된 DOM과 CSSOM은 렌더 트리로 결합됨
  • 브라우저 화면에 렌더링되는 노드만으로 구성됨
  • 완성된 렌더 트리는 각 HTML 요소의 레이아웃을 계산하는 데 사용됨
  • 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력됨
• 리렌더링 되는 경우
  • 자바스크립트에 의한 노드 추가 또는 삭제
  • 브라우저 창 리사이징에 의한 뷰포트 크기 변경
  • HTML 요소의 레이아웃을 변경시키는 스타일 변경
• 리렌더링은 가급적 발생하지 않도록 주의해야 함

38.6. 자바스크립트 파싱과 실행

• 자바스크립트의 파싱과 실행은 자바스크립트 엔진이 실행
• 1. CPU가 이해할 수 있는 저수준 언어로 자바스크립트 코드 변환하여 실행
• 2. AST (Abstract Syntax Tree, 추상적 구문 트리) 생성
• 3. AST 기반으로 인터프리터가 실행할 수 있는 바이트코드를 생성하여 실행

토크나이징

• 자바스크립트 소스코드를 어휘 분석하여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해함

파싱

• 토큰들의 집합을 구문 분석하여 AST 생성함
• AST를 사용하여 TypeScript 등과 같은 트랜스파일러 구현 가능

바이트코드 생성과 실행

• AST는 인터프리터가 실행할 수 있는 바이트코드로 변환되고 실행됨
• 코드의 사용 빈도가 적어지면 디옵티마이징하기도 함

38.7. 리플로우와 리페인트

• DOM API를 사용하여 DOM이나 CSSOM이 변경되는 과정을 리플로우, 리페인트라고 함
• 리플로우
  • 레이아웃을 다시 게산
  • 노드 추가/삭제, 요소의 크기/위치 변경, 윈도우 리사이징 등
• 리페인트
  • 재결합된 렌더 트리를 기반으로 다시 페인트하는 것
• 레이아웃에 영향이 없는 경우 리페인트만 실행됨

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

• 렌더링 엔진과 자바스크립트 엔진은 직렬적으로 (동기적으로) 파싱 수행
• script 태그 위치에 의해 블로킹이 발생하므로 중요한 의미를 가짐
• 자바스크립트를 가장 아래에 위치시키는 것을 권장
  • 완성되지 않은 DOM을 조작하면 에러 발생 가능성
  • 자바스크립트 로딩/파싱/실행으로 인해 렌더링에 지장되면 페이지 로딩 시간이 길어짐

38.9. script 태그의 async/defer 어트리뷰트

• HTML5부터 도입된 async/defer 어트리뷰트 추가
• 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됨

asynce 어트리뷰트

• 자바스크립트의 파싱과 실행은 파일의 로드가 완료된 후에 진행되며, HTML 파싱은 중단
• 여러 개의 async 지정시 순서 보장되지 않음

defer 어트리뷰트

• 자바스크립트의 파싱과 실행은 HTML 파싱이 완료된 직후 (DOM 생성이 완료된 직후) 진행
• DOM 생성 완료가 필요한 자바스크립트에 유용함
  
  

[출처] 모던 자바스크립트, Deep Dive