CSS는 구문 분석 및 렌더링을 차단합니까? 자세한 분석

CSS 웹 페이지 성능 최적화에서 로딩, 분석 및 응용 프로그램 : 주요 테마 CSS의 로딩, 분석 및 적용은 웹 성능 최적화의 주요 링크입니다. 이 프로세스를 이해하는 것은 페이지로드 시간을 최적화하고 사용자 경험을 향상시키는 데 필수적입니다. 다음은 CSS의 분석 및 렌더링을 탐색하여 DOM을 차단하고 그 뒤에있는 메커니즘을 탐색합니다.

CSS로드 및 DOM 파싱 dom parsing HTML 문서 분석 중에 파서가 비 블로킹 리소스 (예 : 비동기 스크립트)를 만나면 리소스 병렬을 다운로드하고 동시에 문서를 계속 구문 분석하려고합니다.

CSS는 DOM 분석을 차단합니까?

CSS 자체는 DOM 분석을 차단하지 않습니다. 다시 말해, 브라우저는 HTML을 계속 분석하고 DOM 트리를 구축합니다.

그러나 CSS는 DOM 렌더링과 JavaScript의 실행을 차단합니다. 이는 DOM 트리를 구성 할 수 있지만 브라우저는 관련 CSS (즉, CSSOM 트리)를 분석하기 전에 렌더링 작업을 수행하지 않습니다. 이는 재조정 및 재 형성을 피하기 위해 화면에 페이지가 올바르게 표시되도록하기위한 것입니다.

브라우저가 HTML을 분석하여 DOM 트리를 생성 할 때 CSS 파일을 병렬로 다운로드하고 CSSOM (CSS 객체 모델)을 빌드하기 시작합니다. DOM 및 CSSOM의 구성은 동시에 발생하므로 CSS의 다운로드 및 분석은 DOM의 구성을 차단하지 않을 것입니다.

CSSOM 트리 및 렌더링
• CSSOM 트리
CSSOM (CSS 객체 모델)은 DOM과 평행하고 페이지에 모든 CSS 정보를 포함하는 데이터 구조입니다. 브라우저는 렌더링 트리를 만드는 데 사용합니다.
• 브라우저에서 태그 또는 태그가 발생하면 렌더링을 중지하고 CSS로드 및 구문 분석 우선 순위를 정하고 CSSOM 트리를 만듭니다.

렌더링 트리의 구성

렌더링 트리는 DOM 트리와 CSSOM 트리의 조합의 결과이므로 브라우저가 렌더링됩니다.

CSSOM 트리가 완성되기 전에 렌더링 트리에는 모든 DOM 요소의 스타일 정보가 필요하기 때문에 렌더링 트리를 구성 할 수 없습니다.
이 과정은 차트로 표시 될 수 있습니다 :
CSS는 왜 블록 JavaScript를로드합니까?
정확한 스타일 계산을 확인하십시오
: javaScript가 DOM을 수정하거나 CSS가 완전히로드되고 구문 분석되지 않을 때 스타일을 계산하려면 JavaScript가 검색 한 스타일 정보가 부정확 할 수 있습니다. 이를 피하기 위해 브라우저는 JavaScript를 실행하기 전에 모든 관련 CS가로드 및 분석되도록하여 DOM 요소의 최종 스타일의 스크립트를 검색하도록합니다.
1. 를 다시 피하십시오. : CSSOM이 불완전한 경우 JavaScript가 실행되면 불완전한 스타일 정보를 기반으로 DOM을 수정할 수 있습니다. CSSOM이 완료되면 브라우저는 렌더링 된 요소를 회복하고 다시 그리기하여 렌더링 효율을 크게 줄여야 할 수도 있습니다.
분석 순서 에 대한 의존성 : HTML 구문 분석 중에 브라우저가
2. 태그에 직면하면 즉시 CSS로드를 시작합니다. 태그 (no 또는 속성)가 발생하면 스크립트를 실행하기 위해 DOM 파싱을 중단합니다. CSS가 완전히로드되지 않으면 스크립트 실행은 불완전한 스타일 정보에 따라 다를 수 있습니다. 따라서 CSSOM이 준비되기 전에 브라우저가 스크립트를 기다리고 있습니다.
3. JavaScript로 CSS를 쓰는 것이 DOM 렌더링을 차단합니까? JavaScript에서 CSS 스타일을 작성하는지 여부는 응용 프로그램 방법과 스타일의 시간에 따라 DOM 렌더링을 차단합니다. 여기에는 브라우저의 렌더링 프로세스, 특히 JavaScript, CSS 및 DOM 간의 관계가 포함됩니다. 자세히 논의합시다 : 요소 스타일을 직접 수정하십시오 CSS 스타일이 JavaScript에서 DOM 요소의 <link href="..." rel="stylesheet"></link> 속성을 ​​수정하여 직접 적용되는 경우 (예 : ), 이러한 작업은 일반적으로 DOM 분석을 차단하지 않습니다. 그러나 브라우저는 스타일을 다시 계산하고 복원 및 재 형성을 트리거해야하기 때문에 렌더링 프로세스를 차단할 수 있습니다. <script> 레스토랑 async : 요소의 크기, 구조 또는 특정 속성이 발생하면 브라우저는 위치와 크기를 다시 계산해야합니다. defer Draw : 요소의 시각적 모양이 색상 또는 테두리와 같은 크기 또는 구조에 영향을 미치지 않으면 브라우저가 요소를 다시 도장하도록 표시합니다.
동적 삽입 또는

레이블 javaScript가 또는

태그를 동적으로 에 추가하면 렌더링에 영향을 미칩니다.

렌더링 블록 : 브라우저는 새로 삽입 된 CSS 규칙을 계속 렌더링하기 전에 구문 분석하려면 브라우저를 중단해야합니다. 특히 CSS 파일이 크거나 네트워크 조건이 좋지 않은 경우 심각한 렌더링 지연이 발생할 수 있습니다. 성능 영향 태그를 삽입하는 것과 같은 반복 작동은 중복 재배치 및 재 형성으로 이어질 수 있으며, 이는 페이지의 성능에 심각한 영향을 미칩니다. JavaScript의 CSS는 특히 동적 생성 및 애플리케이션 스타일 일 때 DOM 렌더링을 제대로 방해하거나 지연시키지 않습니다.
• 결론 CSS 로딩이 DOM 분석을 차단하지는 않지만 DOM 렌더링을 차단합니다. CSS 로딩은 또한 다음 -up javaScript의 다음 -up을 차단합니다.

  우리는 leapcell입니다. 호스트 node.js 프로젝트가 첫 번째 선택입니다. <style>

leapcell은 웹 양육권, 비동기 작업 및 서버 플랫폼이없는 Redis의 차세대에 사용됩니다. 다중 -언어지지

<.> 개발을 위해 Node.js, Python, Go 또는 Rust를 사용하십시오.

무제한 프로젝트의 무료 배포

당신은 사용 수수료를 지불하면 필요하지 않습니다.

---

비교할 수없는 비용 혜택

사용에 따라 지불되면 유휴 비용이 없습니다.

예를 들어 $ 25는 평균 응답 시간이 60 밀리 초의 6,940 만 요청을 지원합니다.

단순화 된 개발자 경험

직관적 인 UI, 쉬운 설정.

전체 자동 CI/CD 파이프 라인 및 GITOPS 통합.

실시간 표시기 및 로그 레코드는 운영 통찰력을 제공합니다.
쉬운 확장 및 고성능

자동 확장은 높고 합병을 쉽게 처리 할 수 ​​있습니다. 제로 작동 비용 -건축에 중점을 둡니다.

문서에서 더 많은 정보를 알아보십시오!
<:> x : @leapcellhq 를 따르십시오

블로그를 읽으십시오

위 내용은 CSS는 구문 분석 및 렌더링을 차단합니까? 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!