프론트엔드/JavaScript
브라우저 렌더링 과정에 대해 알아보자
카엔입니다
2023. 2. 12. 04:37
브라우저 렌더링 과정에 대해 알아보자
브라우저 렌더링 과정에 대해서 알아보자
그전에 먼저 알아둬야할 용어 몇가지만 먼저 얘기하면
용어
렌더링 엔진
요청 받은 내용을 브라우저 화면에 표시해주는 친구
HTML과 CSS 이미지를 표시한다
렌더링 엔진은 브라우저 별로 다르다
예를 들면 크롬은 웹킷 엔진을 사용하고 파이어폭스는 게코 엔진을 사용한다
렌더링 과정
- 사용자가 웹 사이트에 접속
- 서버로부터 HTML, CSS 등 리소스를 다운 받음
- 브라우저 렌더링 엔진이 HTML과 CSS를 파싱해서 DOM과 CSSOM을 생성
- 생성된 DOM과 CSSOM을 결합해 렌더트리 생성
- 브라우저의 자바스크립트 엔진이 서버로부터 응답된 자바스크립트를 파싱해 바이트코드로 변환하여 실행
- 렌더트리를 기반으로 HTML요소의 레이아웃을 계산
- 브라우저 화면에 페인팅