[Browser Rendering] - 2. 브라우저 렌더링 순서 ( webkit의 동작과정 )

728x90

위 강의를 보고 정리한 내용입니다.

URL과 URI

URL은 URI에 포함된다.
URI는 네트워크 상에서 자원을 식별하기 위한 문자열(식별자까지 포함)
URL은 네트워크 상의 자원의 위치를 나타내는 주소

https://hanseul-lee.github.io/2020/12/24/20-12-24-URL/

결론적으로 요약하자면, URL과 URN은 URI의 종류이다.

그렇기에 모든 URL은 URI이고, 또한 모든 URN은 URI이다.

URL, URN 그리고 URI

GraphQL과 RESTful API 정리하다가 URL, URN 그리고 URI의 차이점에 대해서 알고 넘어가야 할것 같아서 작성하는 글이다. 결론부터 말하자면 아래와같다. 자원의 식별자(URI), 위치(URL), 이름(URN) URI(Uniform..

im-designloper.tistory.com

렌더링 엔진

URI를 통해 요청을 받아서 해당하는 데이터를 렌더링 하는 역할

렌더링 엔진이 하는일

1. Dom tree 구축

2. Render tree 구축

3. Render tree 배치

4. Render tree 그리기

DOM tree가 완벽하게 구축되고나서 Render tree가 배치,그려지는 순서가 아니고

DOM tree가 완성되는 중간중간 Render tree가 그려지는 병렬적인 실행

Dom tree 와 Render tree 구축 과정

1. html문서를 파싱하고 content tree 내부에서 tag들을 DOM node로 변환

2. css파일과 함께 모든 스타일 요소를 파싱 > 스타일 규칙이 적용된 CSSOM tree가 구성

3. DOM tree와 CSSOM tree가 만들어지면 화면에 렌더링 될 노드들만 포함하여 Render tree가 생성된다

webkit의 동작과정

webkit은 사파리에사 사용중인 브라우저 렌더링 엔진이다.

1. html을 파싱해서 DOM tree를 생성

html태그가 파싱되어 DOM tree가 생성되는데, 정확히는 DOM node의 tree형태를 이야기 함

html을 DOM tree로 바꾸는 이유 > javascript로 조작이 가능해져 동적 상호작용이 가능해진다.

html5에서는 <script>태그를 비동기로 처리하는 속성을 추가했다.

1. defer
: HTML 파싱이 완료된 후, JavaScript 코드의 실행이 시작된다

2. async
: HTML 파싱과 함께, 비동기로 JavaScript 파일을 불러온다.
> HTML파싱이 완료되지 않았더라도, 먼저 로딩되는 JavaScript파일부터 실행이 시작된다.
또한 이 때, HTML 파싱이 중단된다.

2. css를 파싱하여 스타일 규칙을 얻는다.

css파서가 DOM node에 대한 스타일 규칙을 가진 CSSOM를 생성한다.

3. 1번에서 생성한 DOM tree에 2번에서 생성한 CSSOM을 Attachment한다.

DOM tree를 구성하는 하나의 DOM node는 attach라는 method를 가지고 있는데,

attach를 실행하게 되면 DOM node가 render object를 생성한다.

render object는 render tree의 구성요소로써, 자기 자신과 자기 자식들을 다 알고있다.

모든 DOM node가 전부 render object로 생성되는것은 아니다 ( head 태그, display :none 등은 생성되지 않음 )

<html>,<body>태그도 render object로 구성되는데, render tree root로써 render view라고 불린다.

4. 구축한 render tree를 배치한다.

최상위 render object부터 시작해
화면의 왼쪽 위부터 render object에 해당하는 DOM node를 그려나간다.

5. 배치가 끝난 render tree를 그린다.

render tree 탐색 후 해당하는 render object의 paint method롤 호출해 render tree를 화면에 그린다.(ui 백엔드가 담당)

✔️ 참고

https://cyk0825.tistory.com/12

https://medium.com/%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98%ED%92%88%EA%B2%A9/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95-5c01c4158ce

https://curryyou.tistory.com/342