Introduction de l'article de wulin.com (www.vevb.com): Beaucoup de gens demandent ce qu'est HTML5? Nous disons que la méthode que nous pouvons d'abord utiliser HTML5 est de changer d'abord Doctype, car de nombreuses pages sont encore de la manière traditionnelle à l'heure actuelle. La méthode HTML5 est compatible avec IE Browser et peut être utilisée de IE6 à IE10, et elle peut être prise en charge par des navigateurs avancés.
[Note de l'éditeur] L'article suivant a été écrit par un technicien informatique nommé Zhang Liming, publié sur la page Web InfoQ. Cette fois, il a analysé les performances de HTML5 à partir de 9 aspects différents du texte intégral, qui vaut toujours la peine d'être lu par des développeurs correspondants.
Du point de vue des performances, HTML5 réduit d'abord les documents HTML, ce qui le rend plus simple. Premièrement, du point de vue de la lisibilité de l'utilisateur, il y avait beaucoup de choses qui n'étaient pas à l'origine compris par les débutants pour la première fois pour voir ces choses, et la méthode de déclaration HTML5 est évidemment plus amicale avec les utilisateurs. Deuxièmement, la déclaration de codage du document est très simple si elle est dans HTML5. Beaucoup de gens demandent ce qu'est HTML5? Nous disons que la méthode que nous pouvons d'abord utiliser HTML5 est de changer d'abord Doctype, car de nombreuses pages sont encore de la manière traditionnelle à l'heure actuelle. La méthode HTML5 est compatible avec IE Browser et peut être utilisée de IE6 à IE10, et elle peut être prise en charge par des navigateurs avancés. Ainsi, la façon la plus simple d'embrasser HTML5 est de changer Doctype.
1. Une étiquette plus simple
La prochaine chose n'est peut-être pas une chose très courante, mais c'est quelque chose que je préfère, en utilisant une méthode d'étiquette plus simple. Comme vous pouvez le voir à partir de ce nom, HTML5 est hérité de HTML4. HTML4 a un mode strict et un mode de transition. HTML5 prend en charge ce mode de transition, ce qui signifie que vous ne pouvez pas fermer certaines balises. Cependant, je ne recommande pas toutes les balises, par exemple, la balise corporelle n'est pas fermée, ce que nous ne recommandons pas. Mais le P-LABEL le plus couramment utilisé est également la balise de liste Li. Pourquoi le dites-vous? Tout d'abord, d'un point de vue visuel, cette méthode est un peu plus simple. Ensuite, la clé est que pendant le processus de transfert de documents, il y aura moins de contenu.
La déclaration d'attributs de balises HTML5 prend en charge trois façons: supports simples, doubles supports et supports non ramifiés. Pour réduire la taille du document, j'ai choisi la méthode sans citations doubles ni citations simples. Cependant, il convient de noter que, en supposant qu'il s'agit d'une déclaration d'attributs de classe, car les attributs peuvent inclure plusieurs classes, et lorsque plusieurs classes, elles doivent être enfermées entre parenthèses. À cet égard, permettez-moi de vous montrer une pratique de Google. Google lui-même a une page qui pratique complètement ce qui précède, réduisant la taille du document de 20%, réduisant le transfert de documents HTML de 20%. Si le tout est pratiqué, il peut atteindre une diminution entre 5% et 20%. Il s'agit de la première étape, réduisant la taille du document HTML.
2. Optimisation d'image
Vient ensuite l'optimisation des images, qui sont toujours des éléments qui aiment et hainent. Parce que lorsqu'il y a trop d'images, cela entraînera sérieusement la vitesse de chargement de toute la page. En ce qui concerne les méthodes d'optimisation des images, il existe de nombreuses introductions dans le livre "Site Web High Performance". Pour résumer, il y a trois points principaux: l'utilisation des elfes, l'optimisation de la taille des images et l'utilisation des données URI. Je n'entrerai pas dans les détails ici.
Une autre idée de l'optimisation de l'image est: sans image. Abandonnez les images et embrassez CSS3. À l'origine, j'avais besoin de régler une image avec un effet d'angle arrondi, mais maintenant j'ai utilisé Border-Radius dans CSS3; J'avais l'habitude de définir un effet d'ombre, mais maintenant j'utilise Box-Shadow dans CSS3; J'avais l'habitude de définir une image d'arrière-plan de dégradé, mais maintenant j'utilise le gradient dans CSS3.
3. Pré-pied
Ensuite, parlons de la pré-échantillon, ce qui est une autre façon d'optimisation. Nos idées d'optimisation actuelles ne sont rien de plus que peu. Beaucoup d'entre eux sont du point de vue de moins de choses, par exemple, la taille du document a été réduite avant et la taille de l'image a été réduite. De nombreuses images deviennent des elfes, afin de réduire le nombre de demandes d'envoi. Pour la pré-échantillon, c'est une autre façon de penser. Chargement des ressources tôt. Lorsque l'utilisateur va au point, il a réellement chargé, donc ce sera certainement plus rapide.
Il y a deux parties pour la prélecture: l'une est la prélecture des ressources, et l'autre pré-résoudre le DNS.
Il y a plusieurs points à noter lors du préchargement des ressources:
Le précharge ne tirera que lorsque le navigateur est inactif, mais il n'est pas garanti de le tirer. C'est un point très important. Parce que le navigateur lui-même a un auditeur mondial, qui est une interface interne. Lorsque l'air de navigation est inactif, il exécutera le navigateur lorsqu'il est inactif, mais ce rappel inactif peut ne pas être déclenché, il ne garantit donc pas que la précharge sera effectuée.
Chrome ne prend pas en charge le préchargement des ressources HTTPS. Par exemple, Alipay est une page HTTPS, Chrome ne sera pas pré-pulsé.
Bien qu'une page pré-tirée ne soit pas visible après son existence, elle analyse en fait normalement. Si je pré-échoue la page de connexion, la page de connexion dispose de nombreuses ressources, telles que des images, des fichiers CSS et des fichiers JS. Il sera analysé de haut en bas normalement. Pendant le processus d'analyse, cette page n'apparaît pas, mais elle existe en fait. Dans HTML5, vous pouvez obtenir l'état actuel de la page via Document.VisibilityState. Habituellement, la page a deux états, visibles et invisibles, mais il y a maintenant un nouvel État appelé State de pré-rendu. Vous pouvez déterminer directement si la page se trouve dans l'état de prérenrinage en fonction de savoir si Document.CisibilityState est égal à Prerender.