Une introduction à trois nouvelles fonctionnalités utiles et inhabituelles de HTML5

1. Cache de pré-résolution DNS

Comme nous le savons tous, la résolution DNS est une partie importante 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 :

<link rel="dns-prefetch" href="http://cdn.staticfile.org/">
<link rel="dns-prefetch" href="//www.google-analytics.com">

Taobao a appliqué cette technologie. Vous pouvez ouvrir Taobao, afficher le code source et effectuer une résolution DNS sur certains de leurs serveurs CDN en haut. .

2. Préchargement des ressources

Il existe de nombreuses façons de précharger les ressources, telles que le préchargement d'images courants, et la plupart des images d'arrière-plan CSS sont utilisées pour précharger. utilisez 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 et CSS. téléchargez également des pages telles que des images :

<link rel="prefetch" href="http://blog.wpjam.com/" />
<link rel="prefetch" href="http://wpjam.qiniudn.com/wpjam/logo.png" />
<link rel="prefetch alternate stylesheet" href="mozspecific.css" />

Notez que le navigateur Firefox prend actuellement en charge cette fonctionnalité.

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 s'affichera. vous immédiatement.

<link rel="prerender" href="http://blog.wpjam.com/" />

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 Les ressources sur la page des résultats de recherche 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 :

<link rel="prefetch prerender" href="http://blog.wpjam.com" />

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 Download

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) joueur à jouer). Mais parfois, l'utilisateur souhaite le télécharger directement au lieu de le visualiser sur le navigateur. Dans ce cas, vous pouvez ajouter cet attribut, et la valeur de l'attribut renommera le fichier téléchargé :

<a href="downloadpdf.php" download="download.pdf">点击直接下载并保存成 download.pdf 文件</a>

Si vous. êtes sûr que cette ressource est quelque chose que les utilisateurs téléchargeront certainement, vous pouvez donc 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.

Pour plus d'introductions à trois nouvelles fonctionnalités pratiques HTML5 peu courantes, veuillez prêter attention au site Web PHP chinois pour les articles connexes !