👀 브라우저 렌더링 과정
1. DOM 생성
DOM
- Document Object Model
- 웹 브라우저와 자바스크립트가 HTML을 이해하기 쉽도록 트리 구조로 파싱하여 만든 객체
- HTML 파일을 다운로드한 뒤 HTML parser가 구문 분석과정을 거쳐 DOM 트리를 생성한다.
2. CSSOM 생성
CSSOM
- DOM에 CSS가 적용된 객체 모델
- CSS 파일을 다운로드 한뒤 DOM에 입힌다.
3. Render Tree 생성
Render Tree
- DOM + CSSOM
- 화면에 보여지지 않는 속성은 탈락된다. ex> display: none
4. Layout
- Render 트리를 기반으로 DOM 객체가 어디에 위치하는지 결정한다.
- 새로운 위치에 나타나게 하는 동작이 일어날 때마다 반복해서 실행한다.
5. Paint
- 실제로 화면에 그린다.
- 픽셀 단위로 색을 입힌다.
- 스타일이 복잡할 수록 시간이 오래 걸린다.
6. 자바스크립트 실행
- 자바스크립트 파일을 다운로드 하여 실행한다.
😎 최적화 방법
1. 웹페이지 로드 최적화
- 자바스크립트를 부르는 것을 body 하단에서
- 불필요한 코드 제거, 간결한 셀렉터 사용으로 리소스를 줄인다.
2. 웹페이지 렌더링 최적화
- html 최적화
- dom이 작고 깊이가 얕게 불필요한 속성은 제거한다.
- css 최적화
- css가 복잡하고 많을수록 스타일 계산과 레이아웃이 오래 걸린다.
- cssom이 복잡하지 않도록 복잡한 선택자는 피한다.
- javascript 최적화
- 자바스크립트 실행 시간을 줄인다.
- 코드 복잡하지 않게 한다.
🔖 최적화 항목
1. FCP (First Contentful Paint)
페이지가 로드되기 시작한 시점부터 처음으로 컨텐츠가 보이기 시작한 시점까지의 시간
2. LCP (Largest Contentful Paint)
페이지가 로드되기 시작한 시점부터 가장 큰 컨텐츠가 렌더링 될 때까지의 시간
3. TTI (Time to Interactive)
마지막 Long-Task(자바스크립트)가 끝이 날 때까지 걸린 시간
4. TBT (Total Blocking Time)
FCP와 TTI 사이에서 메인 쓰레드가 차단된 총 시간
5. SI (Speed Index)
페이지의 콘텐츠가 채워지는 속도
6. CLS (Cumulative Layout Shift)
레이아웃 변화에 점수를 매겨서 측정
참고
https://velog.io/@bumsu0211/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95%EA%B3%BC-%EC%B5%9C%EC%A0%81%ED%99%94#1-fcp-first-contentful-paint
https://velog.io/@kmlee95/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5%EC%B5%9C%EC%A0%81%ED%99%94
https://velog.io/@kmlee95/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%8F%99%EC%9E%91%EA%B3%BC%EC%A0%95%EB%B6%80%ED%84%B0-React
개발자