CSS性能优化提高css性能的方法

  发布时间:2016-08-25 14:59:37   作者:佚名   我要评论
这篇文章主要介绍了CSS性能优化提高css性能的方法,不规范的css会导致很多性能问题,所以学习掌握css性能优化技巧是非常必要的,对css性能优化知识感兴趣的朋友一起学习吧

不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来。

css匹配原理

在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的。

我们可能会这样写上一行代码

CSS Code复制内容到剪贴板
  1. //css   
  2. .con .loulan1 p span{ displayblock; }   
  3. //html   
  4. <div class="con">   
  5.     <div class="loulan">   
  6.         <p><span>文字</span></p>   
  7.     </div>   
  8. </div>   

在这里我们对con类里面的loulan类里的p标签里面的span标签进行样式定义。我说出来都嫌累更别说写起来了,其实你可以把浏览器看作一个人,它渲染起来肯定也会浪费性能。

而且css的匹配原理不是从左到右的,而是从右到左的,也就是说我们的这行代码里面,先查找到页面里面所有的span元素形成一个集合,再在所有的span元素往上查找,看看有多span的父元素是p元素或者父元素的父元素是p元素或者......慢慢寻找,把父元素不是p元素的删去,再往上查找看集合里的有p元素又多少它的父元素的类是loulan...浏览器说:我好累...

其实呢浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。并且Firefox 称这种查找方式为 keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的 key 就是 span。人家本来是为了能尽快过滤到一些无关样式规则的,我们这里缺一层套一层,层层不停歇。所以只是想定义一个span的样式在span上加个类岂不是更好。有人这时要说了,那样是需要在每个元素上都加上类吗?那肯定不是必须的,只不过我们要了解浏览器是怎么查找匹配的,然后结合现在的结构来做出一个最好的最方便的写法。

C/C++ Code复制内容到剪贴板
  1. //css   
  2. .loulanSpan{ display: block; }   
  3. //html   
  4. <div class="con">   
  5.     <div class="loulan">   
  6.         <p><span class="loulanSpan">文字</span></p>   
  7.     </div>   
  8. </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压缩(这里提供一个在线压缩 YUI Compressor ,当然你会用其他工具来压缩是十分好的),GZIP压缩,Gzip是一种流行的文件压缩算法,详细做法可以谷歌或者百度。

以上所述是小编给大家介绍的CSS性能优化提高css性能的方法 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 深入理解CSS @font-face性能优化

    这篇文章主要介绍了深入理解CSS @font-face性能优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-06
  • 网站前端性能优化之javascript和css篇

    之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的。关于css的性能优化,他提到了如下几点
    2016-12-14
  • CSS代码编写的一些性能优化技巧总结

    这篇文章主要介绍了CSS代码编写方面的一些优化技巧总结,谈到了包括避免通用规则和后代选择器等方面来使代码更加高效,需要的朋友可以参考下
    2016-02-29
  • 网站性能优化之CSS无图片技术

    CSS无图片技术是什么?在不使用CSS Image(通过CSS的引入的背景图片,不包括img标签内的图片)情况下生成类似图片效果的技术;换句话的意思就是在使用纯CSS生成类似图片效果
    2014-11-20
  • CSS 网站性能优化笔记

    CSS 网站性能优化笔记,大家可以结合下js 网站性能优化笔记。
    2011-05-24
  • 对css性能优化的一点看法

    怎么会突然想起谈css与性能优化呢?其实这个问题我已经想了很久了,想写,但是也不知道从何写起,今天就简单的说一下,近段使用通过使用page Speed,对css性能优化的一点看
    2009-09-16
  • css性能优化-will-change使用详解

    will-change通过告知浏览器该元素会有哪些变化,使浏览器提前做好优化准备,增强页面渲染性能。接下来通过本文给大家分享css性能优化-will-change,感兴趣的朋友一起看看吧
    2019-05-06

最新评论