InstantClick.js를 사용하여 200ms에 미리 페이지를 로드하는 자세한 예

이 글에서는 주로 InstantClick.js를 사용하여 페이지를 200ms 미리 로드하는 방법을 소개합니다. 편집자는 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 살펴보겠습니다.

Foreword

웹사이트 로딩 속도를 높이는 방법은 여러 가지가 있습니다. @Roc의 추천으로 공식 웹사이트의 영어 문서를 꼼꼼히 살펴보며 찾았습니다. InstantClick.js에는 매우 훌륭한 구현 아이디어(작동 방식)가 있습니다.

방문자가 링크를 클릭하기 전(여기에서 테스트해 보세요):

• hover(hover->클릭 간 약 200ms)

• Mousedown(Mousedown->클릭 약 100ms),

• Touchstart 휴대폰 터치

이 두 이벤트 사이에는 일반적으로 200ms의 간격이 있으며 InstantClick은 이 시간 간격을 사용하여 페이지를 미리 로드합니다. 이러한 방식으로 페이지를 클릭하면 페이지가 실제로 로컬로 로드되며 렌더링 속도도 물론 매우 빠릅니다.

물론 InstantClick도 Pjax: pushState 및 Ajax 기술을 사용합니다

동시에 시도해 보았는데 정말 잘 작동했습니다. 귀하의 블로그가 Pjax를 구현해야 한다면 InstantClick이 좋은 선택이 될 것입니다.

사용 방법

instantclick.js를 다운로드하세요. instantclick.min.js는 2.5Kb에 불과하며 매우 작습니다.

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

을 사용하세요. 참고:

• data-no-instant는 이 JS가 한 번만 실행된다는 의미이므로 사용자가 직접 설정해야 합니다. 상황

• 불필요한 사전 로드를 피하려면 마우스 오버를 끄고 마우스 다운을 활성화하는 것이 좋습니다. Moursedown은 링크가 클릭되었음을 의미합니다

효과 보기

Chrome 콘솔을 열고 마우스를 가져갈 때마다 나타나는 네트워크 보기를 확인하세요. 페이지를 먼저 로드하고 클릭하면 결과 페이지가 표시됩니다.

좋은 애니메이션 소프트웨어가 없기 때문에 gif 애니메이션 표시가 없습니다.

Extension

InstantClick은 또한 설정할 수 있는 여러 이벤트를 제공합니다.

• change 페이지가 변경되었습니다. 즉, 클릭이 로드를 트리거한 후

• fetch 페이지가 미리 로드되기 시작합니다.

• receive 페이지가 미리 로드되었습니다. 즉, 마우스를 올리거나 마우스를 눌렀을 때 미리 로드가 트리거되었지만 반드시 변경되는 것은 아닙니다. 사용자가 반드시

인스턴스

를 클릭하지 않기 때문입니다. ajax를 사용하기 때문에 Google ga에서는 PV를 계산하지 않으므로 변경 방법이 추가됩니다

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga(&#39;send&#39;, &#39;pageview&#39;) */
 
InstantClick.on(&#39;change&#39;, function() {
 ga(&#39;send&#39;, &#39;pageview&#39;, location.pathname + location.search);
});
 
InstantClick.init();
</script>

위 내용은 InstantClick.js를 사용하여 200ms에 미리 페이지를 로드하는 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!