홈페이지가 사용자에게 보이는 순서

juryang han·2022년 1월 20일
0

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

1.불러오기
로더(Loader)가 서버로부터 전달 받는 리소스 스트림을 읽는 과정
읽으면서 어떤 파일인지, 데이터인지 파일을 다운로드할 것인지 등 결정한다.

2.파싱(Phasing)
웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다.

파싱은 문자열을 의미하는 토큰으로 분해하고, 문법적 의미와 구조를 반영하여 트리형태의 자료구조인 파스 트리를 만드는 과정을 말한다.

3.렌더링 트리 만들기
DOM Tree는 내용을 저장하는 트리로 자바스크립트에서 접근하는 DOM객체를 쓸 때 이용하는 것이고 별도로 그리기 위한 트리가 만들어져야 하는데 그것이 렌더링 트리다.

4. CSS결정
css는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 css스타일을 분석해 태그에 스타일 규칙이 적용되게 결정한다.

5.레이아웃
렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정을 레이아웃이라고 한다.

6.그리기
렌더링 트리를 탐색하면서 그리기

0개의 댓글