Quelle est la différence entre la pré-feste REL du lien et la précharge dans HTML?

rel = "Preload" est utilisé pour les ressources de grande priorité qui sont indispensables sur la page actuelle, tandis que rel = "préfetch" est utilisé pour les ressources de faible priorité qui pourraient être nécessaires à l'avenir. 1. Rel = "Preload" indique au navigateur de télécharger immédiatement des ressources clés telles que des polices, des scripts ou des feuilles de style pour améliorer la vitesse de rendu de la page actuelle; 2. Rel = "Prefetch" sert d'invite pour permettre au navigateur de télécharger des ressources qui peuvent être utilisées dans la navigation ultérieure lorsqu'il est inactif, tel que les fichiers CSS ou JS sur la page suivante. Les deux sont conçus pour optimiser les performances de charge, mais sont applicables dans différents scénarios, et une utilisation incorrecte peut entraîner des déchets de bande passante ou une dégradation des performances.

La différence entre link rel="prefetch" et link rel="preload" dans html se résume à l'objectif et au timing . Bien que les deux soient utilisés pour les optimisations de chargement des ressources, ils jouent des rôles différents et doivent être utilisés dans des contextes spécifiques.

Qu'est-ce que rel="prefetch" ?

Prefetch est un indice de faible priorité au navigateur qu'une ressource pourrait être nécessaire à l'avenir , éventuellement sur une navigation suivante ou une charge de page. Il est mieux utilisé lorsque vous n'êtes pas sûr à 100% si l'utilisateur aura besoin de la ressource, mais il y a de fortes chances qu'ils le feront.

Par exemple:

• Préfecture du CSS ou JS de la page suivante lorsqu'un utilisateur plane sur un lien.
• Préchargement des actifs pour une version de site mobile lorsqu'un utilisateur est sur le bureau.

Cas d'utilisation courants:

• Prédictions basées sur la navigation (comme les pages suivantes)
• Ressources chargées de paresseux qui pourraient être nécessaires plus tard

 <link rel = "prefetch" href = "/ next-page.css" as = "style">

Remarque: Le navigateur ne les télécharge que lorsque les ressources critiques de la page actuelle sont terminées.

Qu'est-ce que rel="preload" ?

Preload , en revanche, est une instruction de grande priorité indiquant au navigateur qu'une ressource sera nécessaire très bientôt , souvent pendant la charge de page actuelle. Cela aide à hiérarchiser le chargement précoce des actifs clés comme les polices, les scripts ou les images essentielles au rendu.

Par exemple:

• Chargement d'une police personnalisée avant qu'il ne soit nécessaire pour éviter le POIT (Flash of Invisible Text).
• Récupérer un fichier JavaScript important référencé à la fin de la page.

 <link rel = "preload" href = "/ important-script.js" as = "script">

Cela indique au navigateur: "Commencez à télécharger cela maintenant, même s'il n'est pas encore référencé."

Vous pouvez également précharger des choses comme:

• Fonts ( as="font" )
• Images ( as="image" )
• Styleshets ( as="style" )

⚠️ Soyez prudent avec la précharge - si vous spécifiez une ressource qui n'est pas réellement utilisée, elle gaspille la bande passante.

Quand utiliser lequel?

Voici un guide rapide:

• ✅ Utilisez la précharge lorsque:

  • Vous savez exactement quelle ressource est nécessaire pour la page actuelle.
  • Vous souhaitez accélérer le rendu en faisant charger les fichiers clés plus tôt.
  • Vous avez affaire à des ressources de blocage des rendements comme les polices ou les scripts asynchrones.

• ✅ Utilisez la pré-feste lorsque:

  • Vous devinez ce que l'utilisateur pourrait faire ensuite (comme cliquer sur un lien).
  • Vous souhaitez vous préparer à une future navigation sans ralentir le courant.
  • Vous optimisez pour les flux de plusieurs pages (par exemple, la pagination).

Résumé des différences clés

Ainsi, en gros, la précharge est pour "Besoin maintenant", la préfetch est pour "pourrait avoir besoin plus tard".
Ce sont tous deux des outils puissants lorsqu'ils sont utilisés correctement, mais une mauvaise utilisation peut nuire aux performances au lieu de l'aider.

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!