L'impact de l'écriture HTML sur le taux de compression gzip
Il y a quelques jours, j'ai vu Xiao Du partager un article dans le groupe, "L'impact de l'écriture HTML sur le taux de compression gzip", j'ai donc également analysé ce point.
Je ne sais pas si vous avez lu cet article. L'auteur est de Weibo Lazy Exchange Meeting Permettez-moi de décrire brièvement son contenu ici.
L'algorithme Gzip est principalement composé des algorithmes Haferman et LZ77.
S'il y a deux éléments de contenu dans le fichier qui sont identiques, alors tant que nous connaissons l'emplacement et la taille du contenu précédent, et grâce à un identifiant de compression spécifique,
nous pouvons déterminer le contenu de la pièce suivante. Nous pouvons donc remplacer ce dernier élément de contenu par une paire d'informations telles que la longueur de la position.
Exemple
<html><head>
<title></title>
<meta charset="utf-8" /></head><body>
<form action="">
<input class="J_Textarea" type="text" name="name123" id="id1"/>
<input class="J_Textarea" type="password" name="name223" id="id2"/>
<input class="J_Textarea" type="radio" name="name323" id="id3"/>
<input class="J_Textarea" type="checkbox" name="name423" id="id4"/>
</form></body></html>Après compression avec gzip, la taille affichée dans les outils de développement de Chrome est de 563 B.
Après avoir mélangé l'ordre des attributs de la balise d'entrée :
<html><head>
<title></title>
<meta charset="utf-8" /></head><body>
<form action="">
<input class="J_Textarea" type="text" name="name123" id="id1"/>
<input name="name123" class="J_Textarea" type="password" id="id2"/>
<input type="radio" id="id3" name="name323" class="J_Textarea"/>
<input id="id4" type="checkbox" class="J_Textarea" name="name423"/>
</form></body></html>compression gzip, la taille que vous voyez est 578B.
Le contenu de l'article est à peu près comme ceci. Ensuite, j'y ai réfléchi de manière décisive, CSS aurait-il des effets similaires ?
Écrivez d'abord les attributs dans le fichier CSS dans l'ordre :
@charset "utf-8";
.f1{font-size:10px; line-height: 22px; color:red;}.f2{font-size:14px; line-height: 26px; color:green;}La taille vue par gzip est de 463B
Une fois les attributs désordonnés :
@charset "utf-8";
.f1{font-size:10px; line-height: 22px; color:red;}.f2{font-size:14px; color:green; line-height: 26px;}La taille après gzip est de 464B
De là, nous pouvons conclure que non seulement le HTML, mais aussi le CSS ont des effets similaires.
Certaines personnes pourraient se demander : que se passera-t-il s'il y a d'autres classes entre les rangées ?
@charset "utf-8";
.f1{font-size:10px; color:red; line-height: 22px;}.f9{background: red;}.f2{font-size:14px; color:green; line-height: 26px;}taille : 482B
@charset "utf-8";
.f1{font-size:10px; line-height: 22px; color:red;}.f9{background: red;}.f2{font-size:14px; color:green; line-height: 26px;}taille : 480B
C'est le résultat C'est différent de la conclusion ci-dessus.
On constate que la continuité entre les lignes peut également avoir un impact sur le taux de compression.
En d’autres termes, plus le taux de similarité du code est élevé, plus le taux de compression est élevé.
Que ce soit en termes de taux de compression ou de propreté et de beauté du code, nous devons écrire le code dans l'ordre, ce qui convient à l'équipe et à la compression.
La différence de valeurs taille/contenu dans le réseau des outils de développement Chrome :
En plus de rechercher cet aspect, j'ai découvert la colonne Réseau/Taille dans les outils de développement Chrome Un peu difficile à comprendre.
J'ai du mal avec sa taille et son contenu depuis longtemps. Je ne comprends pas ce qu'ils veulent dire. Parfois, la taille est supérieure à la valeur du contenu, et parfois, la taille est inférieure à la valeur du contenu.
Après les conseils de CJ et mes propres expériences, les résultats suivants ont été obtenus.
La valeur de taille fait référence à la taille du contenu de transmission réseau, qui inclut la taille gzip des en-têtes de requête/réponse et la taille gzip du contenu du fichier.
La valeur Contenu fait référence à la taille gzip décompressée du corps du contenu principal, qui correspond à la taille du fichier d'échange.
Si vous voyez que la taille est plus grande que la valeur du contenu, cela signifie que ses en-têtes sont beaucoup plus grands que la décompression gzip du corps, et vice versa.
Vous constaterez peut-être que la valeur de taille obtenue lors du premier accès à la page est bien inférieure à la valeur de taille après l'actualisation. En effet, le cache de la page est activé, il n'est donc pas nécessaire de la recharger depuis le réseau.
Personnellement, je pense que la valeur FireBug est plus intuitive que la valeur Chrome. La taille sur FireBug est la valeur gzip. Il semble que la taille de gzip ne soit pas trouvée dans Chrome.
À moins qu'il n'y ait un champ Content-Length dans les informations d'en-tête de retour côté serveur, vous pouvez également voir la taille du gzip à partir de ce champ. Mais ce champ n'est généralement pas affiché.
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
