Une introduction à trois nouvelles fonctionnalités pratiques HTML5 peu courantes_Échange d'expériences

1. Cache de pré-résolution DNS

Comme nous le savons tous, la résolution DNS est un élément important de l'optimisation des performances du site Web. Bien que le temps de chargement ne soit pas trop long, il est difficile de le compresser. Surtout pour les grands sites Web qui utilisent plusieurs noms de domaine CDN pour charger des ressources afin de télécharger des ressources simultanément, la conversion de la résolution DNS du nom de domaine CDN doit être effectuée avant le chargement de chaque ressource.
Si le préchargement DNS est utilisé, les navigateurs prenant en charge cette fonctionnalité effectueront à l'avance une résolution DNS sur le nom de domaine et le mettront en cache, au lieu de le résoudre lorsque des ressources doivent être demandées. Et l'application de cette fonction est vraiment simple :

Copier le code Le code est le suivant :

Taobao a appliqué cette technologie. Vous pouvez ouvrir Taobao et afficher le code source. En haut, certains de leurs serveurs CDN effectuent la résolution DNS et la mise en cache.

2. Préchargement des ressources

Il existe de nombreuses façons de précharger des ressources, telles que le préchargement d'images courant, les images d'arrière-plan CSS sont utilisées pour le préchargement, et la plupart d'entre elles utilisent toujours JS. Actuellement, HTML5 fournit une méthode spécialisée de préchargement des ressources avec deux attributs : prefetch (prélecture) et prerender (prérendu), qui sont respectivement pris en charge par les navigateurs Firefox et Chrome.

1).PREFETCH pré-lecture
La pré-lecture est un préchargement de ressources très courant. Une fois la page actuelle chargée, les ressources que vous spécifiez seront secrètement téléchargées plus tard, généralement JS, CSS et images. télécharger la page :

Copier le code Le code est le suivant :

Notez que cette fonctionnalité est actuellement prise en charge par le navigateur Firefox.

2).PRERENDER Pré-rendu
C'est encore plus puissant. Il le télécharge non seulement secrètement à l'avance, mais le restitue également pour vous. Lorsque l'utilisateur clique sur le lien, il vous sera immédiatement affiché.

Copier le code Le code est le suivant :

Notez que Chrome prend actuellement en charge cette fonctionnalité.

Les moteurs de recherche ont en fait le plus besoin de cette fonction de pré-lecture, car ils sont très sûrs de la page que l'utilisateur ouvrira ensuite (la page des résultats de recherche), donc lorsque l'utilisateur entre dans le contenu de la recherche, il peut pré-lire la recherche à l'avance. Les ressources sur la page de résultats sont chargées à l'avance, et après application, l'effet est très évident.

Actuellement, la compatibilité est un défaut. Il semble que seuls Chrome et Firefox le supportent, et les attributs rel utilisés sont différents. Si vous souhaitez être compatible avec deux navigateurs en même temps, vous pouvez l'écrire comme suit :

Copier le code Le code est le suivant :

De plus, bien entendu, pour des raisons de sécurité, les ressources ne peuvent pas être préchargées sur plusieurs domaines et ne peuvent pas être utilisées dans le CDN.

3. Attribut de téléchargement

L'attribut Download du HTML5 est utilisé pour forcer le navigateur à télécharger le fichier correspondant au lieu de l'ouvrir. Les navigateurs tels que Chrome et Firefox sont trop puissants, peut-être pour améliorer l'expérience utilisateur lorsque le fichier de ressource sur lequel l'utilisateur a cliqué peut être reconnu par eux (par exemple, le pdf sera ouvert directement dans le navigateur, et les médias tels que mp3 et mp4. sera joué directement dans le navigateur) lecture du lecteur). Mais parfois, l'utilisateur souhaite en fait le télécharger directement au lieu de le visualiser sur le navigateur. Dans ce cas, cet attribut peut être ajouté, et la valeur de l'attribut renommera le fichier téléchargé :

Copier le code Le code est le suivant :

Cliquez à télécharger et à enregistrer directement dans le fichier download.pdf

Si vous êtes sûr que l'utilisateur téléchargera définitivement cette ressource, vous pouvez ajouter cet attribut, et vous pouvez également utiliser JS ou modifier manuellement le nom du fichier que vous souhaitez enregistrer.

HTML5 a de nombreuses autres fonctionnalités, mais après avoir lu des livres et divers documents pendant une longue période, je vois rarement les trois attributs plus pratiques ci-dessus, j'aimerais donc les partager.