FOUC

FOUC(Flash Of Unstyled Content)는 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다. 이 현상은 스타일이 적용되지 않은 웹 페이지가 스타일이 적용된 웹 페이지로 변화하는 것이다. 웹 브라우저가 웹 페이지에 스타일 정의를 부르고 적용할 때 보여지는 부분을 최대한 빨리 수정하지만, 이 변화는 짧지 않은 시간 동안 나타나므로 사용자는 페이지에 오류가 있다는 생각을 하게된다.

FOUC는 CSS와 HTML의 버전 변화와는 관계가 없으며, 이것은 브라우저의 문제로 보인다. 하지만 이 문제는 브라우저에서 큰 문제가 아닌 것으로 보이는데, 브라우저 내에 프로그램된 우선 사항들이 페이지를 보여줄 때 아래와 같은 방식으로 처리하기 때문이다.

브라우저는 웹 페이지의 마크업에서 참조된 모든 부수적인 파일들을 모아 그 즉시 DOM을 빌드한다. 브라우저는 처음으로 표시할 가장 빠르게 분석할 수 있는, 즉 글의 내용을 골라 먼저 화면에 표시한다. 화면에 표시된 내용에 마크업의 순서에 따라 스타일을 적용하고 스크립트를 실행한다.

최근의 웹 페이지들은 아래와 같은 방법으로 여러 개의 스타일 시트를 참조하는 경향이 있으므로 FOUC는 더 일반적이고 더 빈번하게 관찰된다.

  • 웹 페이지들은 종종 프린터와 무선 장치를 위한 CSS 규칙으로 브라우저 화면 이외의 다른 미디어에 대한 스타일 참조를 포함한다.
  • 웹 페이지는 @import로 스타일 파일을 가져오고, 다른 CSS를 참조할 수 있다.
  • 온라인 광고와 동영상과 검색 엔진같은 다른 곳에서 삽입된 콘텐츠는 종종 코드 블록 내에서 자신의 스타일 규칙을 구술한다.

CSS 규칙의 종속적인 성격은 일부 브라우저에서 모든 스타일 데이터를 적용하기 전에 필요한 내용들이 수집될 때 까지 기다리기를 권장한다. 스타일이 적용되지 않은 내용이 보이는 것을 방지하기 위해, 개발자는 전체가 로드될 때 까지 모든 내용을 숨길 수 있지만 이벤트 핸들러가 실행되고 콘텐츠가 표시되기 전에 종종 마찬가지로 산만한 빈 페이지가 나타날 수 있다.

다음과 같은 코드로 해결해 볼 수 있다. html의 head 부분에 넣는다. Paul Irish's solution

<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>