性能，这个词如今被炒的很热，也是每个开发者，由“知道”、“会做”之后必经的一个“怎样做好”的阶段。性能关乎用户在不同设备和不同网络状态下的体验。也被多方面因素所影响。此文说说css方面怎样做到高性能。
高性能css
Html和css本身的性能问题并不突出，在提高可读性和可维护性的前提下，如果能让代码运行和解析的速度更快，则是锦上添花了。
一、使用高效css选择器
简单来说，能被浏览器快速解析和匹配的css选择器，就是高效的选择器。
首先要知道浏览器如何解析css
举个例子：
CSS Code复制内容到剪贴板
.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。
二、css相关的图片处理
现在的网页当中，图片所占的比重以及它的重要性大家都知道。那么如何处理好图片以及如何为图片设置样式，才能让用户打开网页时体验更好呢？下面给出一些意见：
（1）不给图片设置尺寸
在我个人的从业经历当中，有过这样的情况，我按照设计稿做好了页面，交给后台去测试，他就突然跑过来跟我说：hi，你看，这儿出状况了，我一看，坏菜，图片出格了，我才想起没有给图片定义宽高（直接从设计稿里切的也不需要），然后就犯错了似的在css样式里定义了宽高。以至于后来我把这个作为下次再做页面时候的注意事项。当我看到这一条意见的时候，才更知一二。
