样式表写进页面模板中利弊谈

当前位置：首页 > css应用 > 样式表写进页面模板中利弊谈

Jun26th

桶哥 css应用 33 人阅读了此文我来说两句！

最近注意到一个现象，许多超高流量的门户站，在写页面代码时，几乎全是直接将样式表写进页面模板中的，这样做有何好处呢？比如百度，打开其首页，通过查看其源代码，低一度发现其样式表就写在<head>区，如下——

<style>body{font:12px arial;text-align:center;background:#fff}body,p,form{margin:0;padding:0}body,form,#lg{position:relative}td{text-align:left}img{border:0}a{color:#00c}a:active{color:#f60}#u{padding:7px 10px 3px 0;text-align:right}#m{width:650px;margin:0 auto}#nv{font-size:16px;margin:0 0 4px -32px}#nv a,#nv b,#su,#lk{font-size:14px}#lg{margin:-17px 0 9px}#fm{padding-left:111px;text-align:left}#kw{width:391px;line-height:16px;padding:3px 1px;margin:0 6px 0 0;font:16px arial}#su{width:78px;height:28px;line-height:24px}#kw,#su{vertical-align:middle}#lk{margin:33px 0}#lk span{font:14px "宋体"}#lm{height:60px}#lh{margin:16px 0 5px;font:12px "宋体"}#lh a{font:12px arial}#hp{position:absolute;line-height:14px;margin:0 0 0 6px;top:-1px;*top:2px}#cp,#cp a{color:#77c}#sx{color:#00C;text-decoration:underline;cursor:pointer;}</style>

谷歌也一样，在其首页中，引入的css样式如下——

<style>body{margin:0}#gog{padding:3px 10px 0}td{line-height:.8em;}.gac_m td{line-height:17px;}form{margin-bottom:20px;}body,td,a,p,.h{font-family:arial,sans-serif}.h{color:#36c;font-size:20px}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}.fl a:link{color:#77c}em{color:#c03;font-style:normal;font-weight:normal}a em{text-decoration:underline}.lst{font:17px arial,sans-serif;margin-bottom:.2em;vertical-align:bottom;}input{font-family:inherit}.lsb,.gac_sb{font-size:15px;height:1.85em!important;margin:.2em;padding:0 6px;width:auto;overflow:visible;}#gog{background:#fff;}#gbar,#guser{font-size:13px;padding-top:1px !important}#gbar{float:left;height:22px}#guser{padding-bottom:7px !important;text-align:right}.gbh,.gbd{border-top:1px solid #c9d7f1;font-size:1px}.gbh{height:0;position:absolute;top:24px;width:100%}#gbs,.gbm{background:#fff;left:0;position:absolute;text-align:left;visibility:hidden;z-index:1000}.gbm{border:1px solid;border-color:#c9d7f1 #36c #36c #a2bae7;z-index:1001}.gb1{margin-right:.5em}.gb1,.gb3{zoom:1}.gb2{display:block;padding:.2em .5em;}.gb2,.gb3{text-decoration:none;border-bottom:none}a.gb1,a.gb2,a.gb3,a.gb4{color:#00c !important}a.gb2:hover{background:#36c;color:#fff !important}</style>

    另外，还有其他一些门户站，如腾讯、新浪、网易163等等，皆是如此（四大门户中，就只有搜狐采取的是外部调用样式表文件的方式）。这么看来，此法显然是一项有意义的举措，并且可能是流量越高的站，越需要这样做。因为据我所知，一些小站或个站，似乎采取的几乎都是与搜狐一样的做法。那么，究竟有何意义呢？低一度思考了下，总结这么做大致有如下五点作用——

    1）将样式表直接写入页面模板中，可以降低服务器负担（主要是磁盘IO和网络连接数）。
    2）将样式表直接写入页面模板中，可以有效提高页面的加载速度（网页设计的技术发展是螺旋式的，曾经有人发明了图片分割来充分利用带宽；现在有人发明了合并图片来提高加载速度。很显然，这么做正是出于速度考虑）。
    3）将样式表直接写入页面模板中，可以有效防止因CSS加载失败导致的页面变形。
    4）将样式表直接写入页面模板中，可以通过一些特定的代码来解决某些CSS对于浏览器兼容的问题。
    5）将样式表直接写入页面模板中，在实现以上四点的基础上，必然也改善了用户体验。

当然，有利必有弊，这样做的好处既可以想象，那么其弊端也必不容忽视。就目前而言，至少有两个问题比较突出——

1）将样式表直接写入页面模板中，势必造成页面文件过于庞大，代码过于冗杂而不利于SEO（当然，对这些大站而言，SEO只是个屁）。
2）将样式表直接写入页面模板中，势必牺牲网络带宽，尽管它可以换取到不错的用户体验。利弊权衡，全在于你。

以上总结，仅代表我个人的观点与思考，如果您有其他的看法，欢迎补充！

本文出自：低一度，地址：http://www.diyidu.cn/post/css_in_html.html，转载须注明！

« 解决“错误代码：0XC004F061” z-blog主题制作基础教程（3） »

或许您会对下列文章感兴趣：

to "样式表写进页面模板中利弊谈" 引用该日志！

#1 草儿回复该留言 2010-6-26 12:59:17

对这些大站而言，SEO只是个屁。这句话说到点子上了。
不过，现在的宽带还算好，不会在乎那点流量的。
diyidu 于 2010-6-26 13:11:49 回复
像我们这类站，完全没必要这么搞啦。
#2 沉冰浮水回复该留言 2010-6-26 13:39:56

有时要刷新下才能加载到样式，确实挺心窄的。
diyidu 于 2010-6-26 19:22:43 回复
我也经常碰到样式加载不了的问题。
#3 kaka 回复该留言 2010-6-26 14:37:08

专人维护，这样做当然没问题，但要做到组件化，可维护，高效，还是按W3C走好。
diyidu 于 2010-6-26 19:23:14 回复
这么做会违背W3C吗？
kaka 于 2010-6-29 13:46:08 回复
你应该有用firebug吧
http://www.w3.org/
你看看他的结构就晓得了，页面是不会有任何样式滴。
#4 集趣回复该留言 2010-6-26 14:39:20

小站就不要跟大站做比较了，他们的需求我们不了解。
diyidu 于 2010-6-26 19:23:45 回复
不是比较啊，是学习研究：）
#5 我叫周哥回复该留言 2010-6-26 15:24:10

只要打开速度快，给用户的体验好就是好。
diyidu 于 2010-6-26 19:24:30 回复
是啊，真理只有这么一句。但是执行方式无数啊。
#6 飞猪回复该留言 2010-6-26 15:39:32

不知猴年马月，我们草根需要这样搞搞才好呀？
diyidu 于 2010-6-26 19:25:04 回复
到那个时候，我给你打工去。
#7 百晓妞妞回复该留言 2010-6-26 16:34:02

一切都围绕着流量。
diyidu 于 2010-6-26 19:25:41 回复
是啊，应该多加一门设计，叫“流量设计”。
#8 午夜悄悄话回复该留言 2010-6-26 16:49:31

一同样一
diyidu 于 2010-6-26 17:18:25 回复
请问啥意思？
#9 小托回复该留言 2010-6-26 16:59:11

大网站你会发现我们所说的都不怎么对了。
diyidu 于 2010-6-26 19:26:31 回复
不会的，我们现在是在研究他，对或不对也是一种理解。
#10 Mark 回复该留言 2010-6-26 18:34:28

一般建议是不写进，但是有时为了首页加载速度，对单一的页面，可以写在页面里！
diyidu 于 2010-6-26 19:27:08 回复
不止是首页啊。
#11 汕尾人回复该留言 2010-6-26 18:37:25

受教了！
diyidu 于 2010-6-26 19:27:38 回复
呵，也不多谈几句？
#12 TTkea 回复该留言 2010-6-26 19:30:43

像我这种小博客不想那么多事情，只要慢慢写博就是了，呵呵。
diyidu 于 2010-6-27 10:41:01 回复
说得是，我这种博客也是啊。
#13 星星之火回复该留言 2010-6-26 19:47:07

还一直以为CSS只能外部调用呢，学习了。
diyidu 于 2010-6-27 10:41:43 回复
当然不是了！很多调用方式的。
#14 qht123 回复该留言 2010-6-26 20:13:50

恩，学习来了。
diyidu 于 2010-6-27 10:42:35 回复
别总说学习哦，多发表看法。
#15 猪八戒回复该留言 2010-6-26 20:38:07

最近正在学习CSS中。
diyidu 于 2010-6-27 10:43:06 回复
噢？到什么程度了？
#16 创享生活回复该留言 2010-6-26 20:51:11

相对于大站来说，seo、带宽都不成问题啊。
diyidu 于 2010-6-27 10:44:10 回复
那是啊。大站不是看着大，其实真的是大。
#17 快乐的村长回复该留言 2010-6-26 21:00:27

对这些大站而言，SEO只是个屁。这句话说到点子上了。
不过话说百度的速度真的不错。
diyidu 于 2010-6-27 10:44:46 回复
百度在全国各地都有服务器啊。
#18 小松回复该留言 2010-6-26 21:42:44

难道百度还要seo？呵呵，搞笑了。
diyidu 于 2010-6-27 10:45:11 回复
所以了……
#19 zzzhu 回复该留言 2010-6-26 21:43:10

这个倒还没怎么注意。
diyidu 于 2010-6-27 10:46:13 回复
这个问题在今天的WEB前端设计会议上，有人提出了。
#20 朵未回复该留言 2010-6-26 21:44:57

根据情况选择，咱们博客基本是没这个必要的。大站只要讨好上级就可以了，小站还要讨好搜索引擎，唉。
diyidu 于 2010-6-27 10:46:39 回复
呵呵，是啊。
#21 Junan 回复该留言 2010-6-26 21:46:37

看来是CSS高手了~~
diyidu 于 2010-6-27 10:47:14 回复
呵，谈不上，略懂皮毛吧。
#22 colin 回复该留言 2010-6-27 11:01:19

为了便于管理，我可不想那么做。
diyidu 于 2010-6-27 11:06:43 回复
这个只是研究下而已，无须学习它。
#23 可乐回复该留言 2010-6-27 11:52:05

调用的，有些CSS直接写在摸板里，哈哈，混搭~
diyidu 于 2010-6-27 12:52:53 回复
这样也不错。
#24 绍兴小杜回复该留言 2010-6-27 16:06:06

我们平时做网页还特意分开写，呵呵~
diyidu 于 2010-6-27 16:15:30 回复
是啊，人家都写进去，我们急着弄出来：）
#25 刘志猛回复该留言 2010-6-27 19:43:01

呵呵，说得很有道理哦！我想就是这么一回事。
diyidu 于 2010-6-27 23:38:42 回复
估计也就是这些原因吧。
#26 月舞回复该留言 2010-6-27 21:41:34

门户网站访问量较大，如果css文件独立，页面多，服务器请求次数太多。
diyidu 于 2010-6-27 23:39:18 回复
恩，说得对极了。
#27 80后回复该留言 2010-6-28 8:26:28

版主是CSS高手哦。
diyidu 于 2010-6-28 8:28:54 回复
谈不上高手啊，就是喜欢折腾。
#28 Laoji 回复该留言 2010-6-28 10:58:40

学习啦！曾经的我根本不知道原来内部加载css还有这么多好处呀！估计我是用不到啦！哈哈……流量低呀！
diyidu 于 2010-6-28 11:07:47 回复
呵呵，有好处势必也有弊端的。
#29 十年灯回复该留言 2010-6-28 11:24:01

写在页面里看起来一片一片的，纠心。
diyidu 于 2010-6-28 11:45:33 回复
呵，有什么比加载不了文件导致页面无样式揪心？
#30 若蘭回复该留言 2010-6-28 12:45:36

具体情况具体分析，若经常要更新界面，且有多个页面调用，还是将css单独存放的好，简单页面或固定页面则可以直接内嵌。
diyidu 于 2010-6-28 13:17:44 回复
呵呵，这个只是探讨而已，并没有提倡大家照做哦。
#31 acboy 回复该留言 2010-6-28 13:54:35

呵呵，过来学习了。
diyidu 于 2010-6-28 15:30:31 回复
别老说学习，烦。有空多谈几句。
#32 老实人博客回复该留言 2010-6-28 15:51:32

看来，我有必要考虑一下，把CSS写进模板里面。对我来说，SEO也只是个屁。我要速度。
diyidu 于 2010-6-28 16:08:21 回复
你的速度已经很不错了，别这么干：）
#33 西门回复该留言 2010-6-30 0:11:36

我觉得是减少了请求，就像把多个小图片放到一个大图上面一样。
diyidu 于 2010-6-30 11:56:28 回复
恩，这也算一个好处。

低一度