Webkit / Gecko Rendering 엔진의 Life Cycle
Webkit / Gecko Rendering 엔진의 Life Cycle
위 그림은 아래 소스를 실행 시킨 과정을 도식화 한 이미지 입니다.
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head runat="server">
-
<title></title>
-
<script type="text/javascript">
-
//<![CDATA[
-
-
window.onload = function () {
-
// append
-
-
(function () {
-
-
var h = []
-
, container = document.getElementById('container');
-
-
for (var i = 0; i < 1000; i++) {
-
h.push('<a href="" style="margin-left:5px">' + i + '</a><br />');
-
}
-
-
container.innerHTML = h.join('');
-
-
})();
-
-
-
};
-
-
//]]>
-
</script>
-
</head>
-
<body>
-
<div style="position:fixed;width:500px;height:500px;border:1px red solid"></div>
-
<div id="container"></div>
-
</body>
-
</html>
-
1. Loading:
웹 서버로부터 브라우저가 렌더링할 문서 컨텐츠(Source Text)를 내려받는다.(일반적으로 8kb 크기 단위)
2. Parsing:
웹 서버로부터 내려받은 문서 컨텐츠(Source Text)를 브라우저가 파싱한다.
- Parsing 이란?
웹 서버로부터 내려받은 문서 컨텐츠(Source Text)를 기계(브라우저)가 이해하고 사용할 수 있는 구조(DOM 트리 )로 문서를 변환하여 반환하는 과정.
즉, 변환된 결과는 브라우저가 이해하고 사용할 수 있는 구조인 DOM 트리 구조로 반환되는 것이다.
- 생성된 DOM 트리는 다른 말로 (Contnet 트리, Parse 트리, Syntex 트리)라고도 불린다.
WebKit 렌더링 엔진의 모든 실행 과정이 이와 같이 점진적으로 이루어지나, 엔진 성능 최적화를 위해 내려받은 문서 컨텐츠의 모든 파싱 처리가(DOM 트리 변환) 완료 될 때까지 기다렸다 Render 트리를 생성하지는 않는다.
즉, 일괄 처리가 아닌 부분 처리로 컨텐츠를 파싱하여 랜더 트리를 더욱 빠르게 생성한다.
Parser 에 대한 더 자세한 설명은 아래 링크를 참조하시기 바랍니다.
Virgule's notes님의 브라우저 파싱과 DOM 트리 생성:
3. JS Execution
외부/인라인 Javascript를 파싱 후 실행시키는 과정.
4. Dom 트리 노드 생성
WebKit 렌더링 엔진은 HTML 문서 컨텐츠 상의 Source Text(HTML, Jascript, CSS, Image 등..)를 "Content 트리" 라고 불리는 트리 형태의 DOM 트리 노드로 반환한다.
5. Render 트리 생성
- Render 트리 란?
이미 생성된 DOM 트리 노드와 컨텐츠 내의 모든 스타일(CSS) 정보(외부 / 인라인 CSS)를 파싱하여 그에 따른 시각적인 정보(Rander Style 트리)가 포함된 렌더 트리를 생성한다.
즉, 생성된 렌더 트리는 문서의 모든 시각적인 요소(CSS 박스 모델과 연관된 모든 요소)가 포함된 형태를 갖게 되며, DOM 트리 노드 중 숨겨진 DOM 요소에 대응하는 노드는 랜더 트리에 포함되지 않습니다.
5.1 Render Style 트리
1. 모든 CSS Style(외부 / 인라인) 정보를 가짐.
2. Render 트리가 소유.
3. Render Object는 Style을 공유.
5.2 Render Layer 트리
특정 조건에 의해 생성되는 트리(렌더트리와 달리 무조건 생성되지 않는다.)
생성 조건.
1. 웹페이지 루트(Render View)
2. CSS Position이 명확한 경우(relative, absolute, fixed)
3. CSS transform이 적용된 경우
4. 투명도가 적용된 경우(CSS opacity)
5. overflow, alpha mask, reflection이 적용된 경우
6. <canvas>(3D context) 엘리먼트가 적용된 경우
7. <video> 엘리먼트가 적용된 경우
6. Layout
각 노드가 화면 상 어느 위치에 나타날 것인지 정확한 좌표를 지정하는 과정.
7. Painting
생성된 렌더 트리를 순회하며 각 노드를 UI 백엔드 레이어(각 브라우저에서 제공되는 사용자 인터페이스 레이어(Select 박스, 버튼, 각종 폼 등..)를 이용해 화면에 그리는 과정.
8. WebKit 엔진과 GenKo 엔진의 플로우 차이점.
- WebKit 렌더링 엔진 메인 플로우
- GenKo 렌더링 엔진 메인 플로우
위와 같이 모질라의 GenKo 렌더링 엔진 또한 WebKit 엔진과 거의 흡사한 형태를 가지고 있다.
8.1 WebKit 과 GenKo 엔진의 용어 차이점 정리:
WebKit: Render 트리
GenKo: Frame 트리
WebKit: Layout
GenKo: Reflow
WebKit: Attachment: 렌더 트리를 만들기 위해 DOM 노드와 시각적인 정보를 연결하는 작업.
GenKo: Content Sink: 렌더 트리를 만들기 위해 DOM 노드와 시각적인 정보를 연결하는 작업.
참고 사이트:
브라우저의 작동원리:
브라우저의 렌더링 엔진:
웹 브라우저는 어떻게 동작하는가?:
http://www.slideshare.net/joone/ss-9766705
