Exigences : Lors de la demande d’un site web, il faut charger beaucoup de ressources, les requêtes réseau affectent aussi la vitesse de rendu de la page web, lorsque l’utilisateur clique sur l’opération pour charger certaines ressources peut affecter l’expérience utilisateur, maintenant le développement rapide d’Internet, la bande passante et le trafic ne sont plus aussi coûteux, comment précharger les ressources à l’avance ou établir un lien avec le serveur cible à l’avance ?
Préconnexion
La préconnexion du mot-clé pour les propriétés des éléments est un indice au navigateur que l’utilisateur peut avoir besoin de ressources provenant de la source cible afin que le navigateur puisse les utiliserAméliorez l’expérience utilisateur en initiant de manière préventive des connexions vers cette source。
preconnect permet au navigateur d’effectuer plusieurs actions avant qu’une requête HTTP ne soit officiellement envoyée au serveur, notamment la résolution DNS, la négociation TLS, la poignée de main TCP, qui élimine la latence aller-retour et fait gagner du temps à l’utilisateur.
La préconnexion est un moyen important d’optimisation pour réduire le trajet aller-retour dans de nombreuses requêtes – dans certains cas de centaines voire de milliers de millisecondes de latence.
Voici un exemple d’utilisation de préconnexion pour Google Fonts, où en ajoutant une invite de préconnexion à fonts.gstatic.com, le navigateur lance immédiatement une requête qui sera exécutée en parallèle avec la requête CSS. Dans ce scénario, le préconnexion élimine trois RTT (temps aller-retour) du chemin critique etLatence réduite de plus d’une demi-seconde。
La syntaxe est la suivante :
Documentation:La connexion hyperlientérée est visible.
DNS-prefetch utilise DNS prefetch
Le mot-clé dns-prefetch de l’attribut élément sert à alerter le navigateur sur le fait que celui-ci pourrait avoir besoin d’une ressource provenant de la source cible, afin que le navigateur puisse améliorer l’expérience utilisateur en effectuant de manière préventive une résolution DNS pour cette source.
La prélecture DNS permet au navigateur d’être sur la page pendant que l’utilisateur navigueExécuter la résolution DNS en arrière-plan。 De cette façon, la résolution DNS est réalisée lorsque l’utilisateur clique sur un lien, réduisant ainsi la latence. La prélecture DNS d’une URL donnée peut être réalisée en ajoutant rel="dns-prefetch' aux propriétés d’une balise lien, nous recommandons de gérer les polices Google, Google Analytics et CDN.
« Les requêtes DNS ont très peu de trafic en bande passante, mais la latence peut être élevée, surtout sur les appareils mobiles. Le DNS spécifié par la prélecture peut réduire significativement la latence dans certains scénarios, comme lorsqu’un utilisateur clique sur un lien. Parfois, même un délai d’une seconde peut être réduit - Mozilla Developer Network »
La syntaxe est la suivante :
Documentation:La connexion hyperlientérée est visible.
Préchargement préchargé
La valeur de préchargement de la propriété élément vous permet de déclarer une requête de récupération en HTML, en spécifiant les ressources dont la page aura bientôt besoin, et vous voulez commencer à charger tôt dans le cycle de vie de la page, avant que le principal mécanisme de rendu du navigateur ne démarre. Cela garantit qu’ils sont disponibles plus tôt et moins susceptibles de bloquer le rendu de la page, améliorant ainsi les performances. Même si le nom contient le terme chargement, il ne charge pas et n’exécute pas le script, mais le programme simplement pour le télécharger et le mettre en cache avec une priorité plus élevée.
Le préchargement est une nouvelle norme web qui contrôle la manière dont des ressources spécifiques sont chargées, une mise à niveau du prélecture de sous-ressources, qui a été déprécié en janvier 2016. Cette commande peut <link> être utilisée dans , par exemple <link rel="preload">. En général, il est préférable d’utiliser le préchargement pour charger vos ressources les plus importantes, telles que les images, le CSS, le JavaScript et les fichiers de polices. Il ne faut pas confondre cela avec le préchargement du navigateur, qui ne précharge que les ressources déclarées en HTML. La directive de préchargement surmonte en réalité cette limitation et permet de précharger les ressources définies en CSS et JavaScript, ainsi que de décider du moment d’appliquer chaque ressource.
Le préchargement diffère du prélecture en ce qu’il se concentre sur la page en cours et charge les ressources avec une priorité élevée, tandis que le préchargement se concentre sur la ressource que la page suivante va charger et se charge avec une priorité basse. Notez aussi que le préchargement ne bloque pas l’événement d’onload de la fenêtre.
De nombreux types de contenu différents peuvent être préchargés. Les valeurs immobilières possibles sont :
audio : Un fichier audio, généralement utilisé pour <audio>.
document: 旨在由<frame>或嵌入的 HTML 文档<iframe>。
Intégrer : La ressource à intégrer <embed>dans l’élément.
fetch : Une ressource accessible via la requête fetch ou XHR, telle qu’un fichier ArrayBuffer ou JSON.
font: 字体文件。
image : fichier image.
objet : La ressource à intégrer <object>dans l’élément.
script: JavaScript 文件。
style: CSS 样式表。
track: WebVTT 文件。
ouvrier : Un travailleur web JavaScript ou travailleur partagé.
Vidéo : un fichier vidéo, généralement utilisé pour <video>.
La syntaxe est la suivante :
Documentation:La connexion hyperlientérée est visible.
|
Publié sur 26/09/2022 21:45:08
|
|
|
|
Publié sur 28/09/2022 08:54:26
|
