웹 브라우저의 구조
User Interface
주소 표시줄, 이전/다음/새로고침 버튼 등 웹 페이지를 제외하고 사용자와 상호작용 하는 사용자 인터페이스
Browser Engine
유저 인터페이스와 렌더링 엔진을 연결하는 브라우저 엔진
Rendering Engine
HTML과 CSS를 파싱하여 요청한 웹 페이지를 표시하는 렌더링 엔진
Network
각종 네트워크 요청을 수행하는 네트워킹 파트
UI Backend
체크박스나 버튼과 같은 기본적인 위젯을 그려주는 UI 백엔드 파트
Javascript Interpreter
자바스크립트 코드를 실행하는 인터프리터(V8)
Data Persistence
localStorage나 Cookie와 같이 보조 기억장치에 데이터를 저장하는 파트
렌더링
HTML, CSS, JS, 이미지 등 웹 페이지에 포함된 모든 요소를 화면에 보여준다
업데이트가 필요할 때, 효율적으로 렌더링을 할 수 있도록 자료구조를 생성한다
Critical Rendering Path
1. DOM Tree 생성, CSSOM Tree 생성
html 파일은 파싱되며 토큰화, 렉싱 과정을 통해 노드 객체(HTML Element, Attribute, Text, comment)로 변환 및 DOM 트리 생성
css 파일도 CSSOM Tree를 생성
2. Render Tree 생성
Render Tree는 스타일을 해당 요소 노드에 추가하며 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리
3. Render Tree 배치(Layout, reflow)
스타일 속성이 계산, 상대값 뷰포트에 맞춰 픽셀로 변환
4. Render Tree 그리기(Repaint)
렌더 트리에 포함된 요소들이 그려짐
처음 렌더링된 후, JS로 인해 UI가 업데이트된다면?
다시 Layout이 발생하는 경우
주로 요소의 크기나 위치가 바뀔 때, 혹은 브라우저 창의 크기가 바뀌었을 때 다시 발생
Paint부터 다시 발생되는 경우
주로 배경 이미지나 텍스트 색상, 그림자 등 레이아웃의 수치를 변화시키지 않는 스타일의 변경이 일어났을 때 발생
레이어의 합성만 다시 발생하는 경우
Layout과 Paint를 수행하지 않고 레이어의 합성만 발생하기 때문에 성능상으로 가장 큰 이점을 가짐
개발자도구의 perfomance, paint flash를 통해 성능 확인 가능
csstriggers.com
Reference
https://youtu.be/sJ14cWjrNis?si=glEUh6JUvbmIZTaO