웹 페이지 렌더링
- 브라우저가 HTML파일을 화면에 그려내는 과정
1. 파싱 : HTML파일을 DOM으로 변환 (파싱)
2. 스타일 계산 : CSS를 CSSOM으로 파싱
3. 레이아웃 : CSSOM 정보를 토대로 레이아웃 트리(렌더 트리)생성
4. 페인트 : 렌더트리가 생성되면 , 이 트리를 따라 페인트 기록 생성
(페인트 기록 ? 요소를 렌더링하는 순서 저장, 레이어를 나눠 시각적인 부분 그리는 작업 진행)
5. 컴포지팅 : 각 레이어를 스크린에 픽셀로 표현, 레이어들을 합성해 페이지를 그림
page reflow & repaint
- HTML 구조상의 변화, CSS의 변화가 있으면 reflow와 repaint 과정을 거치게 된다.
1. reflow
- 레이아웃 (너비 ,높이)등 변경 시 영향받는 모든 노드(자식,부모)의 수치를 다시 계산하여 렌더트리를 재생성 하는 작업
2. repaint
- reflow 과정이 끝나고 재생성된 렌더 트리를 다시 그리는 작업
- 수치와 상관없는 style변경시 repaint만 수행
Q. 만약 css를 통해 레이아웃이 바뀌는 애니메이션을 구현한다면 ? 👉 매 프레임마다 reflow -> repaint과정 수행해야한다. 👉 따라서 최적화를 위해 translate VS position 중 translate를 사용하자~ |
😀 최적화에 대해 자세히 알고싶다면 ?
https://mandelina-code.tistory.com/64
[JS] 최적화 (Optimization)
Javascript를 최적화를 위한 다양한 방법들을 알아보자! 성능 측정의 척도 - 올바르게 동작하게 만든다 👉 메모리, 네트워크 트래픽과 같은 자원과 연관 - 빠르게 동작하게 만든다. 👉 시간과
mandelina-code.tistory.com
'FE' 카테고리의 다른 글
| [Electron] 일렉트론이란? (0) | 2022.11.14 |
|---|---|
| 리액트를 사용해보고 느낀점과 Next.js vs Gatsby 알아보기 (2) | 2022.08.04 |
| [디자인패턴] 아토믹패턴이란? (2) | 2022.07.04 |
| SSR , CSR이 무엇일까 ? (0) | 2022.06.22 |
| [JS] 최적화 (Optimization) (0) | 2022.05.19 |