HTML5에서 rel 속성의 사전 로드 기능을 어떻게 사용합니까?

이 장에서는 HTML5에서 rel 속성의 사전 로드 기능을 사용하는 방법을 보여줍니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

HTML5에는 매우 유용하지만 종종 간과되는 기능이 있는데, 그 기능의 원칙은 다음과 같습니다.
브라우저의 유휴 시간을 사용하여 사용자가 지정한 콘텐츠를 먼저 다운로드한 다음 사용자가 로드할 때 캐시합니다.

예를 들어 특정 페이지를 미리 로드하려면 다음과 같이 하면 됩니다.

<link rel="prefetch" href="http://www.example.com/"> <!-- Firefox -->

하지만 Google인 경우에는 다른 A 이름, 즉

<link rel="prerender" href="http://www.example.com/"> <!-- Chrome -->

를 사용해야 합니다. 지원되지 않는 브라우저에서도 이 기능을 사용하는 데에는 아무런 문제가 없지만 브라우저는 이를 구문 분석할 수 없습니다. 따라서 사용자 기대치를 미리 예측할 수 있는 방법이 있다고 생각되면. 페이지(예를 들어 사용자가 최신 인기 히트맵을 볼 때 첫 번째 페이지를 본 후 계속해서 다음 페이지를 볼 수 있습니다. 이때 사전 로드 기능을 사용할 수 있습니다. 예:

<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">

및 가져오기) 별도로 사진도 허용됩니다. 예:

<link rel="prefetch" href="/images/test.jpg"/>

브라우저 캐시를 사용하는 경우 왜 미리 로드해야 합니까?

1. 사용자가 처음으로 웹사이트를 방문할 수 있으며 현재 캐시가 없습니다.
2. 사용자가 캐시를 지웠을 수 있습니다.
3 캐시가 만료되어 리소스가 다시 로드됩니다. 4. 사용자가 액세스한 캐시 파일이 최신이 아닐 수 있습니다. 새로 로드해야 합니다
5. Chrome의 사전 로딩 기술

이제 Chrome은 인터넷 사용 기록을 기반으로 사용자가 방문하거나 검색할 웹사이트를 예측하고 로드할 수 있을 만큼 똑똑합니다. 웹사이트를 열기 전에 몇 가지 리소스를 참조하세요.

예를 들어, 검색 상자에 "amaz"를 입력하면 amazon.com을 방문할 것으로 추측하고 이 웹사이트의 일부 리소스를 로드할 수 있습니다.
이 예측 알고리즘이 정확하다면 사용자의 탐색 경험을 크게 향상시킬 수 있습니다.

DNS prefetch우리는 www.amazon.com과 같은 웹사이트를 방문할 때 먼저 도메인 이름을 해당 IP 주소로 변환해야 하는데 이는 매우 시간이 많이 걸리는 프로세스라는 것을 알고 있습니다.
DNS 프리페치는 이 페이지에서 필요한 리소스가 위치한 도메인 이름을 분석하고, 브라우저가 유휴 상태일 때 이러한 도메인 이름을 미리 IP 주소로 변환합니다. 이렇게 하면 실제로 리소스를 요청할 때 위 프로세스의 시간을 피할 수 있습니다.

<meta http-equiv=&#39;x-dns-prefetch-control&#39; content=&#39;on&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://g-ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://z-ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://ecx.images-amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://completion.amazon.com&#39;>  
<link rel=&#39;dns-prefetch&#39; href=&#39;http://fls-na.amazon.com&#39;>

Application 시나리오 1: 리소스가 서로 다른 CDN에 존재합니다. 이러한 리소스의 도메인 이름을 미리 선언하면 요청이 발생할 때 도메인 이름 확인 시간을 절약할 수 있습니다.

애플리케이션 시나리오 2: 사용자의 다음 작업이 확실히 리소스 요청을 시작할 것이라는 것을 알고 있는 경우 이 리소스를 DNS 프리패치하여 사용자 경험을 향상시킬 수 있습니다.

Resource prefetchChrome에서는 링크 태그를 사용하여 특정 파일의 사전 로드를 선언할 수 있습니다.

<link rel=&#39;subresource&#39; href=&#39;critical.js&#39;>  
<link rel=&#39;subresource&#39; href=&#39;main.css&#39;>  
<link rel=&#39;prefetch&#39; href=&#39;secondary.js&#39;>

Firefox에서는 또는 메타 태그를 사용하여 선언합니다.

<meta http-equiv="Link" content="<critical.js>; rel=prefetch">

rel='subresource'는 다음을 의미합니다. 현재 페이지를 로드해야 합니다. 리소스는 페이지 상단에 배치하고 가장 높은 우선순위로 가장 먼저 로드해야 합니다.

rel='prefetch'는 하위 리소스의 모든 리소스가 로드될 때 여기에 지정된 리소스가 가장 낮은 우선순위로 미리 로드된다는 의미입니다.
참고: 캐시 가능한 리소스만 미리 로드됩니다. 그렇지 않으면 리소스가 낭비됩니다!

사전 렌더링앞서 언급한 사전 확인 DNS 및 사전 로드 리소스도 충분히 강력하지만, 훨씬 더 강력한 사전 렌더링이 있습니다!
사전 렌더링은 사용자가 방문하려는 다음 페이지를 미리 로드한다는 의미입니다. 그렇지 않으면 이 페이지를 사전 렌더링하면 리소스가 낭비되므로 주의해서 사용하세요!

<link rel=&#39;prerender&#39; href=&#39;http://www.pagetoprerender.com&#39;>

rel='prerender'는 브라우저가 렌더링을 도와주지만 지정된 페이지를 숨기면 즉시 열립니다.

Firefox에서 또는 rel='next'를 사용하여 선언하세요

<link rel="next" href="http://www.pagetoprerender.com">

모든 리소스를 미리 로드할 수 있는 것은 아닙니다.

리소스가 다음 목록의 리소스인 경우 사전 렌더링 작업이 차단됩니다.

1.URL 포함 리소스 다운로드
2. 오디오 및 비디오가 포함되어 있음
3. POST, PUT 및 DELETE 작업에 대한 Ajax 요청
4. HTTP 인증(인증)
5. HTTPS 페이지
6. 악성 코드가 포함된 페이지 7. 바운스 창 페이지
8 . 리소스를 많이 차지하는 페이지
9. Chrome 개발자 도구 열기

사전 렌더링 작업 수동 실행 헤드에 링크 [rel='prerender'] 삽입:

var hint =document.createElement("link")   
hint.setAttribute(“rel”,”prerender”)   
hint.setAttribute(“href”,”next-page.html”)   
document.getElementsByTagName(“head”)[0].appendChild(hint)

위 내용은 HTML5에서 rel 속성의 사전 로드 기능을 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!