할머니의 콤퓨타 도전기
Rendering Engine working process 본문
렌더링 엔진
- 렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일
- 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표시할 수 있음
- 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시 가능
- 파이어폭스는 모질라에서 직접 만든 게코(Gecko) 엔진, 사파리와 크롬은 웹킷(Webkit) 엔진 사용
- 웹킷
- 최초 리눅스 플랫폼에서 동작하기 위해 제작된 오픈소스 엔진
- 애플이 맥과 윈도우즈에서 사파리 브라우저를 지원하기 위해 수정함
- 웹킷
렌더링 엔진 동작 과정
- DOM tree 구축을 위한 HTML parsing, CSS, Javascript parsing: HTML 문서를 파싱한 후, content tree 내부에서 tag(a, div)를 DOM node로 변환. 그 다음 CSS 파일과 함께 모든 스타일 요소 파싱. 스타일 요소과 HTML 표시 규칙, Javascript의 파싱 결과물은 render tree를 생성 (정확하게는 render tree의 구성요소인 render object로 바뀜)
- render tree 구축: HTML과 CSS를 파싱해서 만들어진 render tree는 색상 또는 면적 등 시각적 속성을 갖는 사각형을 포함. 정해진 순서로 렌더링됨
- render tree는 배치 정보를 갖게됨
- render tree 배치: render tree가 생성이 끝나면, 배치 시작. 각 node가 정확한 위치에 표시되기 위해 이동
- render tree 그리기: 각 node 배치를 완료하면 UI 백엔드에서 각 node를 가로지르며 paint 작업을 함
1번과 2, 3, 4번은 병렬적으로 진행!
- DOM tree는 DOM node라는 자식 요소로 구성, render tree는 render object라는 자식 요소로 구성
- DOM tree가 다 구축된 다음에 render tree로 전환되는 것이 아닌, DOM tree의 구성요소인 각각의 DOM node들이 새로 생성되자마자 바로 render tree의 자식 요소인 render object로 전환됨.
- 바로바로 변환되는 과정을 통해 render tree가 바로바로 생성. 사용자는 DOM tree가 완벽히 완성될 때까지 화면에 아무것도 안보이는 것이 아닌, DOM tree가 완성되는 중간중간 바로 render tree가 구축되어짐. 따라서 render tree가 그려짐으로 인해 브라우저가 조금씩 그려지는 것을 확인할 수 있음
- 즉, 통신 레이어에서 data를 계속 받아오면서 받아온 HTML, CSS, Javascript를 parsing하면서(1번) render tree에 node를 그림. (2, 3, 4번)
webkit의 동작 과정
- HTML을 parsing하여 DOM tree 생성한다.
- HTML 태그를 parsing하게 되면 DOM (Document Object Model) tree를 생성하게됨. DOM node들의 tree 형태 표현
- HTML은 Hypertext Markup Language로 정보를 표시해주는 언어. 따라서 정보를 동적이게 움직이게하는 프로그래밍 언어로써 동작은 불가능
- 그래서 HTML을 DOM tree로 바꾸게 되면, 자바스크립트가 조작할 수 있음 (동적으로 표현 가능. 사용자와 상호작용 가능해짐)
<html>
<body>
<p>Hello World</p>
<div>
<img src="example.png" />
</div>
<script></script>
</body>
</html>
- 브라우저의 tag들은 parsing을 하면 실행과 동시에 위와 같이 DOM tree로 생성
- 렌더링 엔진이 HTML tag를 DOM tree로 바꿀 때에는 태그를 파싱함과 동시에 실행
- ex. html 태그 파싱하고 실행하고, body 태그 파싱하고 실행하고 ~
- script 태그는 자바스크립트를 가져와서 실행하는 코드. 따라서 이 script 태그를 만나게 되면 이 script 태그를 파싱하고 실행할 때까지 다음 태그를 파싱할 수 있음. 그러므로 body tag의 마지막에 위치하는 것이 좋음
- 그렇게 해야 앞의 모든 태그들을 파싱한 뒤에 스크립트 태그를 가장 마지막에 파싱하는 동안 추가적으로 파싱할 html 태그가 남아있지 않게 됨
- HTML5에는 <script> tag를 비동기로 처리하는 속성을 추가함
- CSS(style sheets)를 parsing 하여 스타일 규칙을 얻는다.
- CSS도 HTML과 마찬가지로 object model을 갖고있음 (CSSOM)
- css parsing하여 CSSOM 생성(스타일 규칙)
- 스타일 규칙은 어떤 DOM tree의 어떤 DOM node에 해당하는 스타일 규칙인지에 대해 DOM node 정보를 갖고있음
- DOM tree를 생성하는 동시에, 이미 생성된 DOM tree와 스타일 규칙(CSSOM)을 Attachment 한다.
- DOM tree를 구성하는 하나의 DOM node는 attach라는 method를 가짐. attach method가 실행이 되면 결과물로 DOM node에서 render object로 변환이됨. DOM node에 CSS 규칙이 붙어서 최종적인 DOM node가 새롭게 생성되는 순간 attach method 실행. 즉 새로운 DOM node가 추가되면 attach가 호출되어 render object를 생성
- DOM tree에서 render tree로 바로바로 DOM node가 만들어지자마자 render object가 생성됨
- render object는 render tree의 구성요소로써, 자신과 자식 요소를 어떻게 배치하고 그려야할지 앎
- 모든 DOM node가 전부 render object로 생성되는 것은 아님 (ex. head tag, display none tag 등)
- <html>과 <body> DOM node 또한 render object로 구성되는데 이들은 render tree root로써 render view라고 부름
- 나머지 DOM node들은 render object로 생성되어 이 render tree root에 추가됨
- 구축한 render tree를 배치(layout)한다.
- 배치는 <html> 요소에 해당하는 최상위 render object(render view)에서 시작
- 화면에 왼쪽 위부터 render object에 해당하는 DOM node를 그려나감
- 배치가 끝난 render tree를 그린다.
- render tree 탐색 후 해당하는 render object의 paint method를 호출 (UI 백엔드에서 담당)
webkit 렌더링엔진 처리과정 요약
- HTML을 해석해서 DOM Tree 만들고, CSS 해석해서 CSS Tree(CSS Object Model) 만듦
- 이 과정에서 Parsing 과정이 필요
- 토큰 단위로 해석되는 방식. 일반적인 소스코드의 컴파일 과정
- DOM tree와 CSS Tree 두 개는 연관되어 있으므로 Render Tree로 다시 조합됨
- 조합된 결과는 화면에 어떻게 배치할지 크기와 위치 정보를 담고 있음
- 이후 이렇게 구성된 Render Tree정보를 통해 화면에 어떤 부분에 어떻게 색칠을 할지 Painting 과정 거침
참고
'웹 개발 용어 및 개념 정리' 카테고리의 다른 글
| CDN (Content Delivery Network) (0) | 2022.01.19 |
|---|---|
| 정규 표현식 정리 (0) | 2021.05.15 |
| Axios (0) | 2021.05.06 |
| HTTP Protocol (+HTTPS) (0) | 2021.04.30 |
| Browser rendering process (0) | 2021.04.29 |
'웹 개발 용어 및 개념 정리' Related Articles
more
Comments