인프런 커뮤니티 질문&답변

안녕하세요 강사님! 우선 좋은 강의 감사드립니다 :)

열심히 보고 있습니다 ㅎㅎ..

브라우저 렌더링 관련되어 의문이 생겨 질문을 남겨보니 시간 여유있으실 때 답변해주시면 좋겠습니다.

렌더 트리? 렌더 레이어 ?? 렌더객체??

짧게 브라우저 렌더링 관련하여 공부를 하고 인강을 들으면서 다시 복기를 하였을 때 렌더레이어라는 말을 처음 들어보는 것 같아 추가적으로 정보를 찾아보려고 browser render layer 와 같은 키워드를 찾아보았습니다.

[Naver D2 - 하드웨어 가속에 대한 이해와 적용] 글을 발견하였고 아래와 같은 설명이 있었습니다.

• DOM 트리: HTML 웹 페이지를 파싱한 트리로, HTML 문서의 각 요소를 쉽게 처리(추가, 삭제 등)하기 위하여 브라우저의 엔진이 사용하는 트리다.

   

• RenderObject 트리: DOM 트리로부터 만들어지는 트리로, DOM 트리의 노드 가운데 실제 화면에 표현되는 노드만으로 구성된 트리다.

   

• RenderLayer: 브라우저의 엔진이 하드웨어 가속 등을 처리하기 위해 사용하는 논리적인 레이어로, 각 RenderObject의 속성에 따라 RenderLayer에 할당된다.

   

• GraphicsLayer: 하드웨어 가속 처리를 위한 물리적인 레이어로, 레이어별 RenderObject를 GraphicsLayer 단위로 렌더링한 뒤 최종적으로 GPU를 통해 합성된다.

그리고 PDF 기준 150~151번째 페이지에 아래와 같은 코멘트가 있습니다.

Q. 렌더객체와 렌더레이어는 1:1 대응일까요?

- NO : display:none으로 사라지는 노드들이 있을 수 있기 때문입니다.
하지만 DOM 트리와 렌더트리는 1:1대응이 됩니다. 이렇게 렌더트리가 생성된 후..

제가 이해한 바로는 위 D2에서 이야기하는 RenderObject Tree 를 렌더트리라고 명명 하신 것 같습니다.(아니면 저의 이해력부족인 것 같습니다 🥲)

DOM트리에서 렌더트리(RenderObject Tree)를 생성할때 이미 font-size의 상속 및 display:none에 해당하는 DOM 객체에 대한 수정이 이루어지고 그렇게 된다면 1:1 대응이 되지 않는것이 맞는 것 같다는 생각이 들어 문의를 드립니다!

그렇다면 DOM트리와 렌더트리(Render Object Tree) 렌더레이어(Render Layer) 그 어느것도 1:1대응이 되지 않는 것이 아닐까요?

질문 끝까지 읽어주셔서 감사합니다 :)

답변 기다리고 있겠습니다!