CSS性能分析,如何优化CSS提高性能
css匹配原理
在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的。
创新互联公司专注于广州企业网站建设,成都响应式网站建设公司,商城系统网站开发。广州网站建设公司,为广州等地区提供建站服务。全流程按需定制设计,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务
我们可能会这样写上一行代码
//css .con .loulan1 p span{ display: block; } //html文字
在这里我们对con类里面的loulan类里的p标签里面的span标签进行样式定义。我说出来都嫌累更别说写起来了,其实你可以把浏览器看作一个人,它渲染起来肯定也会浪费性能。
而且css的匹配原理不是从左到右的,而是从右到左的,也就是说我们的这行代码里面,先查找到页面里面所有的span元素形成一个集合,再在所有的span元素往上查找,看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢寻找,把父元素不是p元素的删去,再往上查找看集合里的有p元素又多少它的父元素的类是loulan...浏览器说:我好累...
其实呢浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。并且Firefox 称这种查找方式为 keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的 key 就是 span。人家本来是为了能尽快过滤到一些无关样式规则的,我们这里缺一层套一层,层层不停歇。所以只是想定义一个span的样式在span上加个类岂不是更好。有人这时要说了,那样是需要在每个元素上都加上类吗?那肯定不是必须的,只不过我们要了解浏览器是怎么查找匹配的,然后结合现在的结构来做出一个最好的最方便的写法。
//css .loulanSpan{ display: block; } //html文字