当前位置:首页 » 前端 » 本页

关于CSS对网站整体速度影响的因素 In 前端  @2014-01-27 2,867 Vs

关于CSS对网站整体速度影响的因素

页面的访问速度是衡量一个网站性能的关键;

网页的结构是支撑网站的重要因素,大多人都是从结构及js去优化网站的性能,比如html的写法都按照严格的标准来书写,js放在最底部,合并js等方法来提升网站的访问速度及运行性能,以达到更优的用户体验而留住用户;

讲Css前,先来讲讲Html 及Javascript对网站性能的影响

从写html开始我们都知道,html中几乎所有代码都是小写字母,包括了js所需要用id,它们都在w3c官方中建议统使用小写字母,并且块元素及行内元素要相对区分,不可以行内元素放入块状元素(比如span中放入div就是错误的),虽然现在很多浏览器很智能,但这样写毫无标准之分,会降低网站的性能,同时对SEO不好,不利于搜索引擎的收录;
这些标准,准则都是为更好的网站性能。

这其一是有利于阅读,团队的合作;
想想从其他的人员中接过一个写得大小写混合的代码,结构层次没有主次之分,相信谁看到后第一映像不是说会有对什么会影响而是写这个页面的人压根不是做前端的人吧,没有一点点专业知识。改东西还不如从写,这样浪费大家的时间;

其二是页面通过服务器编译时速度更快;

服务器对不同的语言写的页面都有不同的编译方式,PHP, ASP, HTML, C#,.NET.等等,页面的最上方都会有标识,如果按照标准来做,服务器便能更好的对页面代码进行快速编译,提高访问速度。

而Javascript中的方案就更多了,包括压缩js,用一些工具就可以从一百多kb的大小进行压缩至十多kb,进行加载的话就更加快速。

还有一个常用的是合并js;
这个就有点技术含量了,单靠工具合并一般都会出现问题,会出现js失效,冲突等问题,这里很重要的一个是要注意声明变量的问题。Javascript是从最上面一直向下一行一行运行的,所以这一点我们要特别注意,如果有一个全局变量可能会影响下面所有的函数。

大多数前端测试人员对网站进行评估优化的时候往往就是按照上面的优化方法去,的确是可以提高不小速度;而也很多人就是会忽略一个其实也很重要的地方。

就是CSS!!

CSS的优化似乎是没有什么的,因为觉得CSS写法都是大小异同,体积也相对较小,没有必要去优化只要相对压缩一下就行了。的确,普通的优化方法也可以进行压缩一下,并且保持相对较好的可识别和修改的压缩方法;

 

CSS优化方案

 

CSS位置

CSS的加载是所有网站都是相当重要的一项,因为网站的外观都是靠CSS来控制的(纯表格另说),CSS是放在所有页面的最上方(包括了 html php asp等)通过第一时间来加载控制页面;

还有一个则是模板共用。不过这个大多数网站都是了,通过共用一个模板head 来加载全局共用的CSS文件;

CSS 链接

网站里的CSS链接一般都使用站内链接以及相对链接,这样不仅可以更好维护,也更有利于网站的稳定性;

CSS写法

CSS的写法是我们要讲的重要一点

CSS统一都用小写字母,都用英文字母写,有中文的字体则也用标准的英文写法替换,中文字体英文写法可以参考本站 html,font-family中文字体英文写法(本链接),编码使用Utf-8保存;

CSS单个类不分行,一直写下去自动换行,换下一下类时再换得,中间不要空格或换行;

code01
上图为正确写法

code02
上图为错误写法

 

还有很多人写CSS的时候都是想到哪里写到哪里,想到border 写border突然看到左侧近了写 margin-left或padding-left,又或者想左浮动一下则写又写了一个float:left;

他的顺序则成了{border:1px #ccc solid;margin-left:10px;float:left;}

上面的写法没有错可以实现效果,但是没有规律,没有先后顺序
其实CSS也有规则的,一般情况下顺序(因为加载也是要根据顺序来)

display
position(top bottom left right)
float
margin
padding
color
border
background


z-index

 

简单解释一下就是 标签元素块元素或行内元素属性、定位、标签内元素的其它属性

如果可以按上面的写法养成一个好习惯的话不仅写CSS可以更得心应手也可以在测试的时候更容易找到问题所在;

有些特殊性况下,CSS的写法顺序是会对浏览器的兼容性有影响;

CSS顺序写法是经常不被所知的,但就是CSS这一点对网站性能影响是最大的,毕竟一个网站的CSS代码也是相对较多的,在加载的时候,每一行的代码渲染都是要浏览器参传递;

 

CSS文件数

在一个大型的网站中,CSS的文件个数会较小网站多,但并不是说就一定会多很多,他们主要是这么分的,共用的全局CSS,某个类型网页模块(比如用户管理)单独写,后台,调用框单独写一个,在需要弹框的地方加上这个文件;这些做法都是为了更好的维护和加载所需的样式表;

但在小型网站的话就不会这么复杂了,通常就一个了!

CSS图片精灵

这个是有关图片精灵的,我们也顺带一下,具体的可以访问本站的另一篇文章CSS Sprites(本链接)
现在很多流行的大网站都是这样做的,包括京东,切图的时候将很多小图通过一定的方法合并在一张大图上面,通过减小对服务器的请求次数来加快网站的访问速度;
他的原理就是通过background-position来定位实现的,而这个方法在现在的CSS3技术下还可以实现特别的效果,有兴趣的朋友可以去了解一下;

网站的访问速度及性能是在众多因素的影响下改变的,作为设计师,服务器端我们就没有办法去优化,但我们通过我们自身的技术来优化我们的网站。

 

本文为原创文章,如需转载请注明   原文来自 ithink http://www.xwbetter.com/aboutcss/



↓↓↓ 支持我们 ↓↓↓



我说两句 »

Ctrl+Enter

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。

搜索

返回顶部