최근에 저는 프론트 엔드의 성능 최적화를 배우고 있습니다. 올바른 약을 처방하고 성능의 병목 현상을 찾기 위해 페이지의 렌더링 프로세스를 이해해야합니다. 다음은 내가 본 것들이며, 나는 당신과 공유 할 것입니다.
참조 : 렌더러 이해
페이지 렌더링에는 다음과 같은 특성이 있습니다 .• 단일 스레드 이벤트 폴링
• 명확하게 정의되고 연속적이며 질서 정연한 작동 (HTML5)
• 돔 나무를 파티션 및 건축
• 리소스를 요청하고 예압
• 렌더링 트리를 만들고 페이지를 그립니다
구체적으로 :네트워크에서 HTML의 해당 바이트를 얻으면 DOM 트리가 구축되기 시작합니다. UI를 업데이트하는 스레드는 브라우저를 담당합니다. 돔 트리의 빌드는 다음과 같이 차단됩니다.
• HTML 응답 스트림은 네트워크에서 차단됩니다
• 언로드 스크립트가 있습니다
• 스크립트 노드가 발생했지만 현재는 여전히 언로드 스타일 파일이있었습니다.
렌더링 트리는 DOM 트리에서 제작되었으며 스타일 파일로 차단됩니다.
단일 스레드 이벤트 폴링을 기반으로하기 때문에 스크립트와 스타일의 차단이 없더라도 이러한 스크립트 또는 스타일을 구문 분석, 실행 및 적용 할 때 페이지의 렌더링이 차단됩니다.
페이지 렌더링이 차단되지 않는 경우 :• 정의 된 지연 속성 및 비동기 속성
• 미디어 유형이 일치하지 않는 스타일 파일
• 파서를 통해 스크립트 노드 또는 스타일 노드가 삽입되지 않습니다.
여기에서 예제 (전체 코드)와 함께 이것을 설명해 봅시다 .코드를 복사하십시오