精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>css教程>正文

阿江与tvmao关于css对网站优化的讨论


来源: 时间:07-02-10 点击: 点击这里收藏本文
对于落伍的论坛列表页,如 http://www.im286.com/forum-45-1.html ,它的源代码可以再精简一下,节省流量。
如:

将<script language="javascript" src="/include/common.js"></script> 里的代码,拿出来,不要include,这会增加一次http请求。

css定义的名称变短,将里边的空格全部删除,以节省字节数。

阿江,你的统计页中的css <link href="report.css" rel="stylesheet" type="text/css" /> 应该摘出来,放在网页中,减少一次http请求。

这些措施,看起来很微小,但在高压力请求下,非常重要。

大家上 www.iask.com ,有时它的页出不来,就是因为头部include的一个js啊。

只是建议。
--------------------------------------------------------------------------------
作者: tvmao    时间: 2006-5-12 18:34

这些东西,只适应于大流量的站点,会增加维护的难度。

大家看看 google 的页的源码,那是高人写的啊。
--------------------------------------------------------------------------------
作者: swsw007    时间: 2006-5-12 18:55

dddd
--------------------------------------------------------------------------------
作者: 阿江    时间: 2006-5-12 23:22

我的观点,看仔细一点:

假设
1.htm
2.htm
3.htm
4.css
共4个文件,每个文件都是1k。
前三个文件都调用最后一个文件,则当用户访问这三个文件的时候是这样的:
1、访问1.htm,2次http请求,占用流量2k(htm和css各1k)
2、访问2.htm,2次或1次http请求,占用流量1k。这是因为 4.css 的日期戳没有变化,所以浏览器会从缓存中读取这个文件,而不会去服务器上读取。
3、访问3.htm,1次http请求,占用流量1k,原理同上。

如果把css放在这三个htm中,则每次请求都会重复的从服务器上读取这些东西,而不可能放在缓存里,因为在访问 2.htm之前,你的浏览器根本不知道里面有一段css代码和1.htm是一样的。

所以说,将所有网页中的重复内容放在一个文件里供客户端调用,可以大大节省带宽、减轻服务器负荷、减少用户等待时间。

(要点一:css文件只会被客户端读取一次,然后就会存在于客户端的缓存中。)
(要点二:对于像css这样的直读请求,我测试iis可以承受30万个连接,每天可接受一亿次请求,所以对论坛等等等这些网站来说这样的请求别说增加一倍,就是增加100倍,都不会有影响,何况因要点一的因素,这种请求的增加是不会有一倍的,反而把css直接放在htm里面的话,数据流量会成倍增加。)

[ 本帖最后由 阿江 于 2006-5-12 23:32 编辑 ]
--------------------------------------------------------------------------------
作者: 小拨    时间: 2006-5-12 23:30

这个对个人第二次访问是好的  但是 对第一次进入来说就是 一个负担
但是负担应该不大吧
--------------------------------------------------------------------------------
作者: 阿江    时间: 2006-5-12 23:34

引用:
原帖由 小拨 于 2006-5-12 23:30 发表
这个对个人第二次访问是好的  但是 对第一次进入来说就是 一个负担
但是负担应该不大吧

回复:
虽然分两次请求,用户端的数据载入量并没有增加,
增加的只是http请求的数量,
这种增加对服务器来说是微不足道的。

对于多次请求的用户来说,放在css文件里可以让用户端不必每次都读取这些信息(因为已经存在于缓存里),这对于css文件比较大的网站来说是非常有用的。

像落伍,每个人可能要浏览成百上千页,每次都去读取重复的css信息,对网络是个大负荷,对网速不理想的用户,这会让他感觉网页加载很慢,而如果放在css里,他从第二页开始就可以少读很多信息,就可以快很多。

要点二:对于像css这样的直读请求,我测试iis可以承受30万个连接,每天可接受一亿次请求,所以对论坛等等等这些网站来说这样的请求别说增加一倍,就是增加100倍,都不会有影响,何况因要点一的因素,这种请求的增加是不会有一倍的,反而把css直接放在htm里面的话,数据流量会成倍增加。)

[ 本帖最后由 阿江 于 2006-5-12 23:42 编辑 ]
--------------------------------------------------------------------------------
作者: 阿江    时间: 2006-5-12 23:48

回二楼,google把css直接写在htm里,是因为他的css总共就只有几行,根本没有必要放在缓存里,那么这个好处就基本没用了,而把css直接放在文件里既可以减少请求数,又可以确保css被加载(如果放css里则可能因为css未加载而出现页面很难看的情况),如果我是google我也会那么做。

具体的情况要具体对待,并不是说css放在htm里就一定是好的,也并不是说独立出来就一定是好的,
看问题要全面,要具体问题具体对待。

[ 本帖最后由 阿江 于 2006-5-12 23:50 编辑 ]
--------------------------------------------------------------------------------
作者: luheboy    时间: 2006-5-13 00:12

强帖留名
闪之
--------------------------------------------------------------------------------
作者: kukuxiao    时间: 2006-5-13 00:21

潜力!
--------------------------------------------------------------------------------
作者: tvmao    时间: 2006-5-13 00:24     标题: 阿江

你的分析数据是正确的,但不同意你的观点。
在看我的观点后,请仔细去看google的页面源码,然后再来决定咱俩是谁正确。

咱俩观点的分歧在于:
客户端向服务端增加一次请求,到底对服务端影响大不大?

你的观点是:减少用户的流量是最重要的(这里,流量指下载的字节数)
我的观点是:减少用户的请求数是最重要的,至少在51.la这种站点是重要的。

用户增加一次tcp连接对服务端非常昂贵,因为要三次握手,只要你include一个css文件,无论此css是否改变,该tcp连接一定要建立,即使不下载,也已经对服务端建立了一次连接然后销毁连接。  你可以简单的认为,一次连接比打开一个服务端的文件要更昂贵,你去想想它有多重量级。

如果你的css设计超过了10k,其实已经证明你的css有问题了,应该分隔成更小的css
但换过来说,如果你的css低于10k,则你应该向google学习,将css直接写在html中,减少一次昂贵的tcp连接。

如上: 咱俩对问题的分析都没有大问题,只是咱俩对连接的重量级判断有分歧,都回家查资料吧。
我为此事多次向iask提了意见,可惜这帮哥们……

另外: 图形不在此列,图下载一次,第二次不会建立连接了。而且,ie等浏览器,对图的处理是不同的,就是说,图没有下载,甚至没有连接上,不会影响正文显示,但css与js则完全不同了,各位,小心了,尤其是做海量请求的站长们。

相信google。
--------------------------------------------------------------------------------
作者: uuker    时间: 2006-5-13 00:26

quote:
原帖由 luheboy 于 2006-5-13 00:12 发表
强帖留名
闪之
--------------------------------------------------------------------------------
作者: tvmao    时间: 2006-5-13 00:29     标题: 我想清楚的说一下我的观点是:

对于海量级请求站,一般的情况下,不要include css

css include,仅为设计者在维护时有用,对于性能,是不佳的做法。
源码中的空格,变量,脚本,冗余代码,要全部清除以确保它是干净有效的。
--------------------------------------------------------------------------------
作者: hyzed    时间: 2006-5-13 00:30

好像也有点对头.
我只知道,对于多页面来说,css放文件里方便页面风格的维护
--------------------------------------------------------------------------------
作者: 阿江    时间: 2006-5-13 00:34

现在看来问题已经很明白了,
如果给iask提意见,当然没有问题,
只是这种做法对落伍和我要啦主站来说就没必要了。

因为对落伍和我要啦来说,每个用户的浏览量很高,
css写在css文件里,
好处是可以提高客户端的加载速度(我的css文件6k,可以让网通用户减少 0.5~1 秒的等待),
坏处是增加了请求数,但是对落伍和我要啦这样的流量,这种直读的请求数增加100倍都不会对性能造成影响。
所以还是选择放在css文件里。

如果我是google,我这么做可能直接导致本来100台服务器能完成的工作却必须由120台服务器来完成。
但是我不是google,区别只是原来由 0.01 台服务器完成的工作现在由 0.02 台服务器来完成了,服务器并没有增加,却节省了带宽,加快了客户浏览网页的速度,何乐而不为呢。

[ 本帖最后由 阿江 于 2006-5-13 00:45 编辑 ]
--------------------------------------------------------------------------------
作者: fuabc81    时间: 2006-5-13 00:36

不太懂!但还是期待你们的后文!
--------------------------------------------------------------------------------
作者: tvmao    时间: 2006-5-13 00:42

增加100倍都不会有影响?不,我不认为如此

51.la 的服务有时慢时,你应该查看os此时的并发连接有多少。
显然你使用的是windows,可能从os获得这方面的信息不会很实时。

每个os对于并发的请求连接数都是有限制的,如linux可能是一个进程1024.(当然可以修改此值)。
你可以去查查windows类似的参数,然后观测在重负荷时并发连接数。

阿江,不要轻视连接,它的重要性要优先于字节数。
你的一个html a.html, 源码大小为10k,css大小为3k (假设)
如果此时将css include,我相信这从性能上讲,绝对是一个错误。
--------------------------------------------------------------------------------
作者: w5676    时间: 2006-5-13 00:50

ad位  。。。。。。。。。。。。。
--------------------------------------------------------------------------------
作者: 阿江    时间: 2006-5-13 00:52

根本不是一回事,统计计数服务器根本就没用到css的,而查看服务器也不需要获取客户端的os。
查看统计报告的页面的打开速度主要受各数据库服务器的负荷的影响。

对于直读式的连接,我的js服务器每台都承受着30万的连接,
而我的查看服务器 ( www.51.la ) 只有不到500个连接,这还是css文件独立出来的情况,
如果把css内容写在htm里,顶多也就是500变成300或者200,
能承受30万连接的服务器只给他500个连接,你想想他多轻松吧,
这就像是把你的 5 克的包袱减少为 2 克一样,你根本感觉不出来比以前轻松,因为本来就轻松得不得了。

唉,也许你想像不出来这种服务器的负荷有多轻。
但有下面的情况是肯定的:
1、把css放在htm里,直接结果就是导致网通用户多等 0.5~1 秒。
2、而把css独立出来,对服务器负荷的影响我根本感觉不到。

就是说我说的好处我切实感觉到了,而你说的坏处我感受不到。
你的好意我是明白的,你就是想帮我减轻服务器负担嘛,只是我现在服务器负担本来就很轻,没必要为了再减负担而使用户感受受到影响。

或者说,只要我服务器受得了,那怕付出100倍的服务器负荷,如果有能让用户快上0.5~1秒的方法,我照样会采用,反正服务器闲着也是闲着。

[ 本帖最后由 阿江 于 2006-5-13 01:05 编辑 ]
--------------------------------------------------------------------------------
作者: 天毅    时间: 2006-5-13 00:59

这个帖子不该加分也该高亮
我们需要的是这种帖子
即使看不懂
但是至少是有技术含量的
--------------------------------------------------------------------------------
作者: tvmao    时间: 2006-5-13 01:07

呵呵,说远了,打住,好运。

我一直在免费使用51.la的系统,在此致谢!
--------------------------------------------------------------------------------
作者: 阿江    时间: 2006-5-13 01:10

quote:
原帖由 tvmao 于 2006-5-13 01:07 发表
呵呵,说远了,打住,好运。
我一直在免费使用51.la的系统,在此致谢!
我的意思你明白了吧?
我不是反驳你说你说的方法不能节省服务器资源,
我只是说我的资源现在够用,没必要省这点资源。

你看 ibm.com / w3c.org 这些网站都是把css放在css文件里,
因为对于这些网站来说增加这一点点连接数都不算什么。

但像google那种情况,他的css很简单,直接放在htm里用户几乎感觉不到延迟,
而这么做可能为google节省了几十台甚至几百台服务器

[ 本帖最后由 阿江 于 2006-5-13 01:17 编辑 ]

--------------------------------------------------------------------------------
作者: shift    时间: 2006-5-13 01:20

两位高人的观点都正确,既然html有link css,那么就有它的理由:

1. css 文件内容极少,放在html里最合适
2. css 文件内容大于1k以上,放在css里,重要的是其维护容易,另外,ie等浏览器的确会像缓存图片一样缓存css的,用户的第二访问,根本不会有css的http请求(要看ie等),而是直接读取缓存里的css,另外用户还可以少下载1k的css,每次

这里我同意阿江的看法,根据不同的情况而选择,特别是当css越大,越有好处,第二点可以看出

你或许会问css怎么你会越搞越大呢?呵呵,君不见现在div+css流行了吗?对于设计来讲,根本不比table直观

可是,当使用div+css, 使用div本身代码量都比table少,再加上很多样式都使用css定义,css就会变大,一变大,就符合上面的第二点, 用户每次请求都少了好多流量

如 table + css 分别是 50k + 5k
像 div + css 可能分别是 30k + 15k

前者,用户每次下载 50k, 后者, 用户每次下载 30k, 你说哪个更省服务器资源

当然,这种适用于,用户的连续访问超过一次,但现在几乎没有只访问一次而已的

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.