Analyse spécifique de l'interprétation CSS de l'optimisation des performances frontales

Évitez d'utiliser @import

L'utilisation de @import dans des fichiers CSS externes ajoutera un délai supplémentaire lors du chargement de la page.

Un fichier CSS first.css contient le contenu suivant : @import url("second.css"). Le navigateur télécharge, analyse et exécute d'abord first.css, puis découvre et traite le deuxième fichier second.css. La solution simple consiste à utiliser la balise 2cdf5bf648cf2f33323966d7f58a7f3f à la place de @import, qui télécharge les fichiers CSS en parallèle, accélérant ainsi le chargement des pages

Éviter les filtres AlphaImageLoader

Qu'est-ce qu'AlphaImageLoader ? Un attribut unique d'IE, utilisé pour corriger l'effet translucide des images PNG affichées dans les versions inférieures à 7.0.

Problème : lorsque le navigateur charge une image, il met fin au rendu du contenu et gèle le navigateur. Il sera calculé une fois pour chaque élément (pas seulement l'image), augmentant ainsi la consommation de mémoire.

Solution : 1. Remplacez-le par le format PNG8, qui peut bien fonctionner dans IE.

2. Il est vraiment nécessaire d'utiliser AlphaImageLoader et d'utiliser underscore_filter pour invalider les utilisateurs d'IE7 ou supérieur.

Évitez les expressions CSS

Exemple :

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

Les expressions CSS sont un moyen puissant (mais dangereux) de définir dynamiquement des propriétés CSS. Internet Explorer prend en charge les expressions CSS à partir de la version 5.

Problème : Il doit être recalculé lorsque la page est affichée, zoomée, défilée ou déplacée avec la souris. Ajoutez un compteur à une expression CSS pour suivre la fréquence à laquelle l'expression est évaluée. Vous pouvez facilement réaliser plus de 10 000 calculs en déplaçant simplement la souris sur la page.

Solution : La manière de réduire le nombre de calculs d'expressions CSS consiste à utiliser une expression unique, qui attribue le résultat à l'attribut de style spécifié lors de sa première exécution et utilise cet attribut pour remplacer le Expression CSS. Si les propriétés de style doivent changer dynamiquement au cours des cycles de page, l'utilisation de gestionnaires d'événements au lieu d'expressions CSS est une option viable. Si vous devez utiliser des expressions CSS, n'oubliez pas qu'elles sont évaluées des milliers de fois et peuvent avoir un impact sur les performances de votre page.

Évitez les sélecteurs de caractères génériques

Au début de l'apprentissage du CSS, nous utilisions souvent *{margin: 0; padding: 0;} lors de la création de pages Web pour éliminer l'étiquette par défaut. Mise en page et rendu de la même balise dans différents navigateurs.

Et on voit parfois la façon dont est écrit reset.

body,p,h1,h2,h3,h4,h5,input,select,textarea,table{margin：0；padding：0;}

Pourquoi ces personnes écrivent-elles ainsi ? Nous obtiendrons la réponse ci-dessous

Exemple :

#header > a {font-weight:blod;}

Le sélecteur CSS correspond aux règles de droite à gauche. Cette déclaration est donc implémentée dans le navigateur comme :

Le navigateur parcourt tous les éléments de la page -> Si l'identifiant de son élément parent est l'en-tête.

Exemple :

#header  a {font-weight:blod;}

Cet exemple consomme plus de temps que le précédent

Parcourez la page Tous les éléments dans ——>Traverse vers ses supérieurs jusqu'au nœud racine

Exemple :

.selected * {color: red;}

Correspond à tous les éléments du document -> éléments avec classe sélectionnés niveau par niveau, jusqu'au nœud racine du document

Nous devrions donc éviter d'utiliser le sélecteur de caractères génériques .

Supprimer les styles sans correspondance

Premièrement, la suppression des styles inutiles peut réduire la taille des fichiers de style et accélérer le téléchargement des ressources

Deuxièmement, pour les navigateurs, toutes les règles de style seront analysées et indexées, même si la page actuelle n'a pas de règles correspondantes ; Supprimez les règles sans correspondance, réduisez les éléments d'index et accélérez la recherche dans le navigateur ;

Évitez les sélecteurs d'attributs à règle unique

Le navigateur correspond à tous les éléments——> la valeur est égale à "#index" ——> Correspond aux éléments dont la classe est sélectionnée vers le haut, respectivement, jusqu'au nœud racine du document.

Évitez les sélecteurs d'attributs de type régulier

La correspondance d'expressions régulières sera beaucoup plus lente que la correspondance basée sur les catégories. Dans la plupart des cas, nous devrions essayer d'éviter d'utiliser la syntaxe *=, |=, ^=, $= et ~= pour les sélecteurs d'attributs.

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!