HTML5 링크 미리 가져오기를 사용하여 웹사이트 속도를 높이세요_html5 튜토리얼 팁

HTML5의 링크 프리페치는 모래 속에 묻혀 있는 보석과도 같으며 아직 그 가치를 아는 사람은 거의 없습니다. 여러분은 이미 오래되고 유명한 이미지 사전 로드 기능을 알고 있을 것입니다. 링크 사전 가져오기 기능은 이 개념을 이미지에서 웹 콘텐츠(AJAX 코드 없이)로 확장합니다.
작동 방법은 다음과 같습니다. 다음과 같이 페이지에 링크를 추가합니다.

코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

이렇게 하면 컴퓨터가 유휴 상태일 때 브라우저가 백그라운드에서 자동으로 page2.html을 다운로드합니다. 사용자가 마지막으로 page2.html 링크를 클릭하면 브라우저가 캐시에서 페이지를 가져오므로 페이지가 예기치 않게 빠르게 로드됩니다.
현재 Firefox에서만 이 기능을 지원합니다. 그러나 Firefox는 현재 세계에서 두 번째로 큰 사용자 기반을 보유한 브라우저이기 때문에 HTML 페이지에 이러한 코드 줄을 추가하는 한 이러한 매우 확실한 페이지 로딩 속도를 경험할 수 있는 방문자는 여전히 상당수일 것입니다. . 개선하다. 정말 멋지다!

링크 미리 가져오기 기능을 다양한 상황에서 사용할 수 있습니다:
* 긴 글이나 온라인 튜토리얼, 앨범 등이 있는 경우에는 여러 개로 나누어야 합니다. 여러 페이지가 표시되는 경우.
* 홈페이지에서 사용자가 방문할 가능성이 가장 높은 다음 페이지를 미리 로드하세요. (제품 웹사이트의 "강력 추천" 제품 페이지일 수도 있고 블로그 웹사이트의 최근 블로그일 수도 있습니다.)
* 검색어 페이지에는 검색된 처음 몇 개의 항목이 미리 로드됩니다.
정적 콘텐츠의 경우 rel 태그를 사용하여 프리패치 기능을 구현할 수도 있습니다.

코드 복사

코드는 다음과 같습니다.

다른 코드도 있습니다. 여기서 주목해야 할 흥미로운 사항:
* 링크 프리페칭은 곧 Opera, Chrome 및 Safari 브라우저에 구현될 예정이지만 Internet Explorer의 경우 2020년까지 기다려야 할 수도 있습니다.
* 이 기능을 광범위하게 사용할 경우 웹사이트 로그 및 접속 통계에 영향을 미칠 수 있습니다. 페이지 중 하나가 여러 페이지를 미리 가져왔지만 사용자가 실제로 해당 페이지에 액세스하지 않은 상황을 고려해 보세요. 귀하의 서버(또는 통계 도구)는 둘 사이의 차이점을 알지 못합니다.
이를 구별하기 위해 Firefox는 HTTP 헤더에 X-moz: prefetch 메시지를 보내지만, 이 메시지를 인식하려면 서버 측에서 뭔가가 필요합니다.