[web] 렌더링 차단 CSS

아래의 글을 정리한 포스팅입니다. 

https://web.dev/articles/critical-rendering-path/render-blocking-css?hl=ko

렌더링 차단 CSS  |  Articles  |  web.dev

---

CSS는 렌더링 차단 리소스로 취급

그렇지 않으면 아래의 이미지처럼 보였다가 스타일이 입혀서 노출되어서 스타일이 적용되기 전까지 페이지를 정상적으로 이용할 수 없는 상황이 발생할 수 있음

그래서 불필요한 스타일은 제거하여 다운로드를 최대한 빠르게 해야 합니다.

 

렌더링 차단 리소스

렌더링 트리 생성 하려면 CSSOM과 DOM을 읽어들어야 합니다. CSSOM은 CSS를 읽습니다. CSS 관련 로직이 많으면 그만큼 더 오래걸립니다. 렌더링 트리 생성하는 동안 페이지에는 빈화면 (blank page)만 노출됩니다. 이를 렌더링 차단 리소스라고 불립니다.

 

 

CSS에서 렌더링을 차단하지 않고 일반 페이지를 렌더링하려고 하면?

media property를 사용하면 가능 (특정 경우에만 사용하도록)

 1. 인쇄 할 때 특정 스타일이 변할 수 있으니

 2. 페이지가 로드될 때 평가되는 동적 미디어 쿼리. 페이지가 로드되는 동안 기기의 방향에 따라 portrait.css가 렌더링 차단 여부 결정

 3. 화면 크기가 특정 조건 이상일 때

<link href="print.css" rel="stylesheet" media="print" />
<link href="portrait.css" rel="stylesheet" media="orientation:portrait" />
<link href="other.css" rel="stylesheet" media="(min-width: 40em)" />