▶ FOUC 란 무엇인가?
FOUC(Flash of Unstyled Content)는 브라우저로 웹문서에 접근했을때, 미처 CSS의 스타일이 모두 적용되지 못한 상태에서 화면이 표시되어 발생하는 화면 깜박임, 스타일의 적용 전과 적용 후가 그대로 화면에 노출된 상태로 변경되는 현상등을 일컫는다. 이 현상은 특히 IE(Internet Explorer) 브라우저에서 확인되는데 최신의 IE11에서도 여전히 발생되는 문제이다. 이는 해당 웹문서의 사용자 경험을 떨어뜨리는 요인으로 작용한다.
▶ FOUC 원인
FOUC가 발생하는 주된 원인은 브라우저의 동작 방식과 연관이 있다.
1. 브라우저는 마크업에 참조된 모든 부수적인 파일들을 모아 즉시 DOM(Document Object Model)을 생성
2. 가장 빠르게 분석할 수 있는 글의 내용부분을 화면에 표시
3. 화면에 표시된 내용을 선언된 마크업의 순서에 따라 스타일을 적용하고 스크립트를 실행
최근의 웹문서들은 여러 개의 CSS 파일을 참조하고 DOM 구조를 변경하므로 이는 더욱 빈번하게 발생하고 있다.
- 웹문서들은 종종 프린터와 무선 장치를 위한 CSS 규칙으로 브라우저 화면 이외의 다른 미디어에 대한 스타일 참조를 포함한다.
- 웹문서는 @import로 스타일 파일을 가져오고, 다른 CSS를 참조할 수 있다.
- 온라인 광고와 동영상과 검색 엔진같은 다른 곳에서 삽입된 콘텐츠는 종종 코드 블록 내에서 자신의 스타일 규칙을 구술한다.
- 웹 문서가 모두 불러와진 후 자바스크립트를 이용해 DOM 구조를 변경한다.
무엇보다도 최근에 많이 사용되고 있는 웹폰트의 경우에도 IE 브라우저에서는 FOUC를 유발해 매우 산만하고 아름답지 못한 경험을 선사한다.
▶ FOUC ( 화면 깜빡임) 해결법
- FOUC를 최소화하기 위해서는 기본적으로 <head> 요소안에 CSS를 링크하고, @import의 사용을 자제해야 한다.
- 자바스크립트의 선언순서, 위치를 변경함으로써 극복 가능하거나, 매우 짧아질 수 있다.(성능을 위해 요소 앞에 자바스크립트를 위치시키곤 하는데 이를 안으로 위치를 변경해 본다.)
- FOUC를 유발하는 구역을 숨겼다가 문서의 스타일이나 스크립트가 모두 적용되면 보여준다.
FOUC를 유발하는 구역을 숨겼다가 다시 보여주는 방법을 아래에서 설명한다.
1. html 전체부분을 감싸는 태그하나를 만든다.
2. 스타일 추가
3. 자바스크립트 추가
<style> #no-js {display: none} </style>
<body> <div id="no-js”> ... </div>
<script> document.getElementById("no-js").style.display="block"; </script>[ 참고사이트 ]
https://webdir.tistory.com/416
댓글