Cet article présente principalement l'optimisation des performances lors de l'écriture de CSS et un résumé des suggestions d'optimisation nécessitant une maintenance élevée, y compris des points de discussion populaires tels que les images de sprite et les paramètres de taille. Les amis dans le besoin peuvent se référer à

Ce mot. est très populaire de nos jours, et c'est aussi une étape du "comment bien le faire" que tout développeur doit passer après avoir "savoir" et "être capable de le faire". Les performances concernent l'expérience utilisateur sur différents appareils et différentes conditions de réseau. Elle est également influencée par de nombreux facteurs. Cet article explique comment atteindre des performances élevées en CSS.

CSS hautes performances

Les problèmes de performances du HTML et du CSS eux-mêmes ne sont pas exceptionnels dans l'optique d'améliorer la lisibilité et la maintenabilité, si le code peut être exécuté Et. plus la vitesse d’analyse est rapide, c’est la cerise sur le gâteau.

1. Utilisez des sélecteurs CSS efficaces

En termes simples, un sélecteur CSS qui peut être rapidement analysé et mis en correspondance par le navigateur est un sélecteur efficace.

Nous devons d'abord savoir comment le navigateur analyse les CSS

Par exemple :

.nav ul.list li p{}

Copier après la connexion

Notre pensée commune est de trouver la navigation en première classe , puis recherchez le ul contenu dans la classe, puis recherchez tous les p dans tous les li des descendants de list dans ul. Bref, de gauche à droite. Mais est-ce le cas ? Quoi? Quoi? ~

La vérité est le contraire ! Qu'est-ce que ça veut dire? C'est-à-dire qu'il ne commence pas par le premier et ne rétrécit pas lentement la portée, mais commence par la case "strie" p, ce qui équivaut à un parcours, puis trouve li, et ainsi de suite. sans que je la décrive. Il est important de comprendre ce principe. Des sélecteurs efficaces signifient une correspondance plus rapide et moins de recherches. Par conséquent, lorsque nous définissons le sélecteur, nous devons minimiser le nombre de premières correspondances et minimiser le nombre total de recherches correspondantes.

Les explications ci-dessus suivent exactement ces principes

(1) Évitez d'utiliser des caractères génériques

(2) Évitez d'utiliser des sélecteurs de balises et des sélecteurs d'attributs uniques comme sélecteurs de clé

(3) N'ajoutez pas de noms de balises avant le sélecteur d'identifiant

(4) Essayez de ne pas définir trop de niveaux dans le sélecteur. Moins il y a de niveaux, cela réduit également la complexité des structures CSS et DOM. le degré de couplage améliore la maintenabilité du style

(ps : Honnêtement, avez-vous commis l'un des "tabous" ci-dessus ?~)

Pour résumer, ce qui est dit ci-dessus, il y en a deux points à savoir. Le premier point est mentionné au début. Les problèmes de performances du CSS ne sont pas importants, en particulier dans les petits projets, donc la maintenabilité vient en premier. Bien que le sélecteur d'identifiant soit défini, il présente l'avantage d'être unique. mais une page ne peut définir qu'un identifiant unique. Définir trop d'identifiants réduira la réutilisation et rendra la maintenance plus difficile, il n'est donc pas recommandé d'utiliser plusieurs identifiants.

2. Traitement d'images lié au CSS

Dans les pages Web d'aujourd'hui, tout le monde connaît la proportion d'images et son importance. Alors, comment bien gérer les images et comment définir des styles pour les images afin que les utilisateurs puissent avoir une meilleure expérience lors de l'ouverture de pages Web ? Voici quelques avis :

(1) Ne définissez pas la taille de l'image

Dans mon expérience professionnelle personnelle, il y a eu de telles situations, j'ai suivi le design. brouillon Après avoir terminé la page et l'avoir remise au backend pour test, il est soudainement venu vers moi et m'a dit : Salut, regarde, quelque chose ne va pas ici Quand je l'ai vu, c'était mauvais, l'image n'était pas à sa place, et puis. Je me suis souvenu que je n'avais pas défini la largeur et la hauteur de l'image (vous n'avez pas besoin de la couper directement à partir du brouillon), puis vous avez défini la largeur et la hauteur dans le style CSS comme si vous aviez commis une erreur. . J’ai donc pris cela plus tard comme un élément auquel je devrais prêter attention la prochaine fois que je créerai une page. Quand j'ai vu cet avis, j'ai su quelque chose de mieux.

Regardons l'explication. Premièrement, les concepteurs créeront des images qui dépassent la taille requise afin de rendre l'image belle. Deuxièmement, la même image peut être utilisée plusieurs fois à différents endroits de la page, par exemple. sous forme de vignettes, image normale, grande image. Voici le problème. Si la taille originale de l'image est différente de la demande réelle, il y aura des problèmes de performances lors de l'utilisation. L'utilisation de la mise à l'échelle du style entraînera un processus de calcul supplémentaire au processeur, augmentera le temps de rendu de l'image dans le navigateur. et le processus de transmission réseau utilisera également plus de bande passante et augmentera le temps de téléchargement. Par conséquent, la meilleure pratique consiste à créer un ensemble d’images distinct pour les parties requises afin qu’elles puissent être affichées plus rapidement lors du chargement initial de la page.

(2) Utilisez CSS "Sprite Picture"

consiste à fusionner des images dispersées en une grande image et à utiliser CSS pour le positionnement en arrière-plan. L’avantage est de réduire le nombre de requêtes et d’améliorer la vitesse globale de chargement des images.

Mais cela présente aussi certains inconvénients :

Par exemple, fusionner plusieurs images en une grande image nécessite un calcul précis et un ajustement minutieux de la position. Une simple fabrication manuelle est une affaire très compliquée. (Heureusement, il existe certains outils qui peuvent nous aider à le faire maintenant)

De plus, le processus de maintenance est compliqué. Essayez de conserver les images existantes dans leurs positions d'origine. Si la taille de l'image d'arrière-plan change, la zone d'origine ne peut pas être placée, alors vous devez abandonner. Si vous devez la modifier dans sa position d'origine, les styles d'image restants devront être modifiés, ce qui est un processus très fastidieux. Il est préférable de placer les images nouvellement ajoutées à la fin.

De plus, une mauvaise utilisation peut entraîner des problèmes de performances. Le plus gros problème est la consommation de mémoire. Si vous ne faites aucune planification pendant le processus de production et que vous les placez au hasard, les images peuvent devenir assez grandes et occuper beaucoup de mémoire.

Voici quelques bonnes pratiques :

1. Appliquer la technologie de sprite CSS plus tard dans le projet

Parce qu'en général, pendant le processus de développement, les images seront fréquemment modifiées ou remplacées. Si la technologie des sprites est utilisée à ce stade, cela augmentera considérablement les coûts de développement.

2. Organisez correctement les images "Sprite"

Si vous voulez mettre toutes les images sur une seule image, il y aura quelque chose qui ne va pas, et ce ne sera pas le cas. facile à entretenir. Très pratique. Les images d’arrière-plan organisationnelles sont principalement divisées en fonction des modules et des styles d’image d’arrière-plan. Par exemple, les vignettes à afficher sont placées ensemble et les icônes telles que les commentaires, les mentions J'aime, les flèches haut et bas sont placées ensemble, etc.

3. Contrôlez la taille et la taille de l'image "Sprite"

Parce que les images de grande taille occuperont beaucoup de mémoire, elles doivent être contrôlées de manière appropriée. taille raisonnable. Longueur et largeur recommandées La multiplication ne dépasse pas 2500 et la taille est inférieure à 200 Ko

4. Contrôlez raisonnablement la distance entre les unités de l'image d'arrière-plan et la position de l'image d'arrière-plan

Ce principe est d'éviter que lorsque la taille est inférieure à la taille de l'élément, d'autres images d'arrière-plan non pertinentes apparaissent dans la zone

5. Utilisez des outils pertinents pour traiter les sprites

3. Réduire la quantité de code CSS

Un moyen important d'améliorer la vitesse de chargement globale du site Web consiste à augmenter la vitesse de transmission réseau des fichiers de code. Outre la compression du code, la rationalisation du code est également un moyen.

(1) Définir des règles CSS concises

Fusionner les règles associées et définir des valeurs d'attribut concises

Les règles de fusion font référence à des éléments comme font-family , la taille de la police, le poids de la police, etc. peuvent être combinés en police. Les valeurs d'attribut simples, telles que la valeur de couleur : couleur, #33AAFF peuvent être simplifiées en #3AF, etc.

(2) Fusionner les mêmes définitions

Il y a toujours des modules dans la page Web qui ont une grande similitude, de sorte que les mêmes parties peuvent partager une définition et différentes parties Définissez-le séparément. Et en CSS, de nombreuses propriétés peuvent être héritées, il suffit donc de les définir une seule fois à l'endroit approprié.

(3) Supprimer les définitions invalides

Les définitions invalides n'affecteront pas l'affichage des fonctions de la page, mais affecteront les performances d'affichage de la page et augmenteront la quantité de code. , augmente également le temps nécessaire au navigateur pour analyser le code. Les définitions non valides incluent les règles non valides et les attributs de style non valides, qui sont généralement introduits au cours du processus de développement et ne peuvent pas être jugés intuitivement. Dans ce cas, vous pouvez utiliser des outils, tels que les propres outils de Chrome, pour rechercher des styles non valides dans CSS. .

Autres pratiques CSS hautes performances

(1) Évitez d'utiliser @import

Les nouveaux fichiers de style importés par @ l'importation empêchera les téléchargements parallèles de pages, ce qui augmente le temps de chargement global du fichier.

(2) Évitez d'utiliser des styles uniques du navigateur IE : filtres d'image et expressions CSS

L'utilisation de filtres d'image bloquera le navigateur lors du chargement de l'image. et le rendu, et ajoutera une surcharge de mémoire supplémentaire. La fonction des expressions CSS est de définir dynamiquement les propriétés CSS. Les expressions ont non seulement des problèmes de compatibilité, mais également des problèmes de performances. Par exemple, lorsque la taille du navigateur ou la fenêtre change, le navigateur effectue des calculs fréquents et consomme beaucoup de performances. Le même effet peut être obtenu avec javascript.

Meilleures pratiques CSS3

Vérifier la prise en charge du navigateur

Dans le processus d'utilisation de CSS3, nous recevons le plus de questions Une question pourrait être : Comment est la compatibilité ? En aucun cas, avec le développement de CSS, il peut fournir une meilleure solution à de nombreux problèmes difficiles à résoudre que nous avons rencontrés auparavant, ce qui nous amène à nous demander si nous pouvons le faire. Côté PC, il y a la très critiquée série IE, qui sera bien meilleure côté mobile, mais certaines ne sont toujours pas très bonnes. Par conséquent, vérifier la prise en charge du navigateur est presque devenu indispensable. Si les fonctionnalités que vous utilisez sont uniquement décoratives et n'affectent pas la situation globale, vous n'avez pas besoin de considérer trop de problèmes de compatibilité. Si cela est dû à des exigences de conception et doit prendre en charge tous les navigateurs, vous devez y prêter une attention particulière. Les développeurs peuvent choisir des outils en ligne tels que caniuse.com, css3 Click Chart, le contenu CSS et la compatibilité du navigateur pour vérifier la compatibilité.

Ajoutez le préfixe de navigateur nécessaire

Pour les amis qui viennent de commencer à utiliser CSS, si vous voyez occasionnellement quelque chose comme : "-webkit-" dans le code source d'un site Web, -moz-" Attendez, vous trouverez peut-être ça étrange, qu'est-ce que c'est ? Ils correspondent aux préfixes ajoutés par les différents fabricants de navigateurs.

Étant donné que le navigateur ne peut implémenter qu'une première version de la définition standard lorsqu'il prend en charge CSS3, il ne prend donc pas encore en charge la méthode d'écriture standard. L'ajout de préfixes de navigateur au code est également une décision impuissante, ce qui rendra le problème. coder plus. Plus difficile à maintenir.

Mais il n'est pas nécessaire d'être compatible avec tous les navigateurs pour être "parfait". Généralement, vous pouvez décider de l'ajouter ou non en fonction de la part de marché du navigateur ou de la version du système et de la proportion. des utilisateurs cibles utilisant les préfixes du navigateur et en ajoutant plusieurs préfixes. Et je crois qu'avec le développement progressif et les mises à niveau et mises à jour continues des systèmes et des navigateurs, la nécessité d'utiliser des préfixes diminuera.

Le problème revient. Puisqu'il est nécessaire d'ajouter les préfixes nécessaires, cela signifie que parfois c'est encore nécessaire. S'il faut l'ajouter, ne serait-ce pas assez gênant ? La même règle doit être écrite trois ou quatre fois et peut être utilisée à plusieurs endroits. Que devons-nous faire ? Ne vous inquiétez pas, voici quelques contre-mesures :

1. Utilisez des outils pour ajouter des préfixes de navigateur pour les attributs CSS

Préfixr, qui peut traiter le code dans les étapes ultérieures du développement. Il ajoutera automatiquement les préfixes requis et supprimera les préfixes inutiles.

Autoprefixer, si vous souhaitez plus d'autonomie dans le processus de développement, vous pouvez utiliser cet outil. Les développeurs peuvent personnaliser la gamme de support du navigateur. Il dispose également de plusieurs modes d'utilisation et peut être intégré dans plusieurs environnements de développement. Plusieurs outils sont également disponibles : cssFx, *css Agent* et -prefix-free.

2. Utilisez la technologie de prétraitement CSS

Les technologies actuellement populaires incluent Sass et moins. La méthode spécifique consiste à définir un style de modèle basé sur les caractéristiques du style CSS3. L’avantage est le suivant : cela évite beaucoup de duplication de code et ne nécessite de conserver qu’une seule définition.

3. Ne pas trop ajouter de préfixes de navigateur

Afin d'être compatible avec tous les navigateurs, certains développeurs ajoutent les préfixes de tous les navigateurs au code CSS non Quoi qu'il en soit, il s'agit d'une méthode de codage négative qui ajoute trop de code répété, réduit les performances d'analyse du navigateur et augmente la complexité. En même temps, certains attributs préfixés peuvent ne pas être pris en charge par le navigateur.

4. Ajoutez des définitions d'attributs standard CSS3

Que sont les définitions d'attributs standard ? Aucun préfixe de navigateur n'est nécessaire. Vous avez peut-être remarqué que de nombreux endroits qui utilisent CSS3 écriront des définitions d'attributs standard à la fin. Parce que lorsque le navigateur prend en charge les attributs standard, il peut écraser la définition avec le préfixe ajouté précédemment. La définition standard des attributs en CSS3 est la définition conforme à la spécification. La définition avec le préfixe du navigateur ajouté sera progressivement éliminée au fur et à mesure que le navigateur est. mis à jour.

Bien sûr, une autre chose à noter est que certains attributs appartiennent actuellement à Only webkit ou Only firefox, il n'est donc pas nécessaire d'écrire des définitions standards et d'autres préfixes de navigateur.

Faire un bon travail de compatibilité avec les nouvelles fonctionnalités de CSS3

En matière de compatibilité, les versions inférieures d'IE seront mentionnées, comme les coins arrondis très courants , images transparentes, etc. Parfois, nous les rétrogradons, comme le filtre ou le javascript, en utilisant le dimensionnement et la transformation. Il est recommandé d'utiliser Modernizr. Ce framework contient de nombreuses solutions de compatibilité pour les nouvelles fonctionnalités CSS3.

Quelle que soit la solution utilisée, elle entraînera des pertes de performances et ne pourra pas être abusée sans aucune règle. Tout le monde doit encore peser et choisir. Recommandez un site Web avec des suggestions sur la façon d'utiliser HTML5 plus efficacement : html5please. Le site Web divise les nouvelles fonctionnalités de CSS3 en trois catégories selon la manière dont elles sont utilisées :

(1) L'utilisation directe de

contient la plupart des nouvelles fonctionnalités, et certaines fonctionnalités elles-mêmes n'affecteront pas la compatibilité, comme le rayon de bordure, les requêtes multimédias, etc. Certaines doivent ajouter un traitement de rétrogradation, comme plusieurs images d'arrière-plan, vous devez définir une seule image d'arrière-plan ou une seule couleur d'arrière-plan comme alternative.

(2) À utiliser avec prudence

Cette partie est principalement un problème de performances, comme l'ombre de la boîte appliquée aux éléments qui occupent une grande surface, lorsque la page défile ou la souris survole. Cela entraînera des problèmes de performances considérables.

(3) Évitez d'utiliser

car ils ne peuvent prendre en charge qu'un certain navigateur, tel que la réflexion, vous devez donc éviter de l'utiliser.

Pour résumer, CSS peut améliorer les performances de nombreuses manières, mais nous pouvons facilement les ignorer car leur impact ne semble pas si évident, et beaucoup de gens peuvent le faire. C'est pratique. Vous pouvez utiliser vos talents librement et écrire. tout ce que vous voulez, tant que cela peut produire l'effet. C'est aussi un peu négatif. Avez-vous oublié votre objectif d'être un excellent ingénieur ? ! ~~Bien que les règles CSS ne soient pas difficiles, il n'est pas facile de bien les écrire. Vous devez quand même rechercher la perfection. S'il vous plaît, écrivez-le et chérissez-le ! ~

Css à haute maintenance

Quelles sont les caractéristiques du CSS ?

En termes simples, méthodes d'utilisation : en ligne, intégré, externe, importation. Comment styliser les éléments : nom de la balise de l'élément, nom de la classe, identifiant, divers sélecteurs et combinaisons de ceux-ci. Par conséquent, il est très flexible s’il n’y a pas de restrictions standard, cela entraînera certainement de la confusion et des difficultés dans la maintenance du code CSS.

Comment organiser efficacement le code CSS ?

Une structure claire et des modules distincts. Une structure organisationnelle raisonnable du code peut améliorer la réutilisabilité et la maintenabilité du code et réduire la complexité du développement. Alors comment l’organiser ?

La première consiste à organiser les fichiers de codes, qui peuvent être divisés en deux grandes catégories : les catégories générales et les catégories métiers. Ensuite, il existe un fichier à réinitialiser. Les noms courants sont réinitialiser, par défaut, normaliser, etc.

Il existe un fichier utilisé pour stocker les modules communs et certains styles de base, souvent nommés mod, common, etc., tels que les boîtes de dialogue de page, les boîtes d'invite, les en-têtes, les fonds, les barres latérales, etc., qui seront affiché sur plusieurs pages Utilisé pour référencer chaque page de cette manière afin d'améliorer la réutilisation du code.

De plus, un fichier est requis pour stocker les styles compatibles avec l'ancien navigateur IE. Cela présente deux avantages :

1. Réduisez la charge de chargement des fichiers de style pour les navigateurs non IE.

2. Si vous décidez de ne plus prendre en charge l'ancienne version d'IE à l'avenir, vous n'avez besoin de modifier qu'un seul fichier, et il n'est pas nécessaire de rechercher plusieurs fichiers à modifier. Bien sûr, lorsqu'il s'agit de problèmes de compatibilité de navigateur, un principe est de voir s'il existe d'autres solutions qui ne présentent pas de problèmes de compatibilité. Si ce n'est pas le cas, placez les parties qui doivent être compatibles dans un fichier séparé.

Les fichiers de style CSS restants sont utilisés pour les modules métier. Les fichiers de style des différents modules sont placés dans des dossiers différents. En principe, les fichiers de style de chaque module ne doivent pas être trop volumineux.

Cela peut poser un problème. Une page ne doit-elle pas importer beaucoup de fichiers ? N'y a-t-il pas beaucoup plus de requêtes http lors du chargement de la page ? En fait, il n'y a pas de contradiction. La division des fichiers vise uniquement à faciliter le développement et la maintenance. Lors de la publication, des outils seront utilisés pour compresser et fusionner plusieurs fichiers en un seul, il n'y a donc pas lieu de s'inquiéter de l'introduction de plusieurs fichiers.

Ce qui précède concerne l'organisation des fichiers, les déclarations de style doivent donc également être organisées en fichiers selon certaines règles. Par exemple, selon le niveau des éléments du module, s'ils sont au même niveau, alors selon la position de l'élément sur la page, de haut en bas, ou de gauche à droite s'il y a plusieurs éléments. partageant la même déclaration, le style commun doit être déclaré en premier. Si vous pensez que cela ne suffit pas, vous pouvez utiliser des méthodes plus avancées, telles que less et sass, qui donnent des fonctionnalités dynamiques au langage CSS, telles que les variables, l'héritage, les opérations, les fonctions, etc.

Ce qui précède est discuté sous plusieurs directions générales. Parlons de certains points ci-dessous

Utilisez la réinitialisation CSS pour unifier l'effet d'affichage du navigateur

Premier de Toutes les balises HTML ont des styles originaux, mais le problème est que dans différents navigateurs, les styles par défaut des balises sont différents. Certaines de ces différences ont causé des problèmes de développement. Dès 2004, quelqu'un a créé le premier fichier de style de réinitialisation. appelé undohtml.Css Par la suite, il y a eu une variété de plans de réinitialisation, dont l'un était "chaud pendant un certain temps". Ce plan contient un total d'une ligne de code *{margin: 0; padding: 0;} . Les styles de marge et de remplissage par défaut de toutes les étiquettes ont été réinitialisés, mais un inconvénient est que cela augmente la complexité du développement ultérieur et ne peut pas améliorer efficacement l'efficacité globale du développement. De plus, les performances de cette solution sont également médiocres, ce qui affectera les performances de rendu des pages lorsqu'il y a de nombreux éléments de page. Par conséquent, les gens explorent progressivement de meilleures méthodes de réinitialisation. Il existe actuellement de nombreuses solutions de réinitialisation populaires, notamment Reset CSS développé par Eric Meyer et YUI Reset CSS développé par l'équipe de technologie frontale de Yahoo. En fait, il n'existe pas de solution unique adaptée à tous les projets, il est donc préférable de se référer aux solutions d'autres personnes, puis de concevoir une solution adaptée à votre propre projet.

Les points suivants doivent être pris en compte :

(1) Les nouvelles balises HTML5 doivent réinitialiser leur style d'affichage car leur style d'affichage par défaut n'est pas défini dans les versions inférieures d'IE.

(2) Les différences entre les balises padding, margin et border dans les navigateurs sont principalement causées par les styles par défaut liés à ces trois styles, mais cela ne nécessite pas de réinitialiser la marge, le padding et la bordure de tous les éléments. Cela devrait être basé sur la situation réelle.

(3) Les paramètres de police