HTML5 리소스 미리 로드(링크 프리페치)에 대한 자세한 소개

이 글은 주로 HTML5 리소스 프리로딩(링크 프리페치)에 대한 자세한 소개를 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

브라우저 개발자이든 일반 웹 애플리케이션이든. 개발자들은 모두 웹 검색 속도를 더 빠르게 만들기 위해 공통된 노력을 기울이고 있습니다. 웹 사이트를 더 빠르게 만들 수 있는 알려진 기술은 많이 있습니다: CSS 스프라이트 사용, 이미지 최적화 도구 사용, .htaccess를 사용하여 페이지 헤더 정보 및 캐시 시간 설정, JavaScript 압축, CDN 사용 등

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

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

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

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

HTML5 페이지 리소스 프리로딩(링크 프리페치) 작성 방법

코드 복사

코드는 다음과 같습니다.

<!-- 预加载整个页面 -->
<link rel="prefetch" href="http://www.jb51.net/misc/3d-album/" /></p>
<p><!-- 预加载一个图片 -->
<link rel="prefetch" href=" <a href="http://www.jb51.net/wordpress/">http://www.jb51.net/wordpress/</a>
wp-content/uploads/2014/04/b-334x193.jpg " />

HTML5 페이지 리소스 프리로딩/프리페치(링크 프리페치) 기능은 다음을 통해 구현됩니다. Link 태그 예. rel 속성을 "prefetch"로 지정하고 href 속성에 로드할 리소스의 주소를 지정하세요. Firefox는 추가 속성 지원도 제공합니다.

코드 복사

코드는 다음과 같습니다.

<link rel="prefetch alternate stylesheet" 
title="Designed for Mozilla" href="mozspecific.css" _fcksavedurl=""mozspecific.css"" />
<link rel="next" href="2.html" />

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

어떤 상황에서 페이지 리소스를 미리 로드해야 합니까?

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

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

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

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

1.user_pref("network.prefetch- next", false);
2. 페이지 리소스 미리 로드(링크 미리 가져오기)에 대한 참고 사항

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

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

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

위 내용은 HTML5 리소스 미리 로드(링크 프리페치)에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!