Salut tout le monde! Il existe de nombreux trucs et astuces sur le style CSS. Mais pas dans cet article. Aujourd'hui, je veux parler de la façon d'utiliser CSS plus efficacement et de rendre votre plateforme plus rapide ! 1. Sélecteurs simples CSS dispose d'un large éventail d'options de codage flexibles que vous pouvez utiliser pour cibler les éléments HTML pour le style. Au fil des ans, les experts ont conseillé aux développeurs d'écrire des sélecteurs simples pour réduire la charge sur le navigateur et garder le code propre et simple. Même les sélecteurs CSS les plus complexes prennent des millisecondes à analyser, mais la réduction de la complexité réduira la taille des fichiers et facilitera l'analyse du navigateur. Ne pas: main > div.blog-section + article > * { /* Code here */ } FAIS: .hero-image { /* Code here */ } 2. CSS en ligne critique Vous pouvez intégrer des règles CSS critiques. Cela améliore les performances en : Identifier les styles essentiels utilisés par les éléments au-dessus du pli (ceux visibles lors du chargement de la page) Intégrer ce CSS critique dans une dans votre <style> <head> Chargement du CSS restant de manière asynchrone pour éviter le blocage du rendu. Cela peut être accompli en chargeant la feuille de style dans un style « d'impression » auquel le navigateur donne une priorité inférieure. JavaScript le bascule ensuite vers un style de média "tous" une fois la page chargée. <style> /* critical styles */ body { font-family: sans-serif; color: #111; } </style> <!-- load remaining styles --> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> <noscript> <link rel="stylesheet" href="/css/main.css"> </noscript> 3. Évitez @import La règle permet d'inclure n'importe quel fichier CSS dans un autre. Cela semble être un moyen raisonnable de charger des composants et des polices plus petits. Mais ce n'est pas. @import Les règles peuvent être imbriquées afin que le navigateur doive charger et analyser chaque fichier en série. @import Plusieurs balises dans le HTML chargeront les fichiers CSS en parallèle, ce qui est considérablement plus efficace, en particulier lors de l'utilisation de HTTP/2. <link> Ne pas: /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css"); FAIS: <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css"> 4. Précharger les fichiers CSS La fournit un attribut de préchargement facultatif qui peut démarrer un téléchargement immédiatement plutôt que d'attendre la véritable référence dans le code HTML. <link> <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" /> 5. Rendu progressif Plutôt que d'utiliser un seul fichier CSS à l'échelle du site, est une technique qui définit des feuilles de style individuelles pour des composants distincts. Chacun est chargé immédiatement avant qu'un composant ne soit référencé dans le HTML. le rendu progressif Chaque bloque toujours le rendu, mais pour un temps plus court, car le fichier est plus petit. La page est utilisable plus tôt, car chaque composant s'affiche en séquence ; le haut de la page peut être visualisé pendant le chargement du contenu restant. <link> <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body> 6. Utiliser le rendu Media Query Un seul concaténé et minifié profitera à la plupart des sites, mais les sites qui nécessitent une quantité importante de styles d'écran plus grands pourraient diviser les fichiers CSS et les charger à l'aide d'une requête multimédia. <!-- core styles loaded on all devices --> <link rel="stylesheet" href="core.css"> <!-- served to screens at least 40em wide --> <link rel="stylesheet" media="(min-width: 40em)" href="40em.css"> <!-- served to screens at least 80em wide --> <link rel="stylesheet" media="(min-width: 80em)" href="80em.css"> 7. Adoptez des images SVG Les graphiques vectoriels évolutifs (SVG) sont généralement utilisés pour les logos, les graphiques, les icônes et les diagrammes plus simples. Plutôt que de définir la couleur de chaque pixel comme les bitmaps JPG et PNG, un SVG définit des formes telles que des lignes, des rectangles et des cercles en XML. Les SVG plus simples sont plus petits que les bitmaps équivalents et peuvent évoluer à l'infini sans perte de définition. Un SVG peut être intégré directement dans le code CSS en tant qu'image d'arrière-plan. Cela peut être idéal pour les icônes plus petites et réutilisables et évite les requêtes HTTP supplémentaires. Exemple SVG : <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg> Exemple d'utilisation SVG : .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; } 8. Styliser les SVG avec CSS Les SVG peuvent être intégrés directement dans un document HTML. Cela ajoute les nœuds SVG directement dans le DOM. Par conséquent, tous les attributs de style SVG peuvent être appliqués à l'aide de CSS. SVG dans DOM : <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body> Styles SVG : circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; } Le volume de code SVG intégré est réduit et les styles CSS peuvent être réutilisés ou animés si nécessaire. Notez que l'utilisation d'un SVG dans une ou comme image d'arrière-plan CSS signifie qu'ils sont séparés du DOM et que le style CSS n'aura aucun effet. <img> 9. Évitez l'encodage Base64 Vous pouvez encoder des images en chaînes base64, que vous pouvez utiliser comme URI de données dans les balises HTML et les arrière-plans CSS. <img> Cela réduit le nombre de requêtes HTTP, mais nuit aux performances CSS : Les chaînes base64 peuvent être 30 % plus grandes que leur équivalent binaire. les navigateurs doivent décoder la chaîne avant qu'une image puisse être utilisée, et modifier un pixel de l'image invalide l'ensemble du fichier CSS. N'envisagez l'encodage base64 que si vous utilisez de très petites images qui changent rarement et où la chaîne résultante n'est pas beaucoup plus longue qu'une URL. Ne pas: .background { background-image: url('data:image/jpg;base64,ABC123...'); } FAIS: .svgbackground { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>'); } 10. Petits conseils Remplacer les images par des effets CSS - définir une "image" à l'aide de code CSS utilise considérablement moins de bande passante et est plus facile à modifier ou à animer ultérieurement. Utilisez des techniques de mise en page modernes - et . Flexbox Grid Utilisez les animations CSS - et seront toujours plus rapides que JavaScript. les transitions les animations Évitez les propriétés coûteuses - certains CSS nécessitent plus de traitement que d'autres. border-radius box-shadow text-shadow opacity transform filter position: fixed backdrop-filter background-blend-mode PS Merci d'avoir lu ! Plus d'articles sur le développement frontend : Les 9 meilleurs conseils pour améliorer les performances de React Quelques petits secrets HTML, CSS dans un article Principaux conseils et meilleures pratiques HTML 5 et CSS 3 moins connus Les 12 meilleurs conseils moins connus pour les meilleures pratiques JavaScript
