FOUC란
CSS의 스타일이 모두 적용되지 못한 상태에서 화면이 표시되어 발생하는 화면 깜박임과 스타일의 적용 전 모습이 그대로 화면에 보여지는 현상을 말한다.
이게 왜 발생하는거야...
이것의 원인은 보통 브라우저 동작 방식과 관련되어있다.
특히 IE에서 많이 발생했었다.
해결법
- FOUC를 최소화하기 위해서는 기본적으로 <head> 요소안에 CSS를 링크하고, @import의 사용을 자제해야 한다.
- 자바스크립트의 선언순서, 위치를 변경함으로써 극복 가능하거나, 매우 짧아질 수 있다.
- critical css 추출
고등학생 주니어 개발자