HTML에는 preload라는 속성이 있습니다. 이를 통해 브라우저에 힌트를 제공할 수 있습니다. 어떻게 그리고 더 중요한 것은 언제 페이지가 로드될 때 자산을 로드합니다.
preload 속성은 여러 HTML 요소에서 사용할 수 있습니다. 예를 들어 <link>에 추가할 수 있습니다. 브라우저가 CSS 스타일시트에 대한 조기 가져오기를 시작하도록 하는 요소입니다.
안함 preload 사용 <link>의 속성 다음과 같이(일부 웹사이트 권장):
<link rel="preload" rel=stylesheet href="/css/styles.css" as="style">위의 코드는 스타일시트를 미리 로드하기만 하므로 적용되지 않습니다. 그것.
대신 스타일시트를 미리 로드하고 적용하려면(사전 로드되는 즉시) 인라인 JS onload를 사용할 수 있습니다. <link>의 이벤트 핸들러 요소:
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
JS onload 그러면 eventhandler는 링크 요소의 rel="preload"를 변경합니다. rel="stylesheet" 속성 로딩이 완료되는 즉시.
위의 구성에서 preload를 지원하는 브라우저는 속성을 사용하지 않은 경우보다 더 일찍 CSS 스타일시트 다운로드를 시작합니다.
브라우저 지원
preload 속성은 아직 Firefox에서 지원되지 않지만(이상하게도) 다른 모든 최신 브라우저에서 작동합니다. preload를 계속 사용할 수 있습니다. 속성이지만 Firefox에서 CSS를 미리 가져오지는 않습니다(정상적으로 로드됨).