엔진의 종류

웹킷 동작 과정

게코 동작 과정

• 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진을 사용하고, 사파리와 크롬은 웹킷(Webkit) 엔진을 사용함.
• 두 엔진은 그림과 같이 용어를 약간 다르게 사용하고 있지만, 동작과정은 기본적으로 동일함.

기본 동작 과정

<aside> 💡 DOM 트리 구축을 위한 HTML 파싱 ⇒ 렌더 트리 구축 ⇒ 렌더 트리 배치 ⇒ 렌더 트리 그리기

</aside>

1. 파싱 : 통신으로 받아온 HTML 문서와 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱함. 이 과정으로 DOM 트리와 CSSOM 트리가 구축됨.

• 파싱의 의미 알아보기

2. 렌더 트리 구축 : 위 과정에서 구축한 DOM 트리와 CSSOM 트리를 합쳐 렌더 트리를 구축함. ⇒ 렌더 트리는 색상 또는 면적과 같은 시각적 속성과 같이 페이지를 렌더링하는 데 필요한 노드만 포함되며, 정해진 순서대로 화면에 표시됨. (위치와 크기는 가지고 있지 않음)

3. 렌더 트리 배치 : 레이아웃은 각 객체의 정확한 위치 및 크기를 계산함.

4. 페인트 : 마지막으로 UI 백엔드에서 픽셀을 화면에 그리며 형상을 만들어 냄.

+) 위와 같은 일련의 과정을 아는 것이 중요함. 실제로 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하기 위해 모든 HTML을 파싱할 때까지 기다리지 않고 배치과 그리기 과정을 시작함. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것!

부가 기능

• 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시할 수 있음.