HTML5 리소스 미리 로드(링크 프리페치)(웹 페이지 가속화)에 대한 자세한 소개_html5 튜토리얼 기술

이 사이트에서 사용되는 몇 가지 속도 최적화 기술을 소개했습니다. HTML5에는 웹사이트 속도를 최적화하기 위한 새로운 기능인 페이지 리소스 미리 로드/프리 페치(링크 프리페치)가 등장했습니다.

페이지 리소스 프리로드/프리페치(링크 프리페치)란 무엇인가요? MDN의 설명:

페이지 리소스 미리 로드(링크 프리페치)는 브라우저가 여유 시간에 일부 문서 리소스를 다운로드하거나 미리 읽을 수 있도록 허용하고 사용자가 나중에 이러한 리소스에 액세스할 수 있도록 브라우저에서 제공하는 기술입니다. 웹 페이지는 브라우저에 대한 일련의 사전 로드 지침을 설정할 수 있습니다. 브라우저가 현재 페이지 로드를 마치면 지정된 문서를 백그라운드에서 자동으로 로드하고 캐시에 저장합니다. 사용자가 미리 로드된 문서에 액세스하면 브라우저는 해당 문서를 캐시에서 신속하게 검색하여 사용자에게 제공할 수 있습니다.

간단히 말하면, 사용자가 현재 페이지에 액세스한 후 액세스할 가능성이 있는 다른 리소스(페이지, 사진, 동영상 등)를 브라우저가 미리 로드하도록 합니다. 그리고 방법은 정말 간단해요!

HTML5 페이지 리소스 프리로드(Link prefetch) 작성 방법

코드 복사

코드

wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5 페이지 리소스 preloading/prefetching(Link prefetch) 기능은 Link 태그를 통해 구현되며, rel 속성을 "prefetch"로 지정하고 href 속성에 로드할 리소스의 주소를 지정합니다. Firefox는 또한 추가 속성 지원을 제공합니다.

코드 복사

코드는 다음과 같습니다.

title="Designed for Mozilla" href="moz특정.css" _fcksavedurl=""moz특정.css"" />

프리페치는 HTTPS 프로토콜 리소스에서도 사용할 수 있습니다.

어떤 상황에서 페이지 리소스를 미리 로드해야 하나요

페이지에 어떤 종류의 리소스가 로드되며 언제 로드되는지는 전적으로 귀하에게 달려 있습니다. 다음은 몇 가지 제안사항입니다.

1. 페이지에 슬라이드쇼 같은 서비스가 있는 경우 다음 1-3페이지와 이전 1-3페이지를 미리 로드/미리 읽어줍니다.
2. 전체 웹사이트에 공통으로 사용되는 이미지를 미리 로드하세요.
3. 웹사이트 검색결과의 다음 페이지를 미리 로드합니다.

페이지 리소스 미리 로드 비활성화(링크 프리페치)

Firefox에는 페이지 리소스 미리 로드(링크 프리페치) 기능을 비활성화하는 옵션이 있습니다.

1.user_pref("network.prefetch-next", false);
2. 페이지 리소스 미리 로드(링크 프리페치) 시 주의사항

다음은 페이지 리소스 미리 로드(링크 미리 가져오기)에 대한 몇 가지 참고 사항입니다.

1. 도메인 간 쿠키 가져오기를 포함하여 링크 미리 가져오기는 도메인 간 작동할 수 없습니다.
2. 미리 로드(링크 프리패치)하면 브라우저에 미리 로드된 일부 페이지가 사용자가 실제로 방문하지 않을 수 있으므로 웹사이트 트래픽 통계가 오염됩니다.
3. Firefox는 2003년부터 이 사전 로드(링크 사전 가져오기) 기술을 지원해 왔습니다.

브라우저의 유휴 시간을 사용하여 일부 추가 리소스 파일을 로드하는 것은 흥미롭고 위험해 보입니다.