上一篇
下一篇
DHTML群关于浏览器数据请求效率优化的讨论
作者:dh20156 日期:2007-06-14
DHTML群关于浏览器数据请求效率优化的讨论
日期：2007-6-14
FlashSoft 10:28:42
抛题
FlashSoft 10:28:47
A.减少HTTP请求次数.
B.减少被请求文件大小.
C.减少请求数据占用的网络带宽.
D.让用户更快的看到想要的结果.
E.提高客户端渲染速度.
F.让浏览器同时能请求更多的数据.
G.提高服务器相应速度.
H.通过版本化控制客户端Cache
叶子 10:29:11
要对策？
FlashSoft 10:29:23
除了以上一些方法来提高客户端效率,还有什么可以提高客户端呈现的
风之石 10:29:26
呵呵，进展如何？
梅花雪-招人 10:29:44
这些问题我的 jsframework 全部解决，嘿嘿
FlashSoft 10:29:45
先找各方面原因的先
FlashSoft 10:30:02
梅子,不一定吧
梅花雪-招人 10:30:12
一定的，
FlashSoft 10:30:15
你的fw如何解决问题F
梅花雪-招人 10:30:26
用框架来解决加载问题。
FlashSoft 10:30:42
- -!!!
浏览器同时请求的连接数是2,你的fw再牛也无法解决啊
FlashSoft 10:30:52
同域的请求数只能是2
FlashSoft 10:31:00
当然,IE可以通过注册表解决
梅花雪-招人 10:31:15
在我的框架里，浏览器绝对不会发出脚本文件加载的HTTP请求
梅花雪-招人 10:31:39
既使页面里要加载一百个模块也不会向服务器发HTTP请求
风之石 10:31:46
meizz，新版的论坛速度太慢
FlashSoft 10:31:56
风之石,我太爱你
风之石 10:32:08
FlashSoft 10:32:12
梅子,那模块在哪儿
梅花雪-招人 10:32:35
速度慢的问题我测试过，即使把所有脚本拿，速度依旧，所以慢的问题不在脚本上
梅花雪-招人 10:32:51
模块全部写在你的本地硬盘里。
FlashSoft 10:33:07
比如问题G中的,提高服务器相应速度的办法可能就是单独启用一个顶域名来解决
让其域下无Cookie,提高服务器解析header头的速度
风之石 10:33:09
就是被cache了？
FlashSoft 10:33:10
- -!
FlashSoft 10:33:42
梅花雪-招人(112889082) 10:32:35
速度慢的问题我测试过，即使把所有脚本拿，速度依旧，所以慢的问题不在脚本上
呵呵,我说的就不仅仅是js方面的提高速度
而是全方面的提高整个站点的呈现速度
梅花雪-招人 10:33:44
不是浏览器的缓存策略
风之石 10:33:56
那怎么操作到客户端？
梅花雪-招人 10:34:12
代码网上有，自己看哟。
叶子 10:34:19
userdata？非ie呢？ff有sessionStorage
梅花雪-招人 10:34:54
所有的浏览器都支持内存内共享的！
风之石 10:35:04
来，学习一下
风之石 10:35:25
讲讲你的实现吧
FlashSoft 10:35:41
对啊,别吝啬
梅花雪-招人 10:35:41
所以，所有同源的浏览器，脚本文件是不需要请求第二次的。
FlashSoft 10:36:25
不理解
FlashSoft 10:36:44
文件级请求只有3种状态
200
304
cache
FlashSoft 10:36:47
你的是哪种.
梅花雪-招人 10:37:29
根本不发出任何HTTP请求
FlashSoft 10:37:59
大梅小气,不愿意共享代码
梅花雪-招人 10:38:04
即使是 304 也会消耗网络资源的对不？
梅花雪-招人 10:38:19
你自己去看呀，我的所有源码都是公开的，
梅花雪-招人 10:38:30
也没有做任何的保密措施
风之石 10:38:32
讲讲实现过程吧！
风之石 10:38:41
听老师讲更容易理解
梅花雪-招人 10:39:01
var S=window.System=function(){this.setHashCode();}
S._codebase={};try{
if(window!=parent && parent.System && parent.System._codebase)
S._codebase=parent.System._codebase;
else if(typeof(opener)!="undefined"&&opener.System&&opener.System._codebase)
S._codebase=opener.System._codebase;
else if(typeof(dialogArguments)!="undefined" && dialogArguments.System)
S._codebase=dialogArguments.System._codebase;}catch(ex){}
FlashSoft 10:39:01
304状态,如果访问者到服务器经过的节点多,响应速度很慢滴
梅花雪-招人 10:39:56
用上述代码，实现 System._codebase 这个对象在内存里被所有的同源浏览器共享到！
FlashSoft 10:40:16
可是必须访问过,是不是
FlashSoft 10:40:28
如果浏览器全部关闭,重新开站点,结果如何?
梅花雪-招人 10:40:32
所有加载过的脚本代码都会存储在这个对象里。
梅花雪-招人 10:40:56
如果是IE，是不会重新请求的。
梅花雪-招人 10:41:01
用 userdata
FlashSoft 10:41:39
非常大的js从userdata里面取回来也是有开销滴
风之石 10:41:44
大概好象明白一点思路
梅花雪-招人 10:41:50
用 userdata 解决了91％的用户，用内存共享解决了100%的用户
梅花雪-招人 10:42:08
这个开销远小于从服务器端取。
FlashSoft 10:42:29
是,但是下次更新了怎么处理
梅花雪-招人 10:42:34
且节约了请求数和带宽
梅花雪-招人 10:43:00
有办法解决的。
FlashSoft 10:43:01
请求了一次就丢入userdata
FlashSoft 10:43:13
下次通过版本判断来决定是否更新userdata
梅花雪-招人 10:43:22
放进 userdata 的时候你可以加上一个全局的版本号
风之石 10:43:41
FlashSoft 10:43:53
那FF用户如何处理的
梅花雪-招人 10:43:58
用这种办法解决了脚本的加载效率问题。
梅花雪-招人 10:44:13
用 userdata 解决了91%的用户，用内存共享解决了100%的用户
FlashSoft 10:44:22
内存共享怎么说?
梅花雪-招人 10:44:34
上面那么多，我白说了
FlashSoft 10:44:49
梅花雪-招人(112889082) 10:39:56
用上述代码，实现 System._codebase 这个对象在内存里被所有的同源浏览器共享到！
FlashSoft 10:45:44
但是,关闭了浏览器重新来,一样要请求啊
风之石 10:46:05
关闭了就从userdata里取，不过FF怎么整？
FlashSoft 10:46:16
我问的就是FF
梅花雪-招人 10:46:18
嗯，你关闭了其中的一两个页面，不会影响
FlashSoft 10:46:28
是全部关闭....
梅花雪-招人 10:46:42
嘿嘿，我问一下，sina的FF访问用户量占多少比例？
FlashSoft 10:46:58
8%
梅花雪-招人 10:48:11
对这 8% 虽然不是完美的解决，但也已经照顾了，还不够吗？
风之石 10:48:49
他的意思就是内存共享那部分算是给他们的照顾
FlashSoft 10:48:55
我知道
风之石 10:48:57
也可以理解
FlashSoft 10:49:01
但是这只是js部分
风之石 10:49:01
FlashSoft 10:49:04
css部分呢
FlashSoft 10:49:06
html部分呢
FlashSoft 10:49:10
image部分呢
叶子 10:49:14
这个也缓存。。。太bt了。
桃花岛主 10:49:16
梅花雪-招人 10:49:19
嘿嘿，我潜尽半年多研究CSS
FlashSoft 10:49:22
这都是影响速度的东西
梅花雪-招人 10:49:35
现在感觉应该不比AOAO差了。
叶子 10:49:42
另：貌似不同域名userdate不能共享。。。
风之石 10:49:44
桃花岛主 10:49:54
我觉得要解决这东西，还不如整个都拷给用户去本机用
叶子 10:49:57
图片 css 压缩之后用etag，可以了。
梅花雪-招人 10:50:11
对于CSS，我说两点
梅花雪-招人 10:50:53
1. <p class="aoao meizz">
2. 使用一张大图片，通过不同的 background-position 来表现
风之石 10:51:18
就像游戏
梅花雪-招人 10:51:26
做得好，可以节约出一半的图片请求数！！
FlashSoft 10:51:30
1.那个是css写法问题
梅花雪-招人 10:51:54
那不是写法问题，而是如何提高效率的问题。
桃花岛主 10:52:10
嗯，那个方法好猥琐啊，一开始我看到的时候还没明白他是干吗，哈哈
FlashSoft 10:52:18
2,图片切割是挺好的
但是也会产生304请求
梅花雪-招人 10:52:56
举个例子，你看现在新版的CSDN帖子
FlashSoft 10:53:29
除非你在css的图片请求前,把这个图片载入到image对象中去
var s = new Image;
s.src = "xxxx";
后面的css请求的图片就不会有请求了
梅花雪-招人 10:53:30
里面的所有三角 星级图片都是一张图，只会发一次HTTP请求，
梅花雪-招人 10:53:50
我在说CSS，不要掺杂JS
飘零雾雨 10:53:54
1. <p class="aoao meizz">
飘零雾雨 10:53:55
2. 使用一张大图片，通过不同的 background-position 来表现
梅花雪-招人 10:54:02
CSS有它自己的解决方案。
飘零雾雨 10:54:03
这两点非常好
FlashSoft 10:54:29
是啊,但是你写那么多css,虽然指向到同一图片,也会有304请求滴
梅花雪-招人 10:55:09
呵呵，你还没明白 <p class="aoao meizz"> 的用外，明白了就会知道这样做会少很多请求数
FlashSoft 10:55:58
.a1{
background:url(sina.gif);
}
.a2{
background:url(sina.gif);
}
<input class=a1>
<input class=a2>
这样有两个请求
第一个是200,第二个是304
FlashSoft 10:56:40
我当然明白,我现在很多地方都是这样做的
并且我在这之前做了一个new Image对象,载入这个图片,后面连304请求都不会有了
梅花雪-招人 10:57:11
.aoao{background:url(sina.gif) no-repeat left}
.meizz{background-position:right top}
<p class="aoao">
<p class="aoao meizz">
FlashSoft 10:57:55
var s= new Image;
s.src=sina.gif
.a1{
background:url(sina.gif);
}
.a2{
background:url(sina.gif);
}
<input class=a1>
<input class=a2>
不如这样容易理解
梅花雪-招人 10:57:57
你说这样会产生几次HTTP请求？
风之石 10:58:38
3次估计
梅花雪-招人 10:58:49
自己测试一下吧
风之石 10:58:58
应该用 s.src 吧？
FlashSoft 10:59:12
不用的,内存中有,不会请求滴
FlashSoft 10:59:20
我测试过很多次了
梅花雪-招人 10:59:28
.aoao{background:url(sina.gif) no-repeat left}
.meizz{background-position:right top}
<p class="aoao">
<p class="aoao meizz">
你说这样会产生几次HTTP请求？
FlashSoft 10:59:43
貌似也会两次,做个测试吧.
FlashSoft 11:00:05
口说无凭,测试了再弄
梅花雪-招人 11:00:17
嘿嘿，我自己测试过了。
FlashSoft 11:00:22
嗯
FlashSoft 11:00:24
我再测试
风之石 11:01:11
用啥工具测试？
叶子 11:01:27
HttpAnalyzer？
梅花雪-招人 11:01:30
监视HTTP请求包的工具
风之石 11:01:46
共享里有米？ ^_^
梅花雪-招人 11:02:30
iedevtbar.msi
梅花雪-招人 11:02:36
这个也可以监视
FlashSoft 11:02:48
FF下用Live Http Headers
FlashSoft 11:04:09
奇怪的,现在只要是一张图片,不管你如何写,的确只有一次请求
FlashSoft 11:04:20
写法不论
梅花雪-招人 11:04:23
嘿嘿。
FlashSoft 11:04:58
包括这个写法...
<script language="JavaScript">
<!--
var s = new Image;
s.src="http://blog.sina.com.cn/images/logo.gif";
//-->
</script>
<style>
.a{background:url("http://blog.sina.com.cn/images/logo.gif") no-repeat left}
.d{background:url("http://blog.sina.com.cn/images/logo.gif") no-repeat left}
.b{background-position:right top}
.c{background-position:right top}
</style>
</head>
<body>
<input class="a b">
<input class="d c">
</body>
</html>
风之石 11:05:36
都只请求一次吗？
FlashSoft 11:05:52
是,请求一次
风之石 11:05:58
cool
FlashSoft 11:06:02
但是的确可以通过new Image的方法把请求提前.
风之石 11:06:11
FlashSoft 11:06:37
呵呵,关于慢速访问解决的比较好的站点是
mail.aol.com
的确很不错
慢速网络做到渲染跟数据载入同步,很好很好
梅花雪-招人 11:08:49
当然如何切分页面会严重影响页面展现模式。
梅花雪-招人 11:09:10
所以我花了大半年的时候来研究这个东东！
FlashSoft 11:09:15
应该是说,如何有效的利用浏览器那两个下载进程
FlashSoft 11:09:37
让这两个下载进程有效的保证页面框架优先渲染
FlashSoft 11:09:59
并且通过开启多域名来增加有效的下载进程
梅花雪-招人 11:10:35
解决的方案有很多。
梅花雪-招人 11:11:14
海绵里的水不多，但挤挤还是会有的。
FlashSoft 11:11:37
呵呵,所以说啊
回到前面所说,FW无法全部解决访问效率问题
风之石 11:11:40
乳沟
梅花雪-招人 11:11:48
YD
FlashSoft 11:11:48
怎么感觉大家都在忽悠大梅
梅花雪-招人 11:12:05
FW是脚本的解决方案。
风之石 11:12:08
梅花雪-招人(112889082) 11:11:48
YD
你真YD
FlashSoft 11:12:28
是嘛,我刚刚提出的那么多点,其实是想从各方面来优化访问效率
风之石 11:12:45
都很有价值
梅花雪-招人 11:12:52
解决了JS CSS HTML 三个问题，那网页里还有什么问题？
叶子 11:12:58
flash...
FlashSoft 11:12:59
比如说,如何减少请求数就包括了
合并js/css
如何减少图片请求
FlashSoft 11:13:09
嗯,包括flash iframe等
FlashSoft 11:13:31
因为iframe的请求是会停止后面的渲染,优先下载iframe中的数据滴.
梅花雪-招人 11:13:38
不想打击FlashSoft，所以我不谈FLASH
风之石 11:13:49
FlashSoft 11:14:12
- 0-!
跟我有啥关系
梅花雪-招人 11:14:34
谁让你的名字里带 flash 的
FlashSoft 11:14:53
解决flash又不是解决FlashSoft
FlashSoft 11:14:55
偶活的挺好的哈
FlashSoft 11:15:04
如何减少HTTP请求数
1.合并JS, CSS文件.
2.合并框架图片以及相对变动较少的图片成一张,通过CSS背景切割来完成渲染.
3.合理使用本地Cache来缓存JS/CSS/IMAGE
叶子 11:15:59
加个etag 好东西来的。简单crc校验就可以不用加载重复文件了。
FlashSoft 11:16:13
Etag不是本地Cache的一个方式么?
叶子 11:16:34
呃。是。
梅花雪-招人 11:16:38
还有其它的解决方案，比如GZIP等
叶子 11:16:49
gzip压缩静态文件不错
叶子 11:17:01
不过gzip应该是减少请求文件大小吧
FlashSoft 11:17:02
Gzip也是有很多地方需要注意的
双刃剑啊
FlashSoft 11:17:26
Apache1里的gzip模块使用的是磁盘缓存,而不是内存做缓存
所以效率低
梅花雪-招人 11:17:27
所以我将它归类到其它解决方案
FlashSoft 11:17:57
当然你要用Ram Disk就没的说了
梅花雪-招人 11:18:20
倒，ram disk ，谁这么大款？
叶子 11:18:41
一个单独服务器来存静态文件好了。。。
梅花雪-招人 11:18:42
给我来 30GB 吧。
风之石 11:19:36
FlashSoft 11:19:42
但是apahce又有预压缩,难以取舍啊
FlashSoft 11:20:10
是apache2有预压缩功能
文章来自: 
引用通告: 
Tags: 
