外链css?还是内嵌?

本文属于《高性能web前端优化指南

哪怕是刚学习css的同学,也知道在页面中加入CSS样式有两种方式,一是直接在网页内的style标签内定义,另一种是把所有样式保存为独立的css文件,然后在网页中用link引入css文件。

那么这两种方式哪种更好呢?

书上一般推荐大家用后面的方法,在这里我也推荐使用独立文件的方法。但容我分析一下原因

独立css文件的好处是明显的。

1,便于复用

css的本意就是希望把html结构与页面样式分开,这样当某页面需要某个样式时,直接引入相关的css文件即可。这样可以做到,即使网页有成千上万页,但css文件依然只有一个

2,便于管理

把css独立,有利于保持html文档结构整洁,不会混淆;如果需要修改某网页的错位,直接到css文件里搜索就行了,而不用四处寻找问题源头。

当然,独立的css文件也不是没有缺点,他缺点如下:

1,额外的http请求

如果CSS写在网页中,则加载网页的时候就能加载到样式;如果CSS是独立的,则网页需要再开一个连接到CSS文件。

当然,少数几个的CSS请求,相对于那些图片所发出的N个http请求是很微不足道的。而且大部分CSS文件都没有一张普通的图片体积大。

2,造成css浪费

比如我只想浏览A网页,A网页的所有CSS都在css.css中,而css.css中还包含大量的其他网页的样式定义,但很可能此文件中大部分的样式都与A网页无关。不过,A网页还是必须加载整个CSS文件,这就造成了浪费。

不过因为css文件是会缓存的,比如A,B网页都引用了css.css,那你浏览了A,再浏览B,此时就不会又加载一次css了,而是直接使用缓存。

如果你的读者只在你网站中千千万万的网页中的一页上浏览一下,就跑了,那么,对于他来讲,他就是浪费了CSS的流量;但对于站长你来讲,就是个悲剧——网站没有吸引力!

3,可能链接错误

我们经常碰到这种情况:网页加载出来了,但完全没有CSS样式!因为css是独立的,但由于奇怪的原因却没有加载进来——对于google的网页,这一点 经常出现。

把CSS写在网页中,就完全没这种担心

简单的说就是这两种写CSS的方法各有长处,真是那什么公理婆理。那么,我们什么时候该用独立CSS,什么时候该直接把CSS写在网页中呢?

以下情况优先把CSS直接写入网页:

1,只有一个单网页

现在单页站很流行,既然只有一个网页,也就是不存在CSS复用的情况,那么就直接把CSS写在网页里吧。

2,此网页与其他网页差别很大

当某网页样式和其他网页基本不存在关系时,就应该给他自有的css。如果他的样式其他网页用不到,那就直接写在网页里面

小结:简单的说,只要某网页的css不需要与其他网页共用,那就把样式写在网页里。

以下情况应使用独立css文件

1,大量类似的网页架构

一般除了大型门户网站,其余网站的整站风格都是很类似的,都有同一个框架。此时也就存在大量的需要复用的CSS,那么,一个独立的css文件才能便于所有网页引用。

2,需要大量风格供切换

比如会员空间,可以自定义主题样式。此时,就可以把所有的主题独立成为一个css文件,然后根据需要载入指定的css文件,实现主题大变样。

这样一来,不需要改动网页结构,就能实现很多不同的网页样式

3,html结构变化的代价太大

由于绝大部分网页都是服务端语言生成的,如果需要改变html结构——比如插入额外元素,插入大量CSS代码,那么无疑会增加服务器开销。此时如果只需要改动那么一个独立的css文件,就能替换整个网站的样式,相信服务器会很乐意,而且你的做后台的同事也会很乐意。

案例分析

新浪首页,网易首页采用了把css直接写入网页的办法——因为首页与他的其他页面的结构,实在没多少共同点。

但他们的其他页面,比如新闻内容页,由于有几百万的结构类似的内容页,如果让他们都引用同一个css文件,那无疑会大大的节省资源;如果把css写入网页中,那么就算一个网页因此增加5KB的大小,100万个网页,就增加了500万KB的额外体积,这是很不值的。

1 评论

发表评论

电子邮件地址不会被公开。