최근 제가 렌더링 최적화에 대한 튜토리얼은 되도록이면 이전 것들까지 번역하려고 노력하고 있는데 레이어(Layer) 모델은 브라우저가 렌더링을 하기 위한 동작에 대해 이해하는 가장 기초적인 개념이 될 것입니다. 이와 더불어 3D 그래픽스에 대한 약간의 지식만으로도 훨씬 더 나은 하드웨어 가속 렌더링에 대한 이해가 가능하므로 읽어보시기를 권장합니다.
TL;DR;
대다수의 웹 개발자들에게 웹 페이지의 일반적인 모델은 DOM이며 렌더링은 일반적으로 이러한 페이지의 표현 형태를 화면상의 이미지로 변환하는 과정입니다. 모던 브라우저들은 이 렌더링에 있어 최근 몇년동안 "하드웨어 가속"이라고 불리는 성능적 뒷받침을 받기 위해 노력해왔습니다. 이 글은 크롬에서 웹 컨텐츠의 하드웨어 가속 렌더링의 기반이 되는 기본 모델에 대해 설명합니다.
아래는 그 중 일부 중요한 내용만 따로 차용한 것입니다. 자세한 내용은 본문을 참조하시기 바랍니다.
DOM의 스크린 출력을 위한 개념적인 과정
- DOM을 레이어들로 분리
- 개별 레이어를 비트맵으로 출력
- GPU 텍스쳐로 업로드
- 다양한 레이어의 합성을 통해 스크린 출력
레이어(Layers)
- DOM 구조는 렌더링할 때 브라우저는 개발자에게 직접 보여지지 않는 중간 표현의 연속 과정을 가지게 됩니다. 이 구조들 중 가장 중요한 것은 레이어입니다.
- 레이어의 컨텐츠를 소프트웨어 비트맵으로 출력하여 GPU에 텍스쳐로 업로드
- 업로드 후 합성(Composition)에 해당하는 렌더링은 가속됨
- 시스템과 GPU의 메모리의 낭비
- 가시성 추적에 의한 로직 상의 부하
- 레이어의 숫자/크기/겹침에 따른 픽셀화(Rasterizing)에 소모되는 시간의 증가 등
번역 링크
- 크롬의 렌더링 가속: 레이어 모델
댓글 없음:
댓글 쓰기