web高性能开发系列随笔

web高性能开发系列随笔

     在BlogJava里写了一些关于高性能WEB开发的随笔，因为都是跟前端技术相关(html,http,js,css等)，所以也贴到博客园来，吸收下人气。

1、 HTTP服务器.

2、性能测试工具推荐

3、 图片篇.

4、 如何加载JS，JS应该放在什么位置.

5、 为什么要减少请求数，如何减少请求数.

6、 减少请求，响应的数据量.

7、JS、CSS的合并、压缩、缓存管理

8、页面呈现、重绘、回流。

9、该如何加载google-analytics(或其他第三方)的JS.

10、疯狂的HTML压缩.

11、flush让页面分块,逐步呈现

12、了解CSS的查找匹配原理，让CSS更简洁、高效

[作者]：BearRui(AK-47)
[博客]: http://www.cnblogs.com/BearsTaR/
[声明]:本博所有文章版权归作者所有(除特殊说明以外)，转载请注明出处.

Tag标签: js,WEB,css,html,http

BearRui(AK-47)
关注 - 3
粉丝 - 68

荣誉：推荐博客

关注博主

36

2

0

(请您对文章做出评价)

« 上一篇：管理好程序中的DLL
» 下一篇：该如何加载google-analytics(或其他第三方)的JS

posted on 2010-05-12 09:46 BearRui(AK-47) 阅读(8512) 评论(58) 编辑 收藏 所属分类: 高性能WEB开发

发表评论

1872691

　回复　引用　查看　  

#1楼 2010-05-12 09:52 | 坤坤      

好文！

　回复　引用　查看　  

#2楼 2010-05-12 10:06 | Flymouse      

收藏

　回复　引用　查看　  

#3楼[楼主] 2010-05-12 10:08 | Bear.sTaR{R}      

谢谢楼上2位的支持，以后还会继续更新，^_^

　回复　引用　查看　  

#4楼 2010-05-12 10:13 | Otis's Technology Space      

非常不错的文章。

　回复　引用　查看　  

#5楼[楼主] 2010-05-12 10:51 | Bear.sTaR{R}      

@Otis's Technology Space
谢谢

　回复　引用　查看　  

#6楼 2010-05-12 11:47 | killkill      

这个不顶就没天理了

　回复　引用　查看　  

#7楼 2010-05-12 11:51 | 虎山之王      

总结不错的 顶下

　回复　引用　查看　  

#8楼 2010-05-12 11:55 | 侯垒      

非常的不错。

　回复　引用　查看　  

#9楼[楼主] 2010-05-12 12:11 | Bear.sTaR{R}      

很开心有这么多朋友支持啊，以后再写前端的技术文章，就都copy过来，希望大家能都支持支持。

　回复　引用　查看　  

#10楼 2010-05-12 13:21 | 空杯楠      

不错，推荐并搜藏

　回复　引用　查看　  

#11楼 2010-05-12 13:22 | chingho      

收藏。谢谢分享！

　回复　引用　查看　  

#12楼 2010-05-12 13:32 | wpskl      

我有个问题，请教一下：
tomcat服务器，页面为jsp，启动服务器之后，在jsp页面中button按钮上设置了css(含有图片)，第一次鼠标经过的时候，会看到浏览器窗口左下脚下载图片的提示，再次经过就没有了。但是如果tomcat停止再启动，刚才的页面不关闭，鼠标再次经过刚才的button按钮，又会出现下载的信息。这是为什么呢？如果我没有描述清楚，可以查看tomcat jsp 图片加载的疑惑。

　回复　引用　查看　  

#13楼 2010-05-12 13:40 | 冰封e族      

全部看完了，确实很有帮助，谢谢分享！

　回复　引用　查看　  

#14楼[楼主] 2010-05-12 13:43 | Bear.sTaR{R}      

@wpskl
第一次出现下载情况很正常，因为你这个图片没被下载过，tomcat停止后再启动又出现下载情况，是因为图片没有被缓存到。相信你使用的是背景图片，而且使用的是IE6测试。IE6对背景图片缓存存在BUG。

解决方法请查看“图片篇”这篇文章，里面最后面有解决IE6 BUG的方法。

其实这种button的按钮图片，建议使用css Sprites技术把图片合并在一起，这样第一次鼠标移动也不会出现下载的问题。

　回复　引用　查看　  

#15楼 2010-05-12 14:37 | PointNet      

不错，收藏了

　回复　引用　查看　  

#16楼[楼主] 2010-05-12 14:53 | Bear.sTaR{R}      

多谢这么多同学支持，又写了篇关于JS的:http://www.cnblogs.com/BearsTaR/archive/2010/05/12/best_use_google_analytics.html
希望大家都提意见。

　回复　引用　查看　  

#17楼 2010-05-12 16:13 | wpskl      

引用

Bear.sTaR{R}：
@wpskl
第一次出现下载情况很正常，因为你这个图片没被下载过，tomcat停止后再启动又出现下载情况，是因为图片没有被缓存到。相信你使用的是背景图片，而且使用的是IE6测试。IE6对背景图片缓存存在BUG。

解决方法请查看“图片篇”这篇文章，里面最后面有解决IE6 BUG的方法。

其实这种button的按钮图片，建议使用css Sprites技术把图片合并在一起，这样第一次鼠标移动也不会出现下载的问题。

谢谢您的回答！
我使用的是IE7，你说的图片没有被缓存，为什么第一次显示加载，只要tomcat不关闭，就不再显示了，如果关闭再启动，就会显示加载。它知道tomcat服务关闭了，还是根据什么原理来判断的？

　回复　引用　查看　  

#18楼 2010-05-12 16:19 | ☆用心生活☆      

看来晚上有的时间看这连载博文了，大家评价不错...

　回复　引用　查看　  

#19楼 2010-05-12 16:29 | Jason Deign      

收藏了 不错哦

　回复　引用　查看　  

#20楼[楼主] 2010-05-12 16:46 | Bear.sTaR{R}      

引用

wpskl：
谢谢您的回答！
我使用的是IE7，你说的图片没有被缓存，为什么第一次显示加载，只要tomcat不关闭，就不再显示了，如果关闭再启动，就会显示加载。它知道tomcat服务关闭了，还是根据什么原理来判断的？

这应该跟tomcat没关系，你是否在tomcat关闭，重新启动后，是按F5刷新页面进行测试的，如果是的话，哪肯定会请求，因为F5会强制去服务器检查文件是否过期，不过期会返回304状态结果。

如果不是按F5，而是直接打开页面的话，我这里测试不会出现你这样的问题。

　回复　引用　查看　  

#21楼 2010-05-12 16:47 | 史建敏      

/**
@ 史建敏 测试
*/

　回复　引用　查看　  

#22楼 2010-05-12 17:46 | 囧月      

UP~，内容很丰富！

　回复　引用　查看　  

#23楼 2010-05-13 02:29 | skyaspnet      

您好，想请教一个问题，ASP。NET中如何去掉生成的静态HTML源码中的空白？期待您的解答，谢谢！

　回复　引用　查看　  

#24楼[楼主] 2010-05-13 08:40 | Bear.sTaR{R}      

引用

skyaspnet：您好，想请教一个问题，ASP。NET中如何去掉生成的静态HTML源码中的空白？期待您的解答，谢谢！

我不知道ASP.NET中央美院类似yuicompressor的工具(我用JAVA的)，yuicompressor虽然是压缩JS的，但只要改一改就可以压缩HTML，原理其实差不多，就是用正则表达式替换。

当然你还可以启动IIS的GZIP对你生成的HTML进行压缩，这样就完全不需要去掉空白了。因为你去掉空白和不去掉空白，gzip压缩后的大小都差不多。

如果只是正对静态html页面，应该还可以在生成静态html页面的时候，自己调用gzip压缩后再写入html文件，这样就免去iis中每次请求都压缩的情况了(不过这个完全属于理论，要实践后才知道是否可行)

　回复　引用　查看　  

#25楼 2010-05-13 10:15 | 吮指原味鸡      

受益匪浅!
感激不尽!

　回复　引用　查看　  

#26楼[楼主] 2010-05-13 10:53 | Bear.sTaR{R}      

引用

吮指原味鸡：
受益匪浅!
感激不尽!

哈哈，对大家有用就好。

　回复　引用　查看　  

#27楼 2010-05-13 11:11 | skyaspnet      

引用

Bear.sTaR{R}：

引用

skyaspnet：您好，想请教一个问题，ASP。NET中如何去掉生成的静态HTML源码中的空白？期待您的解答，谢谢！

我不知道ASP.NET中央美院类似yuicompressor的工具(我用JAVA的)，yuicompressor虽然是压缩JS的，但只要改一改就可以压缩HTML，原理其实差不多，就是用正则表达式替换。

当然你还可以启动IIS的GZIP对你生成的HTML进行压缩，这样就完全不需要去掉空白了。因为你去掉空白和不去掉空白，gzip压缩后的大小都差不多。

如果只是正对静态html页面，应该还可以在生成静态html页面的时候，自己调用gzip压缩后再写入html文件，这样就免去iis中每次请求都压缩的情况了(不过这个完全属于理论，要实践后才知道是否可行)

非常感谢：）

　回复　引用　查看　  

#28楼[楼主] 2010-05-13 12:23 | Bear.sTaR{R}      

引用

skyaspnet：非常感谢：）

不客气，共同学习，共同进步...

　回复　引用　查看　  

#29楼 2010-05-17 10:37 | Deper      

本文对我很有帮助，极力推荐。

　回复　引用　查看　  

#30楼[楼主] 2010-05-17 11:53 | Bear.sTaR{R}      

@Deper
谢谢支持，^_^

　回复　引用　查看　  

#31楼 2010-05-17 13:38 | 问题很严重，加班吧。      

呵呵，搜藏了

　回复　引用　查看　  

#32楼 2010-05-18 18:00 | Kevan      

马克思一下。

　回复　引用　查看　  

#33楼 2010-05-19 10:50 | 蔺文龙      

技术大牛

　回复　引用　查看　  

#34楼[楼主] 2010-05-19 12:10 | BearRui(AK-47)      

引用

蔺文龙：技术大牛

过奖了

　回复　引用　查看　  

#35楼 2010-05-19 12:17 | zoti      

不错，收藏了

　回复　引用　查看　  

#36楼 2010-06-05 11:17 | 日心尧亘      

问章很不错 收藏了

　回复　引用　查看　  

#37楼[楼主] 2010-06-05 11:56 | BearRui(AK-47)      

谢谢，^_^

　回复　引用　查看　  

#38楼 2010-06-09 08:44 | 风枫峰      

博主还需努力啊!

　回复　引用　查看　  

#39楼 2010-06-09 08:44 | 风枫峰      

文章很精彩，推荐一下!

　回复　引用　查看　  

#40楼 2010-06-09 08:47 | 风枫峰      

楼主下边的是怎么实现啊，点了一下结果在下边出现了，呵呵

　回复　引用　查看　  

#41楼[楼主] 2010-06-09 08:48 | BearRui(AK-47)      

引用

风枫峰：楼主下边的是怎么实现啊，点了一下结果在下边出现了，呵呵

你查看下源代码就能看到了，JS实现的。

　回复　引用　查看　  

#42楼 2010-06-10 10:29 | Wolves      

好文章，顶一下!

　回复　引用　查看　  

#43楼[楼主] 2010-06-10 10:36 | BearRui(AK-47)      

@Wolves
谢谢,^_^

　回复　引用　查看　  

#44楼 2010-06-10 12:04 | Q玲珑      

好文章，顶一下!

　回复　引用　查看　  

#45楼[楼主] 2010-06-10 14:34 | BearRui(AK-47)      

@Q玲珑
多谢支持

　回复　引用　查看　  

#46楼 2010-06-18 11:24 | nicye      

文章很精彩，推荐一下!

　回复　引用　查看　  

#47楼[楼主] 2010-06-18 11:24 | BearRui(AK-47)      

谢谢推荐，^_^

　回复　引用　查看　  

#48楼 2010-06-18 13:53 | cexoiqpl      

好文章，顶一下!

　回复　引用　查看　  

#49楼 2010-06-24 17:09 | zhangle      

好文章，顶一下!

　回复　引用　  

#50楼 2010-06-24 18:07 | - -||[未注册用户]

niu bi

　回复　引用　查看　  

#51楼 2010-07-02 09:58 | Jason3      

支持！

　回复　引用　查看　  

#52楼[楼主] 2010-07-02 10:12 | BearRui(AK-47)      

引用

Jason3：支持！

谢谢，^_^

　回复　引用　查看　  

#53楼 2010-07-14 09:15 | xuyuanever      

太漂亮了，忍不住要赞美下。

　回复　引用　查看　  

#54楼[楼主] 2010-07-14 09:26 | BearRui(AK-47)      

@xuyuanever
^_^,谢谢支持

　回复　引用　查看　  

#55楼 2010-07-16 09:55 | 拉拉叟      

非常有帮助！！！

　回复　引用　查看　  

#56楼[楼主] 2010-07-16 09:57 | BearRui(AK-47)      

谢谢，有帮助就好...

　回复　引用　查看　  

#57楼 2010-07-16 11:56 | 顾客      

受益匪浅，太有用的技巧！

　回复　引用　查看　  

#58楼[楼主] 2010-07-16 12:20 | BearRui(AK-47)      

@顾客
呵呵，有用就好