Tips: 使用 FireFox+FireBug 分析网页加载过程

Firebug是Firefox下的一款开发类插件,现属于Firefox的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。~~引用: 初识Firebug 全文

安装好FireBug扩展后,在 FireFox 中打开FireBug的界面,扩展就可以捕获当前窗口(标签)的网页加载过程。如我按Ctrl+F5强制刷新访问博客首页 http://oneoo.com

 firebug-tips-01.gif firebug-tips-02.gif

  从左图最下方,我们可以看到整个页面加载浏览器发起了94个请求,总下载数据是146Kb,整个加载过程耗时5.24秒。而在右图,点击请求列表以展开显示该请求的详细信息,当中包括了服务器传回浏览器的Header信息,和浏览器向服务器发出请求的Header信息。这些Header信息对于普通用户来说,没什么特别意义,我就不在这里给大家阐述了。我们只需要找出影响页面加载速度的地方就足够了 :)

 firebug-tips-03.gif firebug-tips-04.gif

   从左图我们可以在请求列表上,很直观的就可以判断出哪些请求是比较慢的。查出原因就可以对症下药,想办法加快它的加载速度(通常是由我来想的)或删除之。而右图则是浏览器刷新访问时产生的请求列表,当中可发现很多请求只是304 Not Modify返回(即无需重新下载,使用浏览器缓存)结合下面的右图(普通点击访问)所产生的请求列表,来做一个综合性的分析,看看哪些请求在下载时的速度慢,和哪些请求是可以被浏览器缓存下来的(这个最重要)务求把普通点击访问所需要发起的请求数量降到最低(Yo2的博客最低可以只发起2个请求)我的博客已经做过认真的分析和优化,去除了第三方网站的访问统计,第三方网站的图片调用等等,与博客没什么必要关联的东西,可以说是最佳状态了。当然关闭yo2sns插件的访问统计功能,速度还能更快一些。

  但做事不一定要极端的,能把页面的加载耗时控制到10秒以下,基本ok :)

firebug-tips-05.gif firebug-tips-06.gif

  左图是我使用另一个扩展 Yslow分析得出的数据,左边的饼图是浏览器在没有任何缓存数据的情况下,将需要下载的页面元素,右边的饼图则是在浏览器有缓存数据的访问所需下载元素。 Yslow还可以给页面下载速度打分,要获取高分就得有很高深的优化能力了 _-!!不是一般人可以做得来,我的博客评分也只是60左右,勉强及格。

  我的博客页面上的元素非常多,达到 94个,能够获得5秒左右的加载速度,成绩算理想的。我个人评分是90分 :D 看过其他BSP提供的博客服务,个别经过精心优化(很少图片)的页面加载需要发起30多个请求,耗时在3~5秒左右。而部分华丽的BSP甚至一个页面就需要发起100多个请求,加载耗时超过10秒 _-!!什么音乐播放器、动态相册、广告等等的附加元素都挂到博客上,不慢才怪 _-!!

  博客是以内容为主打,千万别忘记这个宗旨。太多花哨的玩意不会增加流量。

Tips: 使用 Fiddler 分析网页加载过程

Fiddler 是一个http调试代理,它能够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设置断点,以及Fiddler 所有的“进出”的数据(指cookie,html,js,css等文件)

引用自:HTTP调试工具:Fiddler介绍一(翻译)

   Fiddler2 下载地址:http://www.fiddler2.com/fiddler2/version.asp

  安装好 Fiddler 并开启该软件,然后 Ie 浏览器的所有访问请求都将被 Fiddler 截获,我们会根据截获的内容进行分析:) 以下为全新访问(浏览器没有任何缓存数据) http://oneoo.com 所获得的截图:

fiddler-tips-01.gif fiddler-tips-02.gif

  软件界面上的左栏为打开该页面所产生的全部访问请求,其中包括请求次序、请求的返回状态、请求类型、所发请求的域名和地址等简要信息。右栏为访问请求的详细数据,包括请求的完成时间和浏览器发送请求的Header信息和服务器返回的详细信息。

  全选左栏的请求记录,并在右栏切换到 TimeLine 分析整个页面加载流程中各个请求的消耗时间:

fiddler-tips-03.gif fiddler-tips-04.gif

   选择第一个请求和最后一个请求,可获得整个页面加载所消耗的总体时间(右图)。从左图的条形图表中还可以分别出哪些请求耗时最多,从而对页面的访问进行访问速度优化(如果是第三方网站的服务调用,可以考虑去除)。而状态栏上可查看到整个页面所需要发送的请求总数。

  分析得出,我的博客首页总共有 84 个请求,其中两个比较大的图片耗时最多,全新的访客打开页面需要 9 秒时间。

  现在我们点Edit菜单Remove -> All sessions 清空记录,开始分析普通访客的加载过程 :)

 fiddler-tips-05.gif fiddler-tips-06.gif

   左图为用户点击链接访问,因刚才的访问已经让浏览器把大量的数据缓存下来,所以需要发送的请求数量很少,才5个,总耗时1秒。而右图为用户点击刷新按钮访问页面,因为是刷新访问,浏览器不会使用缓存数据,但会发送请求询问页面服务器浏览器上的缓存数据是否过期,所以会发送 84个请求。因为这些请求比较特殊,如果浏览器上的缓存数据跟页面服务器上的内容一致,那么服务器会返回 304 状态,而不需要重新下载内容的,所以总体耗时是 5 秒。比起没有缓存的全新访问要快一倍时间。

  综合以上的全新访问、带缓存点击访问和带缓存刷新访问,三种形式测试得出的数据,可以看到浏览器缓存在加快页面访问速度上起到非常大的作用。作为网站开发员应该充分考虑这方面的细节调整。

  如果你觉得自己的博客打开速度慢,也可以试试用 Fiddler 来测试一下,看看到底是慢在哪个地方,做出优化 :D 通常国外的统计代码都比较拖时间的~

  Ok~ 下期将会推出 FireFox + FireBug 和 httpfox 扩展来分析网页加载过程的教程。(FeedSky 验证 ece410df)