Posts /

FOUC(Flash of Unstyled Content)

05 Apr 2017

FOUC란?

발생원인 분석

  1. 브라우저는 Markup에 참조된 모든 부수적인 파일들을 모아 즉시 DOM을 생성
  2. 가장 빠르게 분석할 수 있는 글의 내용 부분을 화면에 표시
  3. 화면에 표시된 내용을 선언된 마크업의 순서에 따라 스타일 적용하고 스크립트 실행

해결 방법

<html class="no-js">
    <head>
        <style>
            .js #fouc {display: none}
        </style> 
        <script>
            (function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)
        </script>
    </head>
    <body>
        <div id="fouc"> ... </div> <!-- /#fouc --> 
        <script> document.getElementById("fouc").style.display="block"; </script>
    </body>
</html>

<html>에 .no-js를 추가하고 <head>에 스타일과 자바스크립트를 추가한다.
해당 자바스크립트는 브라우저의 자바스크립트가 활성화 되어 있을 경우,
html 태그의 클래스를 .js로 변경한다. 그리고 숨겨질 구역에 ID 값으로 id="fouc"를 추가했다.
위와 같이 페이지 전체를 감싸는 영역을 지정하면 빈 페이지를 보여주다가 모든 리소스가 로드되면 페이지를 보여주게 된다.

IE에서는 웹폰트들에 대한 FOUC가 잦아 브라우저 스니핑으로 IE들을 골라내고 이에 대한 FOUC 처리를 하거나 숨겨질때 빈페이지를 보여주는 대신 로딩중이라는 표기나 이미지를 넣는 것도 방법이 될 수 있다.


Twitter Facebook Google+