Hello World
Spiga

挣脱浏览器的束缚(1) - 前言

2007-01-18 17:08 by 老赵, 7123 visits

最近在为某个人门户站点作优化。

从传统意义上来说,这个站点的各方面都属中规中矩。不过作为一个以客户端为中心的Web应用,其性能,尤其是它的感知性能(Perceived Performance),经常会严重受制于浏览器本身。一个没有对客户端数据访问模型经过精心设计和优化的应用,其导致的结果往往就是无法充分利用带宽,让用户等待的时间变长。换句话说,其Perceived Performance需要进一步的提高。

突破浏览器限制,充分利用带宽,提高性能,尤其是Perceived Performance等等,就是我这次优化的目的。在接下来的几篇文章里,我将以数据说话,探讨浏览器的限制,并从多个方面来谈一下这次优化的各种方式。由于该个人门户使用了ASP.NET AJAX进行开发,因此我也将会给出一些基于ASP.NET AJAX的解决方案,希望会有一定参考价值,对朋友们能有所帮助。

 

工具

本着实事求是的原则,我们需要使用数据来说话,于是我们也就需要一些好用的工具。它们可以帮助我们统计各种数据,以便我们进行分析和优化。

在IE中,我们需要使用Http Watch这个工具来统计页面中每个请求的信息,例如开始时间,持续长度等等,能够轻松得出详细的数据(图1),非常好用。而且对于我们来说,一个Free Edition已经足够使用了。Free Edition虽然无法得到每次请求的所有信息,但是我们已经有了再熟悉不过的Fiddler。我们完全可以通过那些数据使用Excel作出统计图表(图2),进行分析。


图1:访问http://www.google.com的统计数据


图2:使用Office 2007绘制的统计图表

在FireFox下面,我一开始使用的是Google Page Load Analyzer,但是发现使用起来实在不方便,它既无法向Http Watch一样得到详细的信息,以便我们作出统计图表;而它自动生成的示意图又非常难看,很难进行分析。后经人提醒,最新的FireBug也有类似的功能。装上一看,果然好用。虽然无法获得精确数据,但是它生成的示意图(图3)已经可以直接进行分析了。


图3:访问http://www.cnblogs.com时FireBug绘制的统计示意图

此外,为了在本地或局域网内模拟低网速的情况,我再推荐一款工具NetLimiter 2 Pro。它能够对于某个程序、进程甚至某个连接在访问网络时的带宽进行限制,无论是因特网、局域网还是本机(图4)。最后,例如IE Dev Toolbar等工具自然也是必备的,我们可以在需要的时候使用它们。


图4:使用NetLimiter 2 Pro限制IE的带宽 

有了上面这些工具,就可以开始我们的分析优化之旅了。

Creative Commons License

本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或用于商业目的,但是必须保留本文的署名赵劼(包含链接),具体操作方式可参考此处。如您有任何疑问或者授权方面的协商,请给我留言

Add your comment

25 条回复

  1. 老赵
    admin
    链接

    老赵 2007-01-18 17:09:00

    最近事情有些多,不过还是抽时间出来时不时写一些比较好……

  2. Go_Rush
    *.*.*.*
    链接

    Go_Rush 2007-01-18 17:56:00

    除了 NetLimiter 其他工具都用得很爽。

    Fiddler 其实要比 Http Watch 好用很多。
    因为 Fiddler 支持 JScript.NET 可以把所有的连接信息保存到数据库再慢慢分析。
    当然,调试阶段用Http Watch足够了。 毕竟 Fiddler会自动给你弄个127.0.0.1的Web代理


    FireBug 除了自带性能分析和 内置 Ajax 分析外
    还可以在js源代码中直接 写入
    console.time
    console.timeEnd
    来计算代码,函数,或者请求的执行时间

    FireBug 还支持在源程序中直接输入
    console.log,
    console.debug,
    console.log,
    console.info,
    console.warn,
    console.error,
    console.assert, 输出 log信息, 太强了

  3. 木野狐
    *.*.*.*
    链接

    木野狐 2007-01-18 18:08:00

    我一般用 Fiddler.

  4. 老赵
    admin
    链接

    老赵 2007-01-18 19:15:00

    @Go_Rush
    FireBug添加的window.console对象的确很强。

  5. 老赵
    admin
    链接

    老赵 2007-01-18 19:18:00

    @木野狐
    Fiddler看上去不太舒服,而HttpWatch使用起来其实非常方便。
    另外,Fiddler的话会截下所有的Http请求,这样如果还开着别的网页,甚至只是个IM,就会得到很多没有必要的请求信息。这点Http Watch就好多了,呵呵。

  6. 老赵
    admin
    链接

    老赵 2007-01-18 20:15:00

    @Go_Rush
    对了,其实HttpWatch也支持开发的。

  7. 阿一
    *.*.*.*
    链接

    阿一 2007-01-18 20:58:00

    好东西啊!

  8. 老赵
    admin
    链接

    老赵 2007-01-18 21:01:00

    @阿一
    没错,开发利器!

  9. 星宿.NET
    *.*.*.*
    链接

    星宿.NET 2007-01-18 23:52:00

    ....这些工具从来没用过....

  10. 老赵
    admin
    链接

    老赵 2007-01-19 00:27:00

    @星宿.NET
    都是很重要的工具。:)

  11. Leem
    *.*.*.*
    链接

    Leem 2007-01-19 10:10:00

    除了Fiddler,其它的都在用,对开发分析数据确实起来很大的帮助.

  12. ZergTant
    *.*.*.*
    链接

    ZergTant 2007-01-19 10:57:00

    @Jeffrey Zhao
    Fiddler是加了一个ie的web代理,所以你本地的任何使用ie代理的连接都会被截包,所以说他的这个方面不是很好,我现在用微软的Microsoft Network Monitor 3.0
    感觉还不错虽然没那么多统计,但是很好用

  13. 老赵
    admin
    链接

    老赵 2007-01-19 12:05:00

    @Leem
    没有它们已经很难做事了……

  14. 老赵
    admin
    链接

    老赵 2007-01-19 12:06:00

    @ZergTant
    没错,而且它的过滤机制也很难帮的上忙。

  15. 马哥
    *.*.*.*
    链接

    马哥 2007-01-20 07:21:00

    感谢,看来要努力实践下了

  16. daisylh
    *.*.*.*
    链接

    daisylh 2007-01-20 08:15:00

    好文!謝謝~繼續關注中

  17. 老赵
    admin
    链接

    老赵 2007-01-20 15:25:00

    @马哥
    @daisylh
    :)

  18. 爆牙齿
    *.*.*.*
    链接

    爆牙齿 2007-01-22 18:39:00

    没时间细看,先收藏并致谢!
    对性能的追求是无止境的,那是用户体验的根基。
    说起性能其实很多人的反应会是后台服务器端的程序优化、数据库优化,其实前台客户端的优化同等重要,JS的优化、CSS的优化、XHTML的优化、图片的优化等,一些单方面的细微节工作看似意义不大,其实积累下来是能产生质变的。

  19. 老赵
    admin
    链接

    老赵 2007-01-22 18:57:00

    @爆牙齿
    特别是现在的AJAX应用,往往一个页面就打开一次,一个经过进行优化的页面,在精心优化之后往往其PLT会减少4-5秒甚至更多,这都相当重要。
    还有Perceived Performance,是Performance里的一种,优化它是一个非常有技巧的工作。

  20. 杨正祎
    *.*.*.*
    链接

    杨正祎 2007-11-23 09:23:00

    唉呀呀,这么好的东西,竟然今天才看到。

  21. Enzo
    *.*.*.*
    链接

    Enzo 2007-11-26 19:50:00

    不错,up

  22. xjb
    *.*.*.*
    链接

    xjb 2008-07-29 20:51:00

    老赵的这个系列不错,要收藏了

  23. airwolf2026
    *.*.*.*
    链接

    airwolf2026 2008-08-04 20:50:00

    使用NetLimiter 2 Pro限制IE的带宽

    哈哈.原来还真的有这样的工具存在...

  24. gutes
    *.*.*.*
    链接

    gutes 2009-03-10 02:08:00

    只用过fiddler 感觉还是挺习惯的.

  25. 链接

    zicjin 2011-02-14 11:58:43

    Fiddler 本身就有一个 Simulate Modem Speeds 功能

发表回复

登录 / 登录并记住我 ,登陆后便可删除或修改已发表的评论 (请注意保留评论内容)

昵称:(必填)

邮箱:(必填,仅用于Gavatar

主页:(可选)

评论内容(大于5个字符):

  1. Your Name yyyy-MM-dd HH:mm:ss

使用Live Messenger联系我