《web前端最佳实践》—高性能css

**

高性能css

** 做者新浪微博 @灵感_idea

Html和css自己的性能问题并不突出，在提升可读性和可维护性的前提下，若是能让代码运行和解析的速度更快，则是锦上添花了。

1、使用高效css选择器

简单来讲，能被浏览器快速解析和匹配的css选择器，就是高效的选择器。

首先要知道浏览器如何解析css

举个例子：.nav ul.list li div{}

咱们常见的思惟是，先去找到nav这个类，再找类包含的ul，再找ul中类为list的后代全部li中全部的div，简而言之，就是从左到右。可事实是这样么？么？么？~

事实是相反的！意味着什么呢？就是说它不是从第一个开始去慢慢的缩小范围，而是从div这个“裸奔”的盒子开始，至关于遍历，而后再找到li，以此类推，好吧不用我形容你应该知道这当中的消耗。理解这一原理很是重要，高效的选择器意味着匹配更快，查找次数更少。因此咱们定义选择器时，应该让第一次匹配时的数量达到最少，而且让总体的匹配查找次数最少。

以上这些解释偏偏遵循了这样一些原则

（1）避免使用通配符

（2）避免使用标签选择器和单个属性选择器做为关键选择器

（3）不要在id选择器前加标签名

（4）尽可能不要在选择符定义过多层级，层级越少，同时也下降了css和dom结构的耦合程度，提升样式的可维护性

（ps：老实说上面的这些“禁忌”你是否是都有犯过？~）

作个小结，以上所说，有两点须要知道，第一点在开头就已经提到，css的性能问题表现的并不突出，特别是在小项目中，因此，可维护性为先；第二点是虽然定义id选择器，有惟一性的优点，可是一个页面只能定义惟一id，定义过多id会使重用性下降，维护更困难，因此不建议多用id。

2、css相关的图片处理

如今的网页当中，图片所占的比重以及它的重要性你们都知道。那么如何处理好图片以及如何为图片设置样式，才能让用户打开网页时体验更好呢？下面给出一些意见：

（1）不给图片设置尺寸

在我我的的从业经历当中，有过这样的状况，我按照设计稿作好了页面，交给后台去测试，他就忽然跑过来跟我说：hi，你看，这儿出情况了，我一看，坏菜，图片出格了，我才想起没有给图片定义宽高（直接从设计稿里切的也不须要），而后就犯错了似的在css样式里定义了宽高。以致于后来我把这个做为下次再作页面时候的注意事项。当我看到这一条意见的时候，才更知一二。

来看解释，第1、设计人员为了画面的精美，会制做一些超出需求尺寸的图片；第2、同一张图片可能会在页面不一样地方屡次使用，好比缩略图、正常图、大图。问题来了，若是图片原始尺寸和实际需求不一样，在使用过程当中就会存在性能问题，利用样式缩放会带来cpu的额外计算过程，增长了图片在浏览器的渲染时间，网络传输过程也会占更多带宽，增长下载时间。所以，最佳作法是，为须要的部分单独作一套图片，初始页面加载时就能更快展现。

（2）使用css“雪碧图“

是将零散的图片合并成一张大图，在利用css进行背景定位。好处是减小请求数，提升了图片总体的加载速度。

但它也存在一些缺点：

好比，多张图片合并成大图，须要精确计算，仔细的调整位置，单纯手工制做是一件很复杂的事情。（所幸如今有一些工具能够帮咱们作）

另外，维护过程复杂，要尽可能让已有的图片保持原来的位置不变，若是是背景图的尺寸发生变化致使原有区域没法放置，那就只好放弃，若是非要在原有位置修改，则剩余的图片样式都须要修改，是很繁琐的过程。新加的图片最好放在最后面。

还有就是使用不当会致使性能问题，最大的问题就是内存消耗。若是制做过程不作任何的规划，随意摆放，则可能会使图片变得至关大，从而很占内存。

下面是一些最佳实践：

一、在项目后期应用css sprite技术

由于通常在开发过程当中，会比较频繁的修改或者更换图片，若是这个时候使用sprite技术，就会增长不少开发成本。

二、合理组织“雪碧”图

若是要把全部的图片放在一张图上面，也会有不妥，维护方面也不会很方便。组织背景图主要按照模块和背景图的风格来划分。好比，做为展现的缩略图放在一块儿，评论、点赞、上下箭头等图标放在一块儿等。

三、控制“雪碧”图的尺寸和大小

由于大尺寸的图片会占用大量的内存，因此要控制在合理尺寸，推荐长宽相乘不超过2500，大小在200kb内

四、合理控制背景图单元间的距离及背景图位置

这个原则是为了防止在背景图比元素大小更小的时候，区域出现别的无关背景图

五、借助相关工具处理sprite

3、减小css的代码量

提升网站总体加载速度的一个重要手段，就是提升代码文件的网络传输速度。除了代码压缩，精简代码也是一种手段。

（1）定义简洁的css规则

合并相关规则，定义简洁的属性值

合并规则是指好比font-family、font-size、font-weight等等，能够合并为font。 简洁属性值，好比颜色值：color，#33AAFF能够简化为#3AF等。

（2）合并相同定义

网页中总会有一些模块有较高类似度，则可把一样的部分共用一次定义，不一样的部分再单独定义。并且在css中，不少属性是能够继承的，则只须要在合适的地方定义一次便可。

（3）删除无效的定义

无效的定义，并不会影响页面功能显示，但会影响页面展现的性能，增长代码量的同时，也增长了浏览器解析代码的时间。无效的定义包括无效的规则及无效的样式属性，通常是开发过程当中引入的，而从直观上没法判断，这状况，能够用工具，chrome自带的工具就能够查找css中的无效样式。。

其余css高性能实践

（1）避免使用@import

@import导入的新样式文件会阻止页面的并行下载，这样增长了文件的总体加载时间。

（2）避免使用IE浏览器独有样式：图片滤镜和css表达式

图片滤镜的使用会在图片加载时阻塞浏览器的加载和渲染，并会增长额外的内存开销。 Css表达式的做用是动态设置css属性，表达式不仅是有兼容性问题，还有性能问题，例如浏览器大小改动、窗口改动时，会使得浏览器频繁计算，性能消耗极大。一样的效果能够用javascript来实现。

css3最佳实践

查看浏览器支持状况

在咱们使用css3的过程当中，问的最多的一个问题可能就是：兼容性如何？没办法，随着css的发展，它能够为咱们以前遇到的不少很差解决的问题提供一个更好的方案，让咱们忍不住去想能不能那样去作。PC端有饱受诟病的IE系列，到了移动端会好不少，但有些仍是不太好。因此，查看浏览器支持状况几乎成了必备动做。 若是使用的特性仅仅是装饰点缀性的效果，不影响大局，则不须要考虑太多兼容问题，若是是出于设计要求，必须支持全部浏览器，则要特别的关注一下了。 开发者能够选择好比：caniuse.com、css3 Click Chart、css contents and browser compatibility这些在线工具来查看兼容性。

添加必要的浏览器前缀

对于刚使用css不久的朋友来讲，若是偶尔在某网站源码当中看到诸如：“-webkit-、-moz-”等，可能会以为很奇怪，这是什么？它们是对应不一样的浏览器厂商所加上的前缀。

由于浏览器在支持css3时，可能仅仅实现了标准定义的一个早期版本，因此，尚不支持标准写法，给代码添加浏览器前缀也是无奈之举，会使得代码更多，更难维护。

但也不是为了“完美”而必定要去兼容全部的浏览器，通常能够按照浏览器或者系统的版本的市场占有率和目标用户使用浏览器的比例，来决定加不加前缀以及加几种前缀。并且相信随着逐步的发展，系统、浏览器的不断升级、更新，须要使用前缀的状况会减小。

问题又来了，既然须要添加必要的前缀，说明有些时候仍是颇有必要，那不得不加的状况下，那不是挺麻烦的？一样的一条规则要写三四遍，可能不少地方都要用，如何是好？别急，下面是几个对策：

一、使用工具来添加css属性的浏览器前缀

Prefixr，能够在开发的后期对代码进行处理。它会自动的添加须要的前缀和删去没必要要的前缀。

Autoprefixer，若是想要在开发过程当中更多的自主性，可使用这个工具，开发者能够自定义浏览器支持范围，它也有多种使用方式，能够集成到多个开发环境中。 此外还有几种工具可供使用：cssFx、css Agent和-prefix-free。

二、借助css预处理技术

目前流行的有sass、less，具体方法是，针对css3样式特性定义一份模板样式。 优势是：避免大量重复代码，只须要维护一份定义。

三、不要过分添加浏览器前缀

有些开发者为了兼容全部浏览器，无论什么状况都为css代码加上了全部浏览器的前缀，这是一种消极的编码方式，增长了太多的重复代码，下降了浏览器的解析性能，增长了复杂度，同时某些前缀的属性可能没有被浏览器支持过。

四、添加css3标准属性定义

何为标准属性定义呢？就是不须要任何浏览器前缀，你们可能都会注意到，不少使用css3的地方都会在最后的地方写标准属性定义，为何呢？由于当浏览器支持标准属性时，它能够覆盖前面添加了前缀的定义，css3中的属性标准定义才是符合规范的定义，添加了浏览器前缀的定义会随着浏览器的更新逐渐被淘汰。

固然，还有一点须要注意的是，某些属性，目前是属于Only webkit或者Only firefox的，那么就没有必要再写上标准定义及其余浏览器前缀了。

作好css3中新特性的兼容处理

说到兼容，就会提到低版本IE，好比很常见的圆角、透明图片等，有时候咱们会给它们降级的处理，好比filter或者javascript，使用box-sizing、transform，推荐使用Modernizr,这个框架中包含了不少css3新特性的兼容方案。

不管是哪一种方案，都会带来性能上的损耗，不能毫无章法的滥用，仍然是须要你们去权衡和选择。推荐一个如何更有效率的使用HTML5的建议网站：html5please。网站按照使用的方式把css3中的新特性分红了三类：

（1）直接使用

包含了大部分新特性，有些特性自己不会影响兼容性，如border-radius、media queries等，有些须要添加降级处理，如多背景图，要设置一个单背景图或者背景色做为备选。

（2）谨慎使用

这部分主要是性能问题，例如框阴影应用于占用很大区域的元素，页面滚动或鼠标悬停时，会引发不小性能问题。

（3）避免使用

这部分由于它们可能仅支持某个浏览器，好比倒影，则须要避免使用。

综上所述，css可以用来提升性能的方法仍是蛮多的，但咱们很容易忽略它们，由于它们所带来的影响彷佛没有那么明显，并且，不少人可能为了图方便，任意挥洒着本身的才华，想怎么写就怎么写，能达到效果就行，这也有点小消极哈，忘了你的优秀工程师目标了麻？！~~css规则虽不不难，真正写好也不易，仍是要有些追求极致的精神滴。诸君且写且珍惜吧！~

做者新浪微博 @灵感_idea