질문
브라우저는 어떻게 동작할까? 를 읽다가 궁금한 점이 생겨서 질문합니다!
동작 과정 목차의 그림 2 렌더링 엔진의 동작 과정에서, DOM 트리 구축 위한 HTML 파싱 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기로 저는 순차적인 과정이라고 이해했다가, 헷갈리는 부분이 생겨서 질문 드립니다!
- 렌더 트리 구축 목차를 읽어보면,'DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축한다'고 되어 있습니다. DOM 트리 구축과 렌더 트리 구축은 동시에 일어나며, DOM 트리가 구축된 만큼 렌더 트리도 구축된다고 이해하면 맞을까요?
- 렌더 트리 구축에서 '렌더러는 너비, 높이, 위치와 같은 기하학적 정보를 포함한다'고 되어 있습니다.하지만 렌더 트리 배치의 설명을 읽어 보면' 렌더러가 생성되어 트리에 추가 될 때는 크기와 위치 정보는 없는데, 이런 값을 계산하는 것을 배치 또는 리플로 라고 한다' 라고 설명하고 있습니다.그렇다면 렌더 트리 구축에 렌더 트리 배치 단계가 포함된다고 봐도 무방할까요?
답변
이 블로그 읽어보시면 도움되실 것 같습니다.! [자료]
답변을 정리해서 올립니당
1.
민수님이 보내주신 자료
렌더링 엔진은 더 나은 UX를 위해 가능한 빠르게 내용을 표시하기 위해 모든 HTML 파싱이 끝나기도 전에 이후의 과정을 수행(Render Tree 생성, 배치, 그리기)하여 미리 사용자에게 보여줄 수 있는 일부 내용들을 출력함제가 읽었던 글
일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요하다. 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것이다.=> 즉, '모든 과정이 점진적으로 진행된다'이 1번 질문에 대한 답입니다
2.
렌더 트리 생성과 렌더 트리 배치의 차이점
렌더 트리 생성될 때는 각 노드마다 스타일 정보가 설정되어 있습니다
렌더 트리 배치(layout)는 이러한 스타일 정보를 뷰포트(브라우저 화면)의 어느 위치에 어느 크기로 출력될지 계산하는 단계입니다.
예를 들어 %, vh, vw와 같이 상대적인 위치, 크기 속성(렌더 트리의 노드에 설정된 스타일 정보)을 실제 화면에 그려지는 pixel 단위로 변환하는 것이 렌더 트리 배치(layout)에 해당합니다.
민수님이 추천해주신 자료 덕에 잘 이해했어요 감사합니다~~!