Skip to Content
Suffering builds character
아카이브5.Browser브라우저 렌더링개요5. Render blocking이 필요한 이유

5. Render blocking이 필요한 이유

CSS 리소스가 렌더링을 차단하는 리소스(Render-blocking)로 동작하는 이유는 무엇일까?

정답

렌더링을 차단하는 리소스인 CSS는 CSSOM이 구성될 때까지 브라우저의 렌더링을 차단시키는데, 이를 통해 화면 깜빡임 현상을(FOUC)를 방지 할 수 있기 때문

FOUC(Flash of Unstyled Content)
CSS가 네트워크를 통해 다운로드가 완료되고 난 후에 스타일이 뒤늦게 적용되면서, 스타일이 적용되지 않았던 페이지가 스타일이 적용된 페이지로 갑자기 교체되는 과정에서 페이지가 일시적으로 깜빡거리는 현상
→ 사용자의 혼란 야기

fouc

Last updated on