😐Critical Rendering Path란?
MDN의 정의에 따르면 Critical Rendring Path는 브라우저가 HTML, CSS , JavaScript를 화면의 픽셀로 변환하기 위해 거치는 일련의 단계를 뜻합니다.
이 Critical Rendering Path를 최적화하면 렌더링 성능이 향상됩니다.
또한 Critical Rendering Path에 해당되는 것으로는
DOM , CSSOM, 렌더링트리, 레이아웃이 있습니다.
😑DOM??
Document Object Model의 줄임말로 HTML이 파싱될때 생성됩니다.
HTML은 JavaScript를 요청할 수 있고 JavaScript는 차례로 DOM을 변경할 수 있습니다.
🤣Critical Rendering Path에 대한 이해
웹의 성능을 구성하는 요소로는
서버 요청 및 응답
로드
스크립팅
렌더링
픽셀페인팅
이 포함될 수 있습니다.
CRP의 이해를 위해 브라우저에 우리의 화면이 그려지는 일련의 과정을 생각해보면 다음과 같습니다.
1. 웹페이지 또는 앱에 대한 요청은 HTML 파일을 요청하는 것으로부터 시작합니다.
2. 서버는 HTML파일을 반환합니다.
3. 브라우저는 HTML 파일을 구문분석하며 이를 기반으로 DOM트리를 구성합니다.
4. 이때 브라우저는 구문분석과정에서 스타일시트, 스크립트, 이미지 참조와 같이 외부 리소스에 대한 링크를 찾게되면 이에대한 요청을 시작합니다.
5. 4번 과정에서 리소스의 처리가 완료될 때 까지 HTML 파싱은 블로킹됩니다.
6. 5번까지의 과정을 거치며 DOM을 완성하면 CSSOM을 구축합니다.
7. DOM 및 CSSOM이 완성되면 이를 기반으로 렌더트리를 구축합니다.
8. 7번 과정에서 표시되는 콘텐츠의 스타일을 계산합니다.
9. 렌더트리가 완성되면 레이아웃이 발생하여 모든 렌더 트리 요소의 위치와 크기를 정의합니다.
🤗결론
이거 브라우저 렌더링 과정아닌가..?
ㅎㅎ;;
🤤레퍼런스
https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path
Critical rendering path - Web performance | MDN
The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Docu
developer.mozilla.org
https://beomy.github.io/tech/browser/critical-rendering-path/
[Browser] Critical Rendering Path 최적화
브라우저 렌더링 최적화 방법에 대해 이야기할 것입니다.
beomy.github.io
'frontend' 카테고리의 다른 글
| CloudFlare를 이용해 Next.js 프로젝트 Static하게 배포하기 (2) | 2023.06.27 |
|---|---|
| next.js를 활용해 자체 블로그 만들기 (4) | 2023.06.25 |
| webpack proxy 설정 에러 해결방법.. (0) | 2023.06.07 |
| Github Action으로 S3 배포 자동화하기 (0) | 2023.06.05 |
| AWS EC2에서 git ssh key 생성하고 사용하기.. (0) | 2023.06.04 |
