반응형 웹개발2 [웹개발] CSS 2025. 4. 2. [웹개발] Rendering 렌더링 과정1) HTML을 파싱해서 DOM 트리 구축- HTML은 부분적으로 실행2) CSS을 파싱해서 CSSOM 트리 구축- CSS는 렌더링 차단 리소스로 간주3) JavaScript 실행- JavaScript는 파서 차단 리소스(JavaScript에 의해 HTML 구문 분석 차단)- async로 비동기 로드하여 파서 차단 방지4) DOM과 CSSOM을 통합해서 Render 트리 구성- display:none을 사용한 숨겨진 요소는 포함하지 않음5) Redner 트리 기반으로 Layout 생성- 뷰포트의 크기 결정6) Screen에 Painting- 가시적인 내용을 픽셀로 표시- DOM의 크기와 적용되는 스타일에 따라 처리 시간이 다름7) Cirtical Rendering Path 과정 확인- DevT.. 2025. 3. 30. 이전 1 다음 반응형