HTML5 미리 로드를 사용하면 페이지를 빠르게 렌더링할 수 있습니다_html5 튜토리얼 팁

브라우저 제조업체와 개발자가 협력하는 한 가지 방향은 웹 사이트를 더 빠르게 만드는 것입니다. CSS 스프라이트(CSS 스프라이트, 퍼즐) 및 이미지 최적화, 분산 구성 파일(.htaccess), JS/텍스트 파일 압축, CDN 가속 등 잘 알려진 가속 솔루션이 많이 있습니다.

다른 블로그 게시물에서 웹사이트 속도를 높이는 방법을 소개했습니다.
FireFox는 새로운 웹사이트 가속화 전략인 링크 사전 로딩을 도입합니다. 링크 사전 로딩이란 무엇입니까? MDN은 이를 다음과 같이 설명합니다.

미리 로드는 브라우저 유휴 시간을 사용하여 사용자가 다음에 탐색할 가능성이 있는 페이지/리소스를 미리 다운로드/로드하는 브라우저 메커니즘입니다. 이 페이지는 미리 로드해야 하는 컬렉션을 브라우저에 제공합니다. 브라우저가 현재 페이지 로드를 완료한 후 백그라운드에서 미리 로드해야 하는 페이지를 다운로드하여 캐시에 추가합니다. 사용자가 미리 로드된 링크에 액세스할 때 캐시에서 적중되면 페이지가 빠르게 렌더링됩니다.

간단한 개요: 사용자 분석을 바탕으로 웹사이트에서는 브라우저가 백그라운드에서 지정된 페이지/문서/이미지를 다운로드할 수 있습니다. 구현이 매우 쉽습니다.

HTML5 사전 로드 태그.

코드 복사

코드는 다음과 같습니다.

위의 HTML 코드에서 볼 수 있듯이 사전 로드는 태그를 사용하고 rel="prefetch" 속성을 지정하며 href 속성은 미리 로드해야 하는 파일 경로입니다. Mozilla는 몇 가지 유사한 링크 관련 속성도 구현했습니다.

코드 복사

코드는 다음과 같습니다.

참고: https 프로토콜도 지원됩니다.

사전 로드 시기
웹사이트에서 사전 로드를 사용할지 여부는 필요에 따라 다르며 다음은 몇 가지 제안 사항입니다.
- 일련의 페이지 슬라이드가 동일하게 표시되는 경우
- 웹사이트 내 공통 이미지 로드
- 검색결과 페이지에서 다음 페이지 미리 로드

미리 로드 차단
Firefox에서는 사전 로드 모드를 비활성화할 수 있습니다. 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

user_pref("network.prefetch-next", false);

주의사항
링크 사전 로딩과 관련하여 다음과 같은 참고사항이 있습니다. 🎜> - 사전 로드는 여러 도메인에 걸쳐 수행될 수 있습니다. 물론 요청 시 쿠키 및 기타 정보도 전송됩니다.
- 미리 로드하면 사용자가 실제로 방문하지 않고도 웹사이트 통계가 손상될 수 있습니다.
- 현재 프리로딩 모드를 지원하는 유일한 브라우저는 Mozilla Firefox입니다. (2003-2010)
어떻게 생각하시나요? 유휴 시간을 이용해 추가 파일을 다운로드하는 것은 획기적인 최적화입니다.