HTML/CSS를 배운 후 처음으로 접했던 쿠팡레이아웃 클론 프로젝트이다. 화면이 처음 로드되는 동안 CSS스타일이 적용되지 전후가 깜박임으로 나타나게 되는 부분을 해결하지 못했었다.
FOUC란?
FOUC(Flash of Unstyled Content)는 브라우저로 웹문서에 접근했을때, 미처 CSS의 스타일이 모두 적용되지 못한 상태에서 화면이 표시되어 발생하는 화면 깜박임, 스타일의 적용 전과 적용 후가 그대로 화면에 노출된 상태로 변경되는 현상등을 일컫는다. 이 현상은 특히 IE(Internet Explorer) 브라우저에서 확인되는데 최신의 IE11에서도 여전히 발생되는 문제이다. 이는 해당 웹문서의 사용자 경험을 떨어뜨리는 요인으로 작용한다.
FOUC 발생 원인
FOUC가 발생하는 원인은 바로 브라우저의 동작방식과 연관이 있다.
브라우저는 HTML, CSS, JS순서로 받게 되는데, 여기서 CSS적용이 되지 않은 상태에서 보여지기 때문에 문제가 발생하게 된다.
문제가 발생한 프로젝트의 경우 sass의 7-1 패턴(7개의 style 폴더를 1개의 파일에 적용)을 적용한 후 JS파일에 import시킨 프로젝트이었다. 이와 같이 여러개의 css를 참조하고 DOM구조를 변경하는 과정에서 더욱 빈번하게 발생을 할 수 있다고 한다.
FOUC 해결방법
- FOUC를 최소화하기 위해서는 기본적으로
<head>요소안에 CSS를 링크하고, @import의 사용을 자제해야 한다. - 자바스크립트의 선언순서, 위치를 변경함으로써 극복 가능하거나, 매우 짧아질 수 있다.(성능을 위해
</body>요소 앞에 자바스크립트를 위치시키곤 하는데 이를<head>안으로 위치를 변경해 본다.) - FOUC를 유발하는 구역을 숨겼다가 문서의 스타일이나 스크립트가 모두 적용되면 보여준다.
<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 값으로 fouc를 추가했다.
위와 같이 페이지 전체를 감싸는 영역을 지정하면 빈 페이지를 보여주다가 모든 리소스가 로드되면 페이지를 보여주게 된다.
참고
https://webdir.tistory.com/416
https://gamsunghacker.tistory.com/208
https://web.dev/fast/#
