性能优化（CSS优化）

高质量的CSS代码体现在三个方面：可读性和可维护性和高性能。对于“前端工程师”来说如何平衡“追求高性能”和“可维护性”是很值得思考的问题。

 

   在本次博客中，将从以下八个方面来学习CSS性能优化中的各种技巧，以便自己将来可能用到好查阅，也分享给广大学习前端的小白朋友们。

  （1）属性缩写

  （2）语法压缩

  （3）图片压缩

  （4）选择器优化

  （5）CSS模块化

  （6）压缩工具

  （7）CSS sprite技术

  （8）性能评估

    这些性能优化技能也是“真正的前端工程师”和“野生网页设计师”的重要分水岭之一。

   1：属性缩写

        对于属性缩写，从四个方面进行优化。

        （1）盒模型缩写

                 在CSS盒子模型中，有3个重要的属性：border（边框），padding（内边距），margin（外边距）。

                 边框属性，需要定义三个方面：边框的宽度（border-width），边框的外观（border-style），边框的颜色（border-color）。对于边框，有2种写法，完整形和缩写形式。

                 ①完整形式

                      {

                        border-width:1px;

                        border-style:solid;

                        border-color:red;

                      }

                 ②缩写形式

                     {

                        border:1px solid red;

                     }

                 内边距padding和外边距margin都有top,left,right,bottom四个属性，他们的完整型都是padding或margin-(top,left,right,bottom)。

                 他们的缩写形式为：

                  padding(margin):长度值；

                  padding(margin):长度值1长度值2；

                  padding(margin):长度值1长度值2长度值3长度值4；

                  四个方向的顺序为顺时针顺序即top,right,bottom,left。

        （2）背景缩写

                 CSS背景属性有background-color(背景颜色),background-image(背景图片),background-repeat(背景重复),background-attachment(背景图片固定还是滚动),background-position(背景图片的定位)。

                 ①完整形式

                     {

                       background-image:url(" ");

                       background-repeat:no-repeat;

                       background-position:80px 40px;

                     }

                 ②缩写形式

                    {

                      background:url(" ") no-repeat 80px 40px;

                    }    

        （3）字体缩写

                  CSS常用到的字体及文本属性有font-family(字体类型)，font-size(字体大小),font-weight(字体粗细),line-height(行高)。

                  ①完整形式

                      {

                          font-family:"微软雅黑";

                          font-size:12px;

                          font-weight:bold;

                          line-height:1.5em;

                      }

                  ②简写形式

                     {

                         font:"微软雅黑" 12px/1.5em bold;

                     }

                    注意：Ⅰ：如果使用字体简写形式，至少要指定font-famliy和font-size属性，其他属性如果没有指定则将自动使用默认值。 Ⅱ：在简写形式中，font-size和line-height值之间是需要加入斜杠“/”的。

        （4）颜色值缩写  

                 在CSS中，十六进制的颜色值是可以缩写的。如果每两位的值相同，可以缩写一半。例如“color:#000000”可以缩写为“color:#000”。

   2：语法压缩

         对于语法压缩，从以下7个方面进行优化。

        （1）空白符

                 一般情况下，多个属性值直接必须要用空格，在CSS的编写中，书写方式有两种，纵向书写和横向书写。

                 纵向书写

                       #div

                       {

                           padding:10px;

                           border:1px solid red;

                       }

                 横向书写

                       #div{padding:10px;border:1px solid red;}

                  对于浏览器来说，两种书写方式完全等价，纵向书写代码方便阅读，横向书写则可以节省更多字符数。实际开发中，建议使用纵向书写，等到整站发布的时候，再使用工具压缩成横向书写方式。

        （2）结尾符号

                  在CSS中，每一个选择器的样式都是用{}括起来，实际上，最后一个属性之后的结尾分号是不必要的，省略之后，对代码没有任何影响。

        （3）url()的引号

                 在CSS中，像background-image、cursor等属性url()中的路径不需要添加引号。

        （4）属性值为“0”

                 在CSS中，如果某一个属性取值为0，则这个属性值不需要添加单位。

        （5）属性值为“以0开头的小数”

                 当一个属性的属性值是以0开头的小数时，可以把开头的0去掉。

        （6）合并相同的定义 

                 在CSS中，很多时候定义的规则会有相同的部分，可以使用群组选择器（并集选择器）来合并这些相同的样式，从而达到代码重用和精简代码的目的。

        （7）利用继承进行合并

                 在CSS中，很多属性是可以继承的。

                 ①文本相关属性：font-family,font-size,font-style,font-weight,font,line-height,text-align,text-indent,word-spacing。

                 ②列表相关属性：list-style-image,list-style-position,list-style-type,list-style。

                 ③颜色相关属性：color。

                 如果父元素的多个子元素都定义了相同的可继承属性，可以把这些相同的属性定义在父元素上，从而精简代码。

   3：压缩工具

         CSS文件分为“开发版”和“发布版”。发布版是将开发版进行合并和压缩之后，在网站运行时使用的。

         CSS压缩工具有在线版、本地版和编辑器插件三种，推荐使用在线版的两个工具：CSS Compressor和YUI Compressor。

   4：图片压缩

         在实际开发中，JPRG、PNG和GIF是最常见的图片格式。深入理解这三种图片格式适合在哪种情况下使用，并且如何减少图片大小十分重要。

        （1）JPEG 可以很好的处理大面积色调的图像，适合存储颜色丰富的复杂图像，如照片、高清图片等。此外，JPEG不支持透明。

        （2）PNG 是一种无损格式，可以无损压缩以保证页面打开速度。PNG支持透明。

        （3）GIF 格式图像效果较差，但可以制作动画。

         图片的传输量在一个页面的传输量中往往占的比重很高，因此对图片大小的压缩尤为重要，图片压缩的很多，以在线工具居多，推荐两款在线工具。

              ①JPEG：推荐JPEGmini

              ②PNG：推荐TinyPNG

   5：高性能的选择器

         不同的选择器其实性能是不一样的，了解选择器在浏览器中的解析原理以及不同选择器的解析速度，能够让我们的CSS性能速度锦上添花。

       （1）选择器在浏览器的解析原理

               #column .content div{color:Red;}

              一般情况下，我们都是从左到右阅读代码，因此对于上面这行代码，也会习惯性地以为浏览器是从左到右进行解析的：首先找到id为column的元素，然后再查找该元素下面class为content的元素，最后在已经匹配的元素下查找所有的div元素。但是，事实上却恰相反，浏览器对选择器规则是从右到左进行解析的：首先查找所有的div元素，然后再查找该div元素是否存在具有content类的父元素，最后在已经匹配的父元素中继续向上查找祖元素是否含有id为column的元素。

       （2）不同选择器的解析速度

           #column .content div{.....}

           #column .test{.....}

           #test{.....}

          如果选择器选中都是同一个元素，那么性能最好的是第三个，第一个性能最差。由于第三个选择器直接使用id选择器，而id在整个页面具有唯一性，因此可以快速定位。第一个选择器需要先匹配所有的div元素，对于一个页面来说，这个是不小的匹配量。

          浏览器解析选择器的原则是从右到左的，因此我们书写的最右边的选择器，被称之为关键选择器。这个关键选择器，对于执行效率有决定性的影响，对CSS选择器的匹配效率从高到低做了一个排序。

             ①id选择器 ②class选择器 ③元素选择器 ④相邻选择器 ⑤子代选择器 ⑥后代选择器

             ⑦通配符选择器 ⑧属性选择器 ⑨伪类选择器

          如果想要更好地使用高性能的选择器，需要注意以下四个技巧。

             ①不要使用通配符

                 在选择器中，通配符*一般用于选取页面中所有元素。例如“ *{  } ”表示选取页面所有元素，“#wrapper *{｝”表示选取ｉｄ为ｗｒａｐｐｅｒ元素下面的所有子元素。

　　　②不要再ｉｄ选择器以及ｃｌａｓｓ选择器前添加元素名

　　　　元素的ｉｄ在一个页面中具有唯一性，因此在ｉｄ选择器前添加元素名是多余的，同时也增加了匹配量。元素的ｃｌａｓｓ不具有唯一性，如果在ｃｌａｓｓ选择器前添加元素名，则表示选择某一个ｃｌａｓｓ的某一种元素。除非是迫不得已的情况，否则尽量不要使用“ｃｌａｓｓ选择器添加元素名”。　

　　　　ｅｇ：

　　　　／＊多余的写法＊／

　　　　ｄｉｖ＃ｗｒａｐｐｅｒ｛ｆｏｎｔ－ｓｉｚｅ：１２ｐｘ；｝

　　　　／＊正确的写法＊／

　　　　＃wrapper｛ｆｏｎｔ－ｓｉｚｅ：１２ｐｘ；｝

　　　　③选择器最后不要超过三层，位置靠右的选择器条件尽可能精确

　　　　　选择器的层级越多，浏览器解析时匹配的次数就越多，因而速度就越慢。因此在定义选择器时，要尽量让选择器的层级少一些，最好不要超过３层。

　　　　④避免使用后代选择器，尽量少用子代选择器

　　　　　后代选择器匹配量较大，应该避免使用，如果非要用的话，建议用子代选择器代替。但是子代选择器匹配量也不小，如果有其他选择器如ｉｄ选择器或ｃｌａｓｓ选择器等代替，也尽量少用子选择器。