Critical Rendering Path의 내용 추가
https://velog.io/@jiseong/Critical-Rendering-Path
렌더링 성능 최적화하는 방법 중에서 외부 리소스들의 로딩 순서 및 갯수 등에 대해서도 관련이 있었고 공부를 하면서 알아낸 내용들에 대해 기존의 게시글에 추가하였다.
-
render blocking & Parser blocking
-
Reflow & Repaint
유용한 글
크롬 개발자도구 사용에 대한 설명들과 이를 활용하여 최적화에 대한 시각화 등을 제공
https://ui.toast.com/fe-guide/ko_PERFORMANCE
아직도 의문인점
- inline, head태그내의 style는 HTML 파싱을 블록시키는게 맞는지?
HTML에 스타일을 적용하는 방법에는 크게 3가지
inline, head태그내의 style, external방식이 존재하며
브라우저의 로딩과정중에 HTML 구문 해석기가 inline, head태그내의 style를 발견하게 되면 잠시 멈추고 해당 css구문을 분석 후 규칙을 이용해서 CSSOM 트리를 한번만 업데이트 후에 다시 HTML 구문 해석기가 진행되는걸로 알고 있습니다. 그러면 제가 이해한 내용으로는 inline, head태그내의 style은 HTML 파싱을 블록시키는걸로 이해했는데 맞게 이해한건가요?
- DOM Tree와 CSSOM Tree 구성은 동시에 진행되는건지?
많은 글에서 DOM 트리를 구성하는 단계에서 리소스에 CSS가 포함된 경우에는 CSSOM 트리 구성 작업도 함께 진행된다고 했는데 그러면 external방식(link)의 css는 메인 쓰레드가 아닌 백그라운드에서 해당 리소스를 다운을 다 받고나면 DOM 트리를 구성하는 중에 1번과는 다르게 CSSOM 트리를 구성하기 위해 멈추지 않고 동시에 진행되는건지 궁금합니다.
(리소스는 외부로 부터 받아오는 개념으로 이해하고 external방식으로 css 리소스를 가져오는 경우로 이해했습니다.)
