브라우저 엔진이 실행되는 과정을 아래 글에서 잘 설명해주셔서 링크를 남기는 목적으로 게시글을 작성했습니다 .
REFERENCE
browser rendering process
Deepdive 660p
youtube
간단하게 적은 과정
1. 브라우저 구성요소
사용자인터페이스 -> 브라우저 엔진(케시확인후 렌더링엔진에 데이터 요청 여부 전달) -> 렌더링엔진 -> (통신, js엔진(해석기 v8 ui백엔드(painting))
2. 렌더링엔진(webkit등) 동작과정
DOM tree구축 위한 HTML파싱(SSOM + DOM붙여서 매번 넘김) -> render tree 구축 -> render tree 배치 -> render tree 그리기
DOM tree 구축과 Render tree구축,배치,그리기는 서로 병렬적으로 진행된다
HTML안에 있는 어떤 태그 하나가 -> Parsing되서 Javascript Object로 바뀌고 -> 이것이 Dom Tree의 Node로 들어감 -> attatchment함수가 호출되서 (DOM + SSOM)Render Object로 바뀌고 -> 이것이
Render Tree의 Node로 들어감
Tag하나가 Parsing될때마다 위 과정을 계속 거친다.
-> render tree의 노드 배치가 완료 되면 paint메서드를 사용해서 ui백엔드에서 node들을 가로지르면서 페인팅함
그래서 옛날 로딩이 긴 웹사이트를 보면 위에서부터 한줄 한줄 로딩되는 이유가 위 병렬적인 과정 때문에 그런거임
SSOM
- SSOM의 각각의 node엔 스타일이 적용될 태그에 대한 정보를 가지고 있다.
- DOM이랑 SSOM붙어서 render Tree의 node로 변환된다
모든 DOM tree는 render object로 변환되나요?
head 태그와 같이 브라우저에 그려지는 요소가 아닌 태그는
변환되지 않습니다 .
왜 HTML을 parsing해서 DOM tree를 만드는 걸까요?
HTML(hyper text markup language)는 표시만 해줄수 있을뿐인 언어이다(정적인 언어 그려주면 끝) DOM으로 바꾼 HTML은 자바스크립트가 조작할 수 있기 때문이다.
