Web Browser HTML Rendering 순서

Web Browser HTML Rendering 순서

웹 브라우저의 HTML 문서 렌더링 순서

설명 1

 

HTML 태그를 파싱해서 DOM Tree 생성

Style 정보를 통해 Style Struct 생성

DOM Tree와 Style Struct를 통해 Render Tree 생성

레이아웃 처리

페인트

리플로->리페인트: 구성돼 있는 렌더 트리가 변경되면 수행 된다

리플로 변경이 필요한 렌더 트리에 대한 유효성 확인 작업+노드의 크기와 위치를 다시 계산

 

리페인트

리플로가 발생하거나 배경색 변경 등 단순한 스타일 변경과 같은 작업이 발생하는 경우 수행됨

설명 2

서버로부터 전달받는 Resource를 읽는다

 

웹 엔진이 가지고 있는 HTML/XML parser가 문서를 parsing해서 DOM Tree를 만든다

 

렌더링 트리를 만드는데 렌더링 트리는 DOM Tree와는 다른 것으로 DOM Tree는 자바스크립트에서

DOM 객체를 사용할 때 쓰는 것이고 별도로 그리기 위한 Tree로 렌더링 Tree가 만들어진다

(특별한 의미가 없는 head, title, body 태그 등이 없고 화면에서는 보여줄 필요가 없는 속성들도 걸러낸다)

 

태그에 CSS 가 적용되도록 스타일을 결정한다

 

레이아웃을 통해 객체의 위치와 크기를 정해준다

 

그리기 수행

 

ps. CSS 파일은 최대한 빨리 스타일 규칙을 알아내야 하므로 head 태그 사이에 놓는 것이 좋다고하고

자바스크립트는 DOM 객체를 이용하여 컴포넌트들을 조작하므로 head 태그 사이에 놓게 되면 HTML 파서가 파싱을 멈추고 스크립트 파일을 읽게 되므로 head 태그 사이에 스크립트 파일이 많거나 스크립트 파일이 크면 읽는 시간이 오래 걸려 사용자 입장에서 웹페이지가 느리다고 느낄 수 있다

 

설명 3 

1 HTML을 파싱한다

2 외부 스크립트나 스타일시트 로딩

3 문서 내 스크립트를 파싱하면서 실행

4 HTML DOM 모두 생성

5 그림과 외부 콘텐츠 로딩

6 페이지 로딩 끝

ps. jQuery ready 함수는 4번 이후에 동작

onload 함수는 6번 이후 동작

->

$(document).ready() DOM Tree 생성 후 실행된다

$(window).load() 화면이 모두 그려진 다음 실행됨

$(window).load()가 더 늦게 실행된다

 

설명 4

 

1.HTML 파싱

2.외부스크립트와 css로딩(바로실행)

3.HTML DOM 구조 생성완료

4.이미지와 외부 콘텐츠를 로딩

5.페이지 로딩완료