>  기사  >  웹 프론트엔드  >  Html5 프리페치/프리렌더란 무엇입니까? Html5의 프리패치/프리렌더 소개

Html5 프리페치/프리렌더란 무엇입니까? Html5의 프리패치/프리렌더 소개

零下一度
零下一度원래의
2017-05-09 10:59:323027검색

Born for Affiliate라는 기사 제목은 사실 과장된 표현입니다.

프리렌더/프리패치

는 사실 웹페이지 로딩 속도를 향상시키기 위한 것이지만, 예를 들어 사용자가 홈페이지에 2초 동안 머물고 이 2초 내에 사용자가 열려고 하는 페이지가 이미 로드된 경우 사용자 경험을 개선하는 방법이 항상 사전 로드를 통해 달성되었습니다. 사용자 경험도 매우 빠릅니다.

HTML5 Prerender/Prefetch 명사 설명

prefetch 사용법:

It should be used for fetching and caching resources for later user navigation as per the official HTML5 spec (i.e. prefetching a css file to be used in a page which highly likely to be used by the user in his upcoming navigation). Supported in Chrome, Firefox & IE.

간단히 말해서 다음 웹 페이지의 캐싱입니다. 리소스는 HTML5의 새로운 기능입니다. 지원되는 브라우저는 Chrome(13 이상), Firefox, IE 11

사전 렌더링 사용법입니다.

It should be used for prerendering a complete page that the user will highly likely navigate to it in his upcoming navigation (i.e. like prerendering the next article where it is highly likely that the user will click on “next article” button). Supported only in Chrome & IE.

Prerender는 Google에서 나왔습니다. 가장 가까운 일치 원칙을 통해 "다음 페이지"와 같은 기사를 로드하는 등 사용자를 개선하고 사용자의 대기 시간을 줄이는 발명품입니다. 사용자가 방문할 가능성이 가장 높은 다음 페이지인 A 페이지를 방문합니다. 페이지에 B가 있는 경우 페이지 B를 미리 로드하면 로딩 속도 향상 효과를 얻을 수 있습니다. 지원되는 브라우저는 Chrome, IE11

입니다. 사용 방법

is actually part of the HTML 5 spec.
appears to be Google doing their own thing.

첫 번째 방법은 위 링크를 xxx에 추가

두 번째 방법은 JS 코드 삽입

var myHead = document.getElementsByTagName(‘head’)[0];
var myLink = document.createElement(‘link’);
myLink.setAttribute(‘rel’, ‘prerender’);
myLink.setAttribute(‘href’, ‘http://apple.com/ipad’);
myHead.appendChild(myLink);

을 사용하거나 Jquery 방법을 사용하는 것입니다. :

$(“head”).append(‘www.guoli.biz/’);

궁금한 점이 있으면 메시지를 남겨주세요

【관련 추천】

무료 h5 온라인 동영상 튜토리얼

2. HTML5 정식 버전 매뉴얼

3 . php.cn 원본 html5 동영상 튜토리얼

위 내용은 Html5 프리페치/프리렌더란 무엇입니까? Html5의 프리패치/프리렌더 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.