proceess-rendering-browser.md

브라우저 렌더링 원리에 대해 설명 부탁드립니다.

1. 불러오기 : 로더(Loader)가 서버로부터 전달받은 리소스 스트림을 읽는 과정

2. DOM, CSSOM 생성 웹 엔진의 HTML/XML 파서가 문서를 파싱해 DOM Tree를, CSS 파서가 CSSOM 트리를 생성(아래 파싱, 스크립트와 스타일 시트의 진행순서 참조)

3. 생성된 DOM과 CSSOM으로 렌더링 트리 생성 DOM Tree + CSSOM Tree, 렌더링에 필효한 노드만 선택해 페이지를 렌더링하는데 사용

4. css, 레이아웃 : 렌더트리를 토대로 그려질 노드와 스타일, 크기를 계산 렌더링 트리에서 위치, 크기등을 알 수 없기 때문에 객체들에게 위치 크기 등을 정해주는 과정, css는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 css 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정

5. 그리기 : 렌더트리의 각 노드를 실제 픽셀로 변환 ➡️ 실제로 그리는 작업을 실행

참고자료

• https://d2.naver.com/helloworld/59361
• https://velog.io/@zaman17/%EA%B8%B0%EC%88%A0%EB%A9%B4%EC%A0%91%EB%8C%80%EB%B9%84-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%88%9C%EC%84%9C%EC%99%80-%EC%9B%90%EB%A6%AC