11 choses à noter sur l'amélioration de l'efficacité du rendu des pages Web CSS_Experience Exchange

1. Nombre de chiffres et majuscules et minuscules pour les valeurs de couleur hexadécimales

Lors de l'écriture des valeurs de couleur hexadécimales, vous pouvez utiliser des lettres minuscules ou les omettre en 3 chiffres. Aucune donnée spécifique n'a été trouvée de cette manière. l'écriture. Cela prouve si cela a un impact sur l'efficacité du rendu du navigateur, mais la norme par défaut pour les valeurs de couleur hexadécimales est la notation en majuscules et à 6 chiffres. Ne pas vouloir prendre de risques dans des situations inconnues réduit l'efficacité du rendu.

* Refusé - couleur :#f3a

* Recommandé - couleur :#FF33AA

2. La différence entre l'affichage et la visibilité

Ils sont utilisés ; pour définir ou récupérer l'affichage ou non de l'objet. L'affichage des objets cachés ne conserve pas l'espace physique et la visibilité conserve l'espace physique occupé par les objets cachés. Lorsque le navigateur restitue l'espace physique occupé, des ressources sont consommées.

* Refusé - visibilité : cachée

* Recommandé - affichage : aucun

3. 🎜> est similaire à la relation entre affichage et visibilité, avec respectivement aucun espace et réservé. En savoir plus sur border:0; Bien que la bordure puisse être masquée, elle conservera l'utilisation de border-color/border-style pour vous.

* Refusé - bordure :0 ;

* Recommandé - bordure : aucune

4. Il est déconseillé d'utiliser des images d'arrière-plan trop petites pour les tuiles
Une image d'arrière-plan d'une largeur et d'une hauteur de 1px Bien que la taille du fichier soit très petite, le rendu d'un panneau d'une largeur et d'une hauteur de 500px nécessite un carrelage répété 2500 fois. L'amélioration de l'efficacité du rendu de l'image d'arrière-plan est liée à la taille et au volume de l'image. La plus grande taille du fichier image reste d'environ 70 Ko.

* Refusé - Images d'arrière-plan en mosaïque avec une largeur et une hauteur inférieures à 8 pixels

* Recommandé - Images d'arrière-plan avec un volume et une taille modérés

Utilisez les filtres IE avec prudence

En plus de consommer des ressources, les filtres IE ont également des problèmes de compatibilité. Il existe un filtre qui rend PNG transparent. Vous pouvez éviter d'utiliser ce filtre en rendant GIF ou JPG transparents. Il est recommandé d'utiliser uniquement la transparence GIF dans IE6, car IE7 et versions ultérieures prennent déjà en charge la transparence PNG.

* Désapprouvez, l'abus des filtres IE consomme non seulement des ressources, mais entraîne également des problèmes de compatibilité.

* Il est recommandé de l'utiliser, il est préférable de choisir d'autres méthodes pour éviter d'utiliser des filtres.


6. *{margin:0; padding:0;} pour éviter les différences de style de navigateur

Le caractère générique * initialise toutes les balises et le rendu du navigateur prend un certain temps. .ressource. Certaines balises sont presque les mêmes dans différents navigateurs, ou certaines balises ne sont plus recommandées (car vous ne les utiliserez pas). Elles n'ont pas besoin de caractères génériques pour être réinitialisées. Cela peut économiser certaines ressources.

* Refusé, utilisez le caractère générique *

* Refusé, le tableau b du bouton div span et d'autres balises doivent être inclus dans les caractères génériques pour contrôler les styles de remplissage internes et externes

* Recommandé, soyez sélectif Utilisez des caractères génériques pour contrôler les styles de remplissage interne et externe.

7. N'ajoutez pas de balises supplémentaires pour décrire la classe ou l'identifiant

Si vous avez un sélecteur qui utilise l'identifiant comme sélecteur de clé, veuillez ne pas ajouter de noms de balises supplémentaires. L’ID étant unique, vous ne devez pas réduire l’efficacité de la correspondance pour une raison inexistante.

* Refusé - bouton#backButton { }

* Refusé - .menu-left #newMenuIcon { }

* Recommandé - #backButton { }

* Il est recommandé d'utiliser - #newMenuIcon { }

8 Essayez de choisir la classe la plus spéciale pour stocker le sélecteur

L'une des principales raisons de réduire l'efficacité du système est que nous utilisons le. classe d'étiquette Trop de sélecteurs. En ajoutant une classe à l'élément, nous pouvons subdiviser la catégorie en classes de classe, afin de ne pas perdre de temps à faire correspondre trop de sélecteurs pour une seule balise.

* Refusé - treeitem[mailfolder="true"] > treerow > treecell { }

* Recommandé - .treecell-mailfolder { }

Éviter le sélecteur de descendants

9. 🎜>
Le sélecteur descendant est le sélecteur le plus consommateur de ressources en CSS. C'est vraiment très gourmand en ressources, surtout lorsque le sélecteur utilise une classe d'étiquettes ou une classe générale. Dans de nombreux cas, ce que nous voulons réellement, c'est un sous-sélecteur. Sauf indication explicite, l'utilisation de sélecteurs descendants est strictement interdite dans UI CSS.

* Pas d'accord - treehead treerow treecell { }

* Mieux, mais toujours pas bon (voir article suivant) - treehead > treerow > treecell { }

10. ne pas inclure de sous-sélecteurs dans les classes

Ne pas utiliser de sous-sélecteurs dans les classes de balises. Sinon, chaque occurrence d’un élément augmentera encore le temps de correspondance.(특히 선택자가 일치할 것 같을 때)

* 더 이상 사용되지 않음 - treehead > treerow > treecell { }

* 권장 - .treecell-header { }

11. 모든 하위 선택기 사용에 주의하세요

하위 선택기를 신중하게 사용하세요. 사용하지 않을 방법이 생각나면 사용하지 마세요. 특히 RDF 트리와 메뉴에서는 이와 같은 하위 선택기를 자주 사용합니다.

* 비승인 - treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

RDF 속성을 템플릿에 복사할 수 있다는 점을 기억하세요! 이를 활용하여 해당 속성을 기반으로 변경하려는 하위 XUL 요소에 RDF 속성을 복사할 수 있습니다.

* 사용을 권장합니다 - .tree-folderpane-icon[IsImapServer="true"] { }