Exemple détaillé d'utilisation d'InstantClick.js pour charger la page à l'avance en 200 ms

Cet article présente principalement l'utilisation d'InstantClick.js pour charger la page 200 ms à l'avance. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Avant-propos

Il existe de nombreuses façons d'accélérer le chargement d'un site Web. Sous la recommandation de @Roc, j'ai trouvé InstantClick.js et vérifié soigneusement l'anglais de. le site officiel Documentation et a constaté qu'InstantClick.js a une bonne idée de mise en œuvre (comment ça marche).

Avant que le visiteur clique sur un lien (testez-vous ici) :

• survolez (environ 200 ms entre survol->clic)

• Mousedown (environ 100 ms entre Mousedown->clic),

• Touchstart du téléphone mobile

Il y a généralement un intervalle de 200 ms entre ces deux événements, et InstantClick utilise cet intervalle de temps pour précharger la page. De cette façon, lorsque vous cliquez sur la page, la page a effectivement été chargée localement, et le rendu sera bien entendu très rapide.

Bien sûr, InstantClick utilise également Pjax : technologie pushState et Ajax

En même temps, je l'ai essayé et ça a vraiment bien fonctionné. Si votre blog doit implémenter Pjax, InstantClick serait un bon choix.

Instructions

Téléchargez instantclick.js. instantclick.min.js ne fait que 2,5 Ko, très petit

Utilisez

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

Remarque :

• La signification de data-no-instant est que ce JS ne s'exécutera qu'une seule fois. Vous devez définir

• en fonction de votre propre situation. Si vous souhaitez éviter un préchargement inutile, désactivez-le. survolez et activez Mousedown Un bon choix, moursedown signifie que vous avez cliqué sur le lien

pour voir l'effet

Ouvrez la console Chrome. et affichez la vue réseau, qui apparaîtra à chaque fois que vous survolez, vous pouvez d'abord charger la page et afficher la page de résultats lorsque vous cliquez dessus.

Comme il n'existe pas de bon logiciel d'animation, il n'y a pas d'affichage d'animation gif

Extendu

InstantClick propose également plusieurs événements qui peuvent être définis.

• la page de modification est modifiée, c'est-à-dire après que le clic déclenche le chargement

• la page de récupération commence le préchargement

• le préchargement de la page de réception est terminé, c'est-à-dire : le préchargement déclenché par le survol ou le appui de la souris, mais il peut ne pas changer car l'utilisateur ne peut pas cliquer sur

instance

Parce qu'ajax est utilisé, Google ga ne comptera pas les PV, donc la méthode de changement est ajoutée

<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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!