1. 브라우저는 대상 HTML 파일을 구문 분석하기 시작하며 실행 흐름의 순서는 하향식입니다. 2. HTML 파서는 HTML 구조를 기본 DOM(Document Object Model)으로 변환합니다. DOM 트리가 구축되면 DomContendLoaded 이벤트가 트리거됩니다. 3. CSS 파서는 CSS를 스타일 정보만 포함하는 트리인 CSSOM(Cascading Style Sheet Object Model)으로 구문 분석합니다. 4. CSSOM과 DOM이 병합되어 렌더링 트리를 형성하기 시작하고 각 노드에는 특정 스타일 정보가 포함되기 시작합니다. 5. 레이아웃 단계인 렌더링 트리에서 각 노드의 위치 정보를 계산합니다. 6. 인터페이스에 배치된 렌더링 트리를 표시합니다.
1. 브라우저는 대상 HTML 파일을 구문 분석하기 시작하며 실행 흐름의 순서는 하향식입니다.
2. HTML 파서는 HTML 구조를 기본 DOM(Document Object Model)으로 변환합니다. DOM 트리가 구축되면 DomContendLoaded 이벤트가 트리거됩니다.
3. CSS 파서는 CSS를 스타일 정보만 포함하는 트리인 CSSOM(Cascading Style Sheet Object Model)으로 구문 분석합니다.
4. CSSOM과 DOM이 병합되어 렌더링 트리를 형성하기 시작하고 각 노드에는 특정 스타일 정보가 포함되기 시작합니다.
5. 레이아웃 단계인 렌더링 트리에서 각 노드의 위치 정보를 계산합니다.
6. 인터페이스에 배치된 렌더링 트리를 표시합니다.
domcontentloaded
자체는 HTML 태그 로드 및 구문 분석이 완료되면 스타일 시트를 기다릴 필요가 없음을 의미합니다.링크 방식은 웹페이지 로딩과 동시에 CSS도 로딩합니다
DOMContentLoaded 이벤트는 스타일시트, 이미지 및 하위 프레임이 완전히 로드될 때까지 기다리지 않고 초기 HTML 문서 로드 및 구문 분석이 완료되면 시작됩니다.
참조: https://developer.mozilla.org...
우선
css
下载不会阻塞网页渲染,一个网页由html
和资源资源组成,其他资源的下载不会影响到html
파일 자체의 다운로드가 동시입니다.DOM과 CSSOM은 독립적인 데이터 구조입니다.
참조: https://developers.google.com...