브라우저 렌더링 원리 ( Critical Rendering Path )
렌더링이란 웹사이트에 url로 접근했을 때 서버로부터 받은 ( HTML,CSS, 자바스크립트 ) 등의 응답을 화면에 나타내는 것이다
브라우저 엔진
브라우저마다 렌더링을 수행하는 렌더링 엔진을 가지고 있다.
브라우저 : 파이어폭스 - 게코 엔진
엔진 : 사파리, 크롬 - 웹킷 엔진
브라우저 렌더링 (Critical Rendering Path) 과정
Critical Rendering Path(CRP)는 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다.
DOM 트리 만들기 - CSSOM 트리 만들기 - Render 트리 만들기 - 레이아웃 생성하기 - 페인팅
이제 각 단계마다 어떤 역할을 하는지 알아보자
DOM 트리 생성
HTML 문서를 파싱 하여 DOM(Document Object Model) 트리를 구축한다.
브라우저는 서버로부터 HTML 문서를 모두 전달받고 HTML 파서를 통하여 파싱(parsing)하고 파싱 트리를 생성하고,
생성된 파싱 트리를 기반으로 DOM (Document Object Model) 트리를 생성하게 된다 .
CSSOM 트리 생성
CSS파일은 CSS파서에 의해 파싱 되어 CSSOM트리로 변환된다.
파싱(parse or parsing)
문서를 파싱한다는 것은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것이다.
파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리 또는 문법 트리 라고 부른다.
렌더 트리 (DOM + CSSOM) 생성
DOM 트리와 CSSOM 트리가 만들어지면, 이 둘을 결합해서 렌더링 트리를 생성합니다. 렌더링 트리에는 페이지를 렌더링 하는데 필요한 노드만 포함된다.
<head>, display:'none' 와 같은 사용자가 볼 수 없는 DOM 요소는 렌더 트리에 추가되지 않는다.
레이아웃 ( Layout )
레이아웃 단계에서는 뷰포트 내에서 각 요소들에게 위치(position)와 크기(size)를 결정해준다.
Viewport
그래픽이 표시되는 브라우저 영역, 크기 뷰포트는 모바일의 경우 디스플레이의 크기, pc의 경우 브라우저 창의 크기에 따라 달라진다.
Paint 단계
마지막으로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하게 된다. 레이아웃 단계에서 모든 위치와 크기에 대한 계산이 완료가 되면, 화면에 요소들을 그리게 ( Painting ) 된다.
HTML파서가 <script> 태그를 만나면?
지금까지 설명으로 HTML 문서를 파싱 하여 HTML과 CSS를 렌더링 엔진에서 처리하는 과정을 알아보았는데,
위 과정까지 만으로 웹 페이지를 화면에 나타내는 것은 충분하지만 Javascript는 어떻게 처리가 되는지 알아 볼 필요가 있다
자바스크립트는 자바스크립트 엔진이 처리한다 HTML 파서는 <script> 태그를 만나면 Javascript 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 권한을 넘기게된다.
제어 권한을 넘겨받은 자바스크립트 엔진은 <script> 태그 내의 Javascript 코드 또는 src 속성에 정의된 Javascript 파일을 로드하고 파싱 하여 실행한다.
자바스크립트 실행이 완료되면 다시 HTML파서로 권한을 넘기고 중지했던 시점 부터 다시 DOM 생성을 재개 하게된다.
브라우저는 동기적으로 HTML, CSS, Javascript를 처리하는데, 이는 <script>태그의 위치에 따라 DOM생성이 지연될 수 있다는 뜻이다.
보통 <body>요소의 가장 아래에 <script>태그를 위치하는게 좋은 방법이다.
첫번째는 HTML 요소들의 렌더링이 지연되는 일이 없기 때문에 화면의 로딩시간이 줄고 사용자에게 더 좋은 경험을 줄 수 있기 때문이고, 두번째는 DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작 한다면 에러가 발생하기 때문이다.