1. CSS는 구조 위에 배치되어야 합니다(일반적으로 헤드 요소 내에 배치됩니다). CSS는 해석된 언어이며 Firefox와 IE는 CSS 전송이 완료될 때까지 아무것도 렌더링하지 않습니다. CSS를 추가해야만 브라우저가 구조를 구문 분석할 때 페이지가 렌더링될 수 있습니다.
예제 소스 코드:
이로 인해 빈 흰색 화면 문제가 발생합니다. 이 페이지의 경우 하단의 스타일시트가 다운로드될 때까지 페이지가 완전히 비어 있습니다. 브라우저는 다른 항목을 렌더링하기 전에 스타일시트가 로드될 때까지 기다립니다. 페이지, 심지어 정적 텍스트까지.
그 결과로 발생하는 문제는 페이지가 잠시 동안 "단순"하다가 갑자기 다시 "멋지게" 되어 매우 열악한 사용자 경험을 초래한다는 것입니다.
2. 스타일 가져오기 방법을 사용하고 @import 사용을 줄이세요. 여러 수준의 중첩된 @import를 사용하세요. IE에서는 @import가 페이지 끝에 를 배치하는 것과 동일하기 때문입니다.
예제 소스 코드
이것은 유효한 구문이지만 문서의 HEAD에 있더라도 프로그레시브 렌더링이 중단되고 대신 빈 흰색 화면과 스타일 없음 플래시가 발생합니다.