css规则(2)-优化css

/ 0评 / 0

广州这热天气越来越变态了,热!,回归正传,css是一门很有学问的知识,可能有些人会觉得css不过如此,我只需要记住几个常用属性的设置就可以掌握css,号称精通css了。但是,css不是表面看起来那样简单的,要写出性能更好,更简洁并且更加有拓展性的css没有积累和沉淀是不可能完成的。今天的主题是css优化方面,可能你在网上看到过类似文章,但我相信,我的这篇文章多少会对你有帮助的!

一、css引入方式

1、直接在标签中使用style书写css样式

2、html中使用style

3、使用@import引用外部CSS文件

4、使用link引用外部CSS文件

这四种方法,按理来说,我们用的最多的应该是第四种方法了,确实如此,样式与结构分离是最好的原则。第一第二种方案,有人觉得可能更加方便,不引入外部文件,减少了css文件的http请求,但是这种css的书写方式对页面的维护与调试造成更大的影响,是不建议采取的,当我们网页的css更多更大了,首先是不利于阅读的,其次,调试也是相对于外部css要困难的。第三种方法@import引入的css也是可以的。对于@import简单介绍一下:@import指定导入的外部样式表及其目标媒体。该规则必须在样式表头部最先声明。并且其后的分号是必需的,如果省略了此分号,外部样式表将无法正确导入,并会生成错误信息。

例如

@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);

兼容性是非常不错的。基本上都支持,出来古老的IE6和IE7。言归正传。使用@import导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。@import影响css文件的加载速度,为了性能优化,我们使用link方式引入css。

二、css的简写

很多时候,我们书写的css样式里面会出现类似

div{
    display:block;
    width:100%;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:20px;
    margin-right:20px;
}

1、当然了,这么简单的css简写,我相信大家是可以搞定的,我也只是来强调这个问题而已了。首先,我们知道div是块级元素,块级元素的display:block,当一个元素的display为block时候,那么它的width是100%;也就是说上面display:block;和width完全是可以省略的,还有,margin可以简写成margin:20px;简写四个值分别是上右下左,简写三个值就是上 左右 下,简写为一个。类似的css简写形式还有很多。例如

.class{
    border-color:#fff;
    border-style:solid;
    border-width:1px;
}
简写.class{border:1px solid #fff;}
还有字体属性font,background,padding等等,对于那些可以简写的尽量精简代码。比如颜色值,建议用小写
.class{color:#FFFFFF;}简写.class{color:#fff;}如果颜色每两位的值相同,可以缩写一半

2、有的属性值为0的时候,我们可以不加单位,例如

.class{
    width:0;
    left:0;
}

要养成写css都用简写形式,多去观察css代码中,有的东西是可以不要的,有的东西是可以简写优化的,千万不要觉得这没什么,积少成多的,厚积薄发。好的css书写习惯和更加精简的书写方式能节省css文件的大小,优化网站整体性能,更加容易阅读。这些好处是会在以后的项目越做越大的时候体现出来。专业的人一看你写的css代码风格就能了解你的水平了。可能有的人书写css的时候喜欢按照相关的属性声明应当归为一组,一定顺序排列。这样书写也是可以很工整的,并且subline还有相关插件可以按照我们自己设置的规则去设置。个人觉得这个是完全可以的,样式写的很工整。(惭愧啊,我一直都是按照自己想法来排顺序的,对这种写法比较支持,虽然没有对样式文件减少大小).

3、多利用css继承的特性,不用每一个选择器上都写一大堆可以从祖先元素基础下来的的属性,可以基础的属性有很多,例如

font、text-index、text-align、line-height、color、text-transform、word-spacing、visibility等等

我们也不需要去记住他们,css手册一查就可以了解了,并且我们用多了自然而然就可以很清楚的知道。可能有幸情况很特殊,例如我在a的父元素设置了color,为什么a的color没有继承下来呢?因为有些标签的属性有默认的值,例如表单元素,链接等等,具体可以参考下http://css.doyoe.com/

三、css背景精灵图

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以,访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。所以,CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,当然随之而来的增加内存消耗,CSS Sprites图片繁琐的合成等缺点在网站性能的提升前,也就不足为道了。

类似于上图,如果把一个一个图标都单独弄出来用的话,是非常方便的,但是,每多一个图片文件就是多一个HTTP请求了,为了更好的性能,建议在不是很复杂的情况下能用CSS Sprites就尽量用。

四、css选择器优化

说到这个css选择器的优化,我们应该要知道,浏览器对css选择器是怎么匹配的,比如 .class span 浏览器是怎么“定位”到span的。首先我们先抛出结论,css的匹配规则是从右往左的,没错,不是从左到右。css会先找到选择权最右边的那个选择符,然后再往左边不断往上找。这个 .class span中,首先会找到所有的span元素,然后再找span的父级元素是否有类名class,找不到再往祖先元素找,知道找到符合span的祖先元素为类名.class为止。最简单粗暴的方法就是直接给span一个类名,或者ID,但是那也是不现实的,只能说,我们要根据实际情况来找适合的解决方案了。

比如说,我们应该尽量减少css后台选择器过长的情况,这样的选择器效率是不高的。在页面上,建议同意用类名来命名,不要用ID,不是说ID不好,而是类名更加合适。

说到这个ID、Class之类的,随便了解下css选择器的优先级

ID:100
Class:10
Tag:1

css的权重中,ID是最大的,类名次之,标签最小。这个数字有什么用呢,举个例子

html
<div id="div" class="div">测试<div>


css
#div{
    background:red
}
.div{
     background:orange;
}
div{
    background:yellow;
}

如果不知道css选择器权重的话,我们可以会觉得div的背景颜色是yellow,因为后面的会覆盖前面所写的。但实际上不是得,div的背景是red,因为,ID权重为100,类名权重为10,标签最小为1,是按这个css的优先级来计算最后用什么样式的,如果是组合选择器的话,做加法运算就可以了。比如

#div a{}     /*优先级101*/
.div li{}     /*优先级11*/
body .div a{}    /*优先级12*/

这个也是可以做为css优化的又一个点了,选择器性能越好,网站的性能就越好!建议选择器的嵌套最好不要超过三层。

五、减少css动画渲染的性能损耗

尽可能多的利用硬件能力,如使用3D变形来开启GPU加速

-webkit-transform:tanslate3d(0,0,0);

3D变形会消耗更多的内存与功能,应确实有性能问题时采取使用它,兼在权衡

在条件允许情况下,尽可能少的使用box-shadow与gradient,他们对浏览器渲染性能损耗比较大,尤其在同一个元素同时使用了他们。

尽量的让动画元素不在文档流中,以减少重排(关于浏览器渲染页面是的重排与重绘,下次我们再讨论),这里简单说下

参考与伯乐在线文章http://blog.jobbole.com/46722/

浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排。各家浏览器引擎的工作原理略有差别,但也有一定规则。简单讲,通常在文档初次加载时,浏览器引擎会解析HTML文档来构建DOM树,之后根据DOM元素的几何属性构建一棵用于渲染的树。渲染树的每个节点都有大小和边距等属性,类似于盒子模型(由于隐藏元素不需要显示,渲染树中并不包含DOM树中隐藏的元素)。当渲染树构建完成后,浏览器就可以将元素放置到正确的位置了,再根据渲染树节点的样式属性绘制出页面。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。

重绘是一个元素外观的改变所触发的浏览器行为,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘不会带来重新布局,并不一定伴随重排。

开发中,比较好的实践是尽量减少重排次数和缩小重排的影响范围。
这部分讨论已经超出css了,我们先交流有关css的知识。

六、压缩css文件

最后写好样式后,还可以对css进行压缩,来减少css文件的体积。对于一个压缩文件,比如一个文件style.css,我们压缩后可以改为style.min.css,网上有很多在线工具,可以搜索一下自己喜欢的压缩工具,我个人喜好是用http://tool.oschina.net/codeformat/css

本文的全部内容就到这了,欢迎大家留言补充。会不定时的更新有关css优化的知识~

原创文章,转载请注明出处,谢谢~欢迎一起讨论交流~

简书求关注http://www.jianshu.com/u/bfd55badb1f4

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注