-
css aysnc load개발/etc 2018. 11. 9. 17:35
어느날 웹페이지로딩이 느려 확인해해보니까 css 로드될때까지 화면이 로딩이 되지않는다. 찾아보니 다음과 같은 이유가 있다.
FOUC
해결
우선순위를 지정하는 방식이지만 rel 옵션이 preload 로 변경되면서 페이지 렌더링 차단이 해제 되고 로딩이 완료 되면서 다시 stylesheet 로 변환되면서 FOUC 를 발생시킨다.
다음과 같이 구현시 현재버전(69.0.3497.100) 크롬에서 정상 동작하지만 파이어폭스 에서는 동작하지않는다.preload 구현 을 참조해 preload 옵션을 주었고, loadCSS 를 사용함으로써 크롬 이외에 브라우저에서도 지원되는걸로 보인다.
'개발 > etc' 카테고리의 다른 글
MongoDB 를 docker로 세팅해보자 (0) 2018.11.09 tcpdump 와 wireshark 를 이용해 디버깅 하기 (0) 2018.11.09 puppeteer the Node.js process with a non-zero exit code (0) 2017.11.02 jrebel 비상업용 SNS 인증받기 (0) 2015.10.26 구글 로그인 api 연결하기 (0) 2015.10.26