我们都知道对于网站来说, 性能至关重要, CSS 作为页面渲染和内容展现的重要环节, 影响着用户对整个网站的第一体验. 本文就来为大家介绍一下优化 CSS 性能的方法.
CSS 匹配原理
在优化 CSS 之前我们需要了解下 CSS 是怎么进行工作的, 我们都知道 CSS 是由选择器, 属性和属性值构成的.
我们可能会这样写上一行代码
- //CSS
- .con .loulan1 p span{ display: block; }
- //html<div class="con">
- <div class="loulan">
- <p><span > 文字</span></p>
- </div></div>
在这里我们对 con 类里面的 loulan 类里的 p 标签里面的 span 标签进行样式定义. 我说出来都嫌累更别说写起来了, 其实你可以把浏览器看作一个人, 它渲染起来肯定也会浪费性能.
而且 CSS 的匹配原理不是从左到右的, 而是从右到左的, 也就是说我们的这行代码里面, 先查找到页面里面所有的 span 元素形成一个集合.
再在所有的 span 元素往上查找, 看看有多 span 的父元素是 p 元素或者父元素的父元素是 p 元素或者...... 慢慢寻找, 把父元素不是 p 元素的删去, 再往上查找看集合里的有 p 元素又多少它的父元素的类是 loulan... 浏览器说: 我好累...
其实呢浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素. 并且 Firefox 称这种查找方式为 keyselector(关键字查询), 所谓的关键字就是样式规则中最后 (最右边) 的规则, 上面的 key 就是 span.
人家本来是为了能尽快过滤到一些无关样式规则的, 我们这里缺一层套一层, 层层不停歇. 所以只是想定义一个 span 的样式在 span 上加个类岂不是更好.
有人这时要说了, 那样是需要在每个元素上都加上类吗? 那肯定不是必须的, 只不过我们要了解浏览器是怎么查找匹配的, 然后结合现在的结构来做出一个最好的最方便的写法.
- //CSS
- .loulanSpan{ display: block; }
- //HTML<div class="con">
- <div class="loulan">
- <p><span class="loulanSpan">文字</span></p>
- </div></div>
CSS 选择器权值
这里说下 CSS 的 ID Class Tag 选择器的权值, 也就是他们的优先级, 权值越大, 优先级越高
- ID:100
- Class:10
- Tag:1
有了上面两个的基础我们再详细说下应该怎样来优化 CSS 提高性能:
1, 减少 CSS 嵌套, 最好不要套三层以上, 一般情况下块级元素加上类, 里面的内联元素不用加, CSS 写的时候块级 class 套内联 tag, 这样不仅可以减少 CSS 文件大小, 还能减少性能浪费.
2, 不要在 ID 选择器前面进行嵌套, ID 本来就是唯一的而且人家权值那么大, 前方嵌套完全是浪费性能.
3, 建立公共样式类, 把长段相同样式提取出来作为公共类使用, 比如我们常用的清除浮动, 单行超出显示省略号等等等, 当然如果你使用 Sass, 继承会让你更加方便, 同时我是比较提倡使用 Sass 的, 之后肯定也会写一篇 Sass 的博客.
4, 缩写 CSS, 其中包括缩写 maigin,padding, 颜色值等等, 要是有两个或者两个以上的 margin-****, 写成 margin: * * * * 有助于文件大小.
5, 减少通配符 * 或者类似 [hidden="true"] 这类选择器的使用, 挨个查找所有... 这性能能好吗? 当然重置样式这些必须的东西是不能少的.
6, 有些人喜欢在类名前面加上标签名: p.ty_p 来进行更加精确的定位, 但是这样往往效率更差, 类名应该在全局范围除非公用是唯一的, 所以这种做法是应该便面的.
7, 巧妙运用 CSS 的继承机制, 在 CSS 中很多属性是可以继承的比如颜色字体等等, 父节点定义了, 子节点就无需定义.
8, 拆分出公共 CSS 文件, 对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独 CSS 文件里, 这样一次下载后就放到缓存里, 当然这种做法会增加请求, 具体做法应以实际情况而定.
9, 不用 CSS 表达式, 可能大家接触比较少, 但是要记住的是无论我们怎么炫酷, 到了最后都是静态的, 所以表达式只是让你的代码显得更加炫酷, 但是他对性能的浪费可能是超乎你的想象的, 因为它并不只是计算一次, 一些小的事件可能都会增加它为了有效准确而进行计算求值的次数.
10, 少用 CSS REST, 可能你会觉得重置样式是规范, 但是其实其中有很多的操作是不必要不友好的, 有需求有兴趣的朋友可以选择 normolize.CSS
11,cssSprite, 合成所有 icon 图片, 用宽高加上 bacgroud-position 的背景图方式显现出我们要的 icon 图, 这是一种十分实用的技巧, 极大减少了 http 请求.
更多 CSS 知识请关注 HTML 中文网 CSS 教程 https://www.html.cn/web/css/ 栏目.
来源: http://www.css88.com/web/css/17233.html