FOUC는 Flash of Unstyled Content의 약자로 웹브라우저가 웹 페이지를 로딩할 때 일시적으로 외부의 CSS stylesheet이 적용되지 않는 컨텐트를 로딩하여 화면에 출력하는 현상을 의마하는 말입니다.
원인: 이 현상은 브라우저마다 틀리지만 보통 아주 짧게 진행되며 이 현상이 생기는 이유는 웹브라우저가 컨텐트를 로딩할 때 한 번에 모든 컨텐트와 관련 화일을 로딩하여 출력하는 것이 아니라 우선 순위의 컨텐트를 먼저 로딩하기 때문에 (그리고 로딩이 다 끝나기 전에 화면에 출력이 되기 때문에) 발생합니다.
해결방법: HTML 파일의 Body tag에 'unresolved'라는 pseudo class를 포함하면 이런 현상이 생기는 것을 방지할 수 있습니다.
<body unresolved>
Sources:
http://en.wikipedia.org/wiki/Flash_of_unstyled_content
http://www.polymer-project.org/docs/polymer/styling.html#fouc-prevention
http://ko.wikipedia.org/wiki/FOUC
No comments:
Post a Comment