브라우저 렌더링 과정 이해하기 (작성중)

javascript를 공부하면서 내가 아직 브라우저 렌더링 과정에 대해 정확히 알지 못하고 있다는 것을 깨달아서 정리해보기로했다.

 

사전지식

• 브라우저 : 웹상에 존재하는 페이지들을 검색 및 열람하기 위한 응용 프로그램의 총칭
  ex) chorme, safari, internet explorer, microsoft edge 등
• 렌더링 : HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것
• 파싱 : 프로그래밍 언어로 작성된 문서의 문자열을 '토큰'으로 분해 -> 토큰으로 트리구조의 자료구조인 '파스트리'를 생성 -> 파스트리를 기반으로 '바이트 코드' 생성하고 실행

 

브라우저 렌더링 동작 과정

1. 렌더링에 필요한 리소스를 서버에 요청하고 응답 받는다.
2. 서버로부터 응답된 리소스를 파싱하여 트리를 생성한다.
3. 각각의 트리를 결합하여 렌더트리를 생성한다.
4. 렌더트리를 기반으로 레이아웃을 계산한다.
5. 브라우저 화면에 요소를 페인팅한다.

 

---

 

1. 요청과 응답

렌더링에 필요한 리소스(HTML, CSS, JS, 이미지 등)는 서버에 존재하므로 서버에 요청해서 응답을 받아야 한다.

요청 : 브라우저의 주소창에 URI를 입력한다

응답 : html, css, javascript 등 응답

 

2. 파싱

• 브라우저의 렌더링 엔진은 응답받은 html 문서를 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.
• DOM을 생성하다가 CSS파일을 link태그. 자바스크립트를 로드하는 script 태그등을 만나면 html 파싱을 일시 중단하고 해당 리소스 파일을 서버에 요청하여 (CSS=>CSSOM) 로 먼저 파싱하고 일시 중단된 지점부터 DOM 생성을 재개한다.

 

 

3. 렌더 트리 생성

• DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합된다.
• 완성된 렌더 트리는 각 html 요소의 레이아웃을 계산하는데 사용되며 브라우저 화면에 픽셀을 렝더링하는 페인팅처리에 입력된다.
•