精简CSS代码，提升前端性能实战优化技巧

在上篇文章前端性能优化秘籍：掌握CSS选择器的正确姿势中，介绍了CSS选择器的使用方式，下面了解下优化技巧。CSS，作为构建网页视觉表现的核心技术之一，它的优化对于提升前端性能尤为关键。然而，随着项目规模的扩大和功能的增多，CSS代码往往会变得冗长和难以维护，这不仅增加了页面的加载时间，还可能影响页面的渲染效率和用户体验。精简CSS代码，并不是简单地减少代码行数，而是一个全面审视和重构CSS使用方式的过程。它要求我们深入理解CSS的选择器、属性和布局原理，通过精心设计和优化，去除多余的代码，减少浏览器的解析负担，从而提升页面的加载速度和渲染性能。本文将探讨一系列实用的CSS精简技巧和最佳实践，从基础的代码编写规范到高级的性能优化策略，旨在帮助开发者深入理解如何通过精简CSS代码来提升前端性能。我们将一起学习如何构建更高效、更快速且易于维护的Web前端项目。?精简CSS代码是前端性能优化的重要步骤，因为它直接关系到页面加载时间和渲染效率。以下是一些实用的技巧来精简CSS代码并提升前端性能：一、使用简写属性利用CSS的简写属性，例如`margin`、`padding`、`border`等，以减少代码量。CSS简写属性可以帮助你更高效地编写样式代码。以下是一些常用的CSS简写属性示例：`margin`和`padding`的简写： 1/*?一个值：所有边都使用这个值?*/ 2 3margin:?10px; 4 5padding:?10px; 6 7/*?二个值：第一个值是上下，第二个值是左右?*/ 8 9margin:?5px10px;1011padding:?5px10px;1213/*?三个值：上，左右，下?*/1415margin:?1px2px3px;1617padding:?1px2px3px;1819/*?四个值：上，右，下，左?*/2021margin:?1px2px3px4px;2223padding:?1px2px3px4px;`border`的简写：1/*?一次性设置border的宽度、样式和颜色?*/2border:?1px?solid?#000;`background`的简写：1/*?一次性设置背景的颜色和图片，可以设置多个背景图片?*/2background:?#fffurl(image.png)?no-repeat?center;`font`的简写：1/*?一次性设置字体的样式、粗细、大小和行高?*/2font:?italic?bold?16px/1.5'Arial',?sans-serif;`list-style`的简写：1/*?一次性设置列表的图片、位置和样式?*/2list-style:?square?inside?url(bullet.png);简写属性可以帮助你减少代码量，并使样式更加集中和清晰。二、避免重复样式?审查CSS代码，删除重复的选择器和属性声明。?合理使用继承（inheritance）和组合（composition）。例如，假设我们有一个网站，其中的按钮在多个页面上具有相同的基本样式，但在某些情况下可能需要一些额外的样式。我们可以这样写CSS：基础按钮样式：1.button?{2?padding:?10px20px;?3?border:?1px?solid?#000;4?text-align:?center;5?cursor:?pointer;6}?特殊按钮样式：1.button--special?{2background-color:?#f00;3color:?#fff;4}在HTML中，我们可以这样使用：1普通按钮2特殊按钮这种方法通过合理使用类的组合，避免了在普通按钮上应用`--special`类所带来的不必要的重写，从而减少了代码冗余。三、压缩CSS使用工具如CSSNano、Clean-CSS或Webpack的CSS压缩插件来移除空格、注释和换行符，减小文件大小。例如，使用Webpack的CSS压缩插件css-minimizer-webpack-plugin 来完成 CSS 样式文件的压缩。要使用该插件，必须现先在本地安装它：1npm?install?css-minimizer-webpack-plugin?--save-dev只安装没有用，要使用该插件能够生效，我们必须在 webpack.config.js 配置文件进行配置。需要注意，这个插件不是在 plugin（插件） 中进行配置，而是在optimization（优化）中进行配置。1//?webpack.config.js2const?CssMinimizerPlugin=?require("css-minimizer-webpack-plugin");3module.exports?=?{4optimization:?{5minimizer:?[6new?CssMinimizerPlugin(),?7],8},9}编译打包，打开 .css样式文件，发现 CSS 样式文件已经被压缩。默认情况下仅在生产环境开启 CSS 优化。如果还想在开发环境下启用 CSS 优化，需要在 webpack.config.js 配置文件中将 optimization.minimize 设置为 true。1const?CssMinimizerPlugin=?require("css-minimizer-webpack-plugin");2module.exports?=?{3optimization:?{4minimizer:?[5new?CssMinimizerPlugin(),6],?7minimize:true,8},9}四、移除未使用的CSS使用Chrome DevTools的Coverage工具或其他类似工具来分析并移除未使用的CSS代码。并利用purgecss去除多余的css。安装`purgecss-webpack-plugin`：1npm?i?purgecss-webpack-plugin?-D其次，需要安装`mini-css-extract-plugin`1npm?i?mini-css-extract-plugin?-D最后，它还需要`glob`（一般自带，不用安装），或者`glob-all`（推荐使用）。1npm?i?glob-all?-D基本配置：在这个配置中，需要指定`Purgecss`的`paths`，这个`glob-all`可以设置多条路径，更加方便一些。这些路径是用来指定`css`使用的位置途径的。也就是说`css`删减的标准。运行结果：为了显示它的特别效果。用了一个`bootstrap`框架，来看看它的`css`清理效果。就使用一个小组件，目标就是仅仅保留这个小组件的`css`存在，以最终达到瘦身的目的。代码如下：1//?`npm`安装`bootstrap`:2npm?i?bootstrap?-D34//?`./src/main.js`引入`bootstrap.css`:5import'bootstrap/dist/css/bootstrap.css';67//?`./html/index.html`模版，引入个按钮用例：8Success执行结果对比：操作size`bootstrap.css`原版193kb?开启`sourcemap`关闭`purgecss`483kb开启`sourcemap`和`purgecss`?4.78kb关闭`sourcemap`开启`purgecss`4.59kb五、使用CSS重置或归一化采用CSS重置（reset）或归一化（normalize）来减少浏览器默认样式的差异。以下是一个简单的CSS重置示例，它会移除常见元素的默认margin和padding，并设置了默认字体和背景：CSS Reset： 1html,?body,?div,?span,?applet,?object,?iframe,h1,?h2,?h3,?h4,?h5,?h6,?p,?blockquote,?pre,a,?abbr,?acronym,?address,?big,?cite,?code,del,?dfn,?em,?img,?ins,?kbd,?q,?s,?samp,small,?strike,?strong,?sub,?sup,?tt,?var,b,?u,?i,?center,dl,?dt,?dd,?ol,?ul,?li,fieldset,?form,?label,?legend,table,?caption,?tbody,?tfoot,?thead,?tr,?th,?td,article,?aside,?canvas,?details,?embed,?figure,?figcaption,?footer,?header,?hgroup,?menu,?nav,?output,?ruby,?section,?summary,time,?mark,?audio,?video?{ 2margin:?0; 3padding:?0; 4border:?0; 5font-size:?100%; 6font:?inherit; 7vertical-align:?baseline; 8box-sizing:?border-box;? 9/*?Ensure?padding?and?borders?are?included?in?element?sizes?*/10-webkit-font-smoothing:?antialiased;?11/*?Improve?text?rendering?on?Webkit?browsers?*/12}1314/*?HTML5?display-role?reset?for?older?browsers?*/15article,?16aside,?17details,?18figcaption,?19figure,?20footer,?21header,?22hgroup,?23menu,?24nav,?25section?{26display:?block;27}2829body?{30line-height:?1;31}3233ol,?ul?{34list-style:?none;35}3637blockquote,?q?{38quotes:?none;39}4041blockquote:before,?42blockquote:after,43q:before,?44q:after?{45content:?'';46content:?none;47}4849table?{50border-collapse:?collapse;51border-spacing:?0;52}53/*?Custom?styles?*/54body?{55font-family:?'Arial',?sans-serif;56background-color:?#fff;57color:?#333;58}六、异步加载非关键CSS对于非首屏渲染的CSS，可以异步加载，以减少首屏加载时间。在现代浏览器中，可以使用``标签的`rel="preload"`属性来异步加载非关键CSS。以下是一个示例代码： 1 2 31617 Hello?World 1819在这个例子中，``被用来异步加载`style.css`文件。当加载完成时，通过 JavaScript 的`onload`事件处理函数将`link`标签的`rel`属性从`preload`更改为`stylesheet`，这样浏览器就会应用该样式表。``标签中的``是为不支持 JavaScript 的环境准备的后备方案。七、关键CSS内联将影响首屏渲染的关键CSS内联到HTML文档的`八、代码分割对于大型应用，可以使用代码分割技术将CSS分割成多个小块，按需加载。以下是使用Sass和Webpack进行CSS分割的简单示例：安装必要的包：1npm?install?sass-loader?sass?webpack?--save-dev创建一个Sass文件，并使用@import进行分割：1//styles/main.scss2@import"variables";3@import"mixins";4@import"components/button";5@import"components/header";6@import"layout/grid";创建分割的Sass部分： 1//?styles/variables.scss 2$primary-color:?blue; 3 4//?styles/mixins.scss 5@mixin?button-style? 6{ 7/*?Button?style?*/ 8} 910//?styles/components/button.scss11@import"mixins";12.button?{?13@include?button-style;14color:?$primary-color;15}1617//?styles/components/header.scss18.header?{/*?Header?style?*/}1920//?styles/layout/grid.scss21.grid?{/*?Grid?style?*/}配置Webpack以使用split-chunks插件进行代码分割： 1//?webpack.config.js 2const?MiniCssExtractPlugin?=?require('mini-css-extract-plugin'); 3module.exports?=?{ 4entry:?'./src/index.js', 5output:?{filename:?'bundle.js',}, 6module:?{ 7rules:?[ 8{ 9test:?/.scss$/,10use:?[?11MiniCssExtractPlugin.loader,12'css-loader',13'sass-loader',14],15},16],17},18plugins:?[19newMiniCssExtractPlugin({filename:?'styles.css',}),20],21optimization:?{22splitChunks:?{23cacheGroups:?{24styles:?{25name:?'styles',26test:?/.scss$/,27chunks:?'all',28enforce:?true,29},30},31},32},33};九、利用CSS预处理器使用Sass或Less等预处理器的变量、混合（mixins）、函数等特性来提高代码复用性。Sass?变量： 1//?在Sass中，变量以$符号开始 2 3$primary-color:?#3bbfce; 4$margin:?16px; 5 6.content-navigation?{ 7border-color:?$primary-color; 8color:?darken($primary-color,?10%); 9}1011.border?{12padding:?$margin?/?2;13margin:?$margin?/?2;14border-color:?$primary-color;15}混合（Mixins）:1//?混合允许你定义一个可重用的代码块：2@mixin?border-radius($radius)?{3-webkit-border-radius:?$radius;4?-moz-border-radius:?$radius;5-ms-border-radius:?$radius;6border-radius:?$radius;7}89.box?{?@include?border-radius(10px);?}函数: 1// Sass也允许你定义自己的函数： 2@function?pow($base,?$exponent)?{ 3$result:?1; 4@for?$_?from?1?through?$exponent?{ 5$result:?$result?*?$base; 6} 7@return?$result; 8} 910.sidebar?{11width:?pow(2,?3)?*?1px;?//?8px12}Less变量: 1//?在Less中，变量也是以@符号开始： 2@primary-color:?#3bbfce; 3@margin:?16px; 4 5.content-navigation?{ 6border-color:?@primary-color; 7color:?darken(@primary-color,?10%); 8} 910.border?{11padding:?@margin?/?2;12margin:?@margin?/?2;13border-color:?@primary-color;14}混合（Mixins）1//?混合在Less中的使用类似于Sass：2.border-radius(@radius)?{3-webkit-border-radius:?@radius;4?-moz-border-radius:?@radius;5-ms-border-radius:?@radius;6border-radius:?@radius;7}89.box?{?.border-radius(10px);?}函数1// Less中的函数通常是内置的，用于处理颜色和数学运算等：2@base:?5%;3.calculate(@value)?{4width:?(@value?*?@base);5}67.container?{8.calculate(20);?//?计算后的宽度为?100%9}在这些例子中，我们可以看到Sass和Less都提供了强大的工具来帮助开发者编写更加高效和模块化的CSS代码。通过使用变量、混合和函数，可以减少重复代码，使样式表更加易于维护和扩展。十、总结除上述之外，我们还可以通过其它方法来进行优化，例如：利用CDN服务分发CSS文件，并设置合适的缓存策略。通过构建工具自动化压缩、合并和优化CSS的过程。定期使用PageSpeed Insights、Lighthouse等工具监测网站性能，识别CSS性能瓶颈。通过实施这些策略，可以显著减少CSS代码的体积，加快页面加载速度，提升用户体验。感谢阅读本文，希望它能为你提供一些启发和帮助。欢迎留言分享您的看法和经验。上一篇：前端性能优化秘籍：掌握CSS选择器的正确姿势