렌더링
브라우저 측면에서 렌더링은 html, css 코드를 해석하고, 이를 시각적으로 화면에 표시하는 작업을 말한다. 이 작업은 렌더링 엔진이라고 하는 브라우저 내부의 소프트웨어 구성 요소가 수행한다.
렌더링 엔진
html, css, javascript의 내용을 토대로 브라우저 화면에 표시하는 일을 한다.
다시말해, HTML 코드를 파싱하고 문서 객체 모델(DOM)을 구성하여 웹 페이지의 구조를 결정한다. 그런 다음, CSS 코드를 파싱하여 스타일 시트(CSSOM)를 구성합니다. 마지막으로, DOM과 CSSOM을 결합하여 렌더 트리(Render Tree)를 구성하고, 이를 시각적으로 브라우저 창에 렌더링합니다. 또한, JavaScript 코드를 실행하여 페이지의 동적인 요소를 처리
ex) 파이어폭스 - 게코엔진, 사파리/크롬 - 웹킷엔진
=> 이러한 프로세스는 브라우저가 웹 페이지를 표시하는 데 필요한 시간과 성능에 직접적인 영향을 미치므로, 웹 개발자는 페이지 성능을 최적화하는 데 이러한 프로세스를 고려해야 한다.
1. DOM tree 구축
div, span 등 각각의 요소(엘리먼트)를 가지는 하나의 html 페이지에서, 각 요소는 하나하나 노드로 설정되어 트리형태로 저장되는데, 이를 DOM tree 라고 한다.
ex) div > span, span 의 경우 (부모노드 div 밑에 2개의 자식노드 span이 생기는 것)
2. 랜더트리와 렌더레이어 생성
각각의 노드는 css 파서에 의해 정해진 스타일 규칙이 적용되어 있고, 이러한 규칙에 따라 CSSOM이라는 트리가 만들어지고, 미리 만들어 놓은 DOM 트리 내에 있는 노드와 함께 렌더객체(render object)가 생성되며, 이들이 모여 병렬적인 렌더트리가 생성된다. 이후, 최적화를 거쳐 렌더 레이어가 완성된다.
3. 렌더레이어를 대상으로 layout 설정
부모 기준으로 좌표 설정.
4. 렌더레이어를 대상으로 칠하기 (paint)
픽셀마다 점 찍듯 칠하며, 이를 레스터화라고도 한다.
5. 레이어 합치기(composite layer) 및 표기
각각의 레이어로부터 비트맵이 생성되고, gpu에 텍스처로 업로드된다. 그 다음 텍스쳐들은 서로 합쳐져 하나의 이미지로 렌더링되며 화면으로 출력된다.
가상 DOM
기존 - 요소를 바꿀 때마다 그만큼 렌더트리를 생성함 => 비효율
가상 DOM - 가상의 돔에 ui를 저장했다가 실제 DOM과 연동하는 컨셉 or 그걸 하는 js 객체 지칭 => 수 많은 요소가 수정이 되어도 딱 한 번 수정 변화가 일어난 요소만 새로 렌더링함.
