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)

one-simpleMagazine v1 正式发布

  经过几天的反复调整,已达到比较好的配色方案。部分细节也得到修正,现在就正式共享给大家使用 ;) Yo2 系统已安装好,在推荐、精美、双栏、三栏、简朴分类中可以找到(不如说全部分类都能显示:D)

  one-simpleMagazine 是一个模仿 wordpress 杂志类模板的布局设计而成,虽然感觉模板有些设计元素,但它却非常简朴。整个模板只有一个 30k大小的背景图片。博客首页采用杂志类型的展现方式,首个文章全文输出,而其他文章则以 300字以内的摘要输出,摘要中可自动缩略显示文章内部的图片(有杂志味)其他分页则全部以摘要显示。博客首页支持双侧栏,一左一右。右侧栏为主侧栏,可摆放常用的区块,而左侧栏则以文章分类、存档的博客导航为主。整个模板基于单层 div 进行渲染,可以加快页面的显示速度(如使用多层 div 嵌套,浏览器则需要下载完整的 html 内容后才能显示) 。

  如需修改左侧栏的宽度,请修改css的#contents-main和#leftbar,当中两个数值加起来应该等于 600px 。而右侧栏则不建议修改宽度,涉及的改动会多一些。背景图片请通过修改 css 进行更换。

  下载:one-simpleMagazine 模板

  *UPDATE: 右侧栏HTML代码放置到页面最下方、侧栏区块加入 overflow:hidden 属性(防止侧栏内容撑破模板)

  *UPDATE: WordPress 官方下载地址:http://wordpress.org/extend/themes/one-simplemagazine ,支持 Gavatar 头像

one-simpleMagazine 模板制作中…

  昨晚想到自己的博客侧栏内容越来越多,基于 K2 模板精简出来的单栏模式,显然无法满足需求。开始琢磨自己做个仿杂志类型的模板

one-simplemagazine-仿杂志 wordpress 模板

  配色比较鲜,部分细节还需要慢慢调整。毕竟这只是我今天下午基于 wordpress 默认模板的基础上制作出来的,有待慢慢打磨 :) 正式作品将会公开下载使用。这也将是我第一个公开发行的 wordpress 模板 :D 请多多支持,提出宝贵意见。

让你的 FireFox 带上 Chrome 面具 :D

  无奈于目前 Chrome 的功能实在太简单,充其量只是个骨架,完全未能代替 FireFox 甚至 Ie。我也只是尝尝鲜,光看它的界面是比较吸引我的。我想像我一样的人多的是 :) Chrome 目前可能是最快被装上,但也是最快被弃用的一个浏览器了。但它给我们带来了全新的浏览器使用体验,非常精简的界面。相信日后会有很多追随者模仿。

  刚在网上闲逛与 Chrome 浏览器相关的文章,顺手点开 FireFox 的 addons,查看最新的扩展列表信息。意外的发现了 Chromifox 主题,马上装来试了下,虽然 Tabbar 无法像 Chrome 一样放置在窗口标题上(FireFox 如不进行源码级的修改,单单依靠修改主题是无法模拟出来滴),但也能达到 80% 了。很八错,强烈推荐之~~~上图

my-firefox.jpg

哦,截图上的 Yo2 首页是内部开发版本,并不能公开访问,也不代表新版一定会是这个样子滴。

  还有个扩展 Chrome Package 是可以把 Tabbar 放到工具栏上方的,目前还只是测试版,有些网友提到无法完美卸载和与 Tab 增强扩展有兼容性的问题,所以暂时不作尝试了。建议你在尝试之前备份好 FireFox 的设置先。~

正在消失的关键字“注册”、“破解”、“绿色”

  互联网也会有“频临绝种”的危机,当然我指的只是在搜索引擎上,一些将无法搜索到真正与内容一致的关键字(软件类)。比如“注册”、“破解”、“绿色”。就是因为现在有大量的垃圾下载站,在这些关键字上滥做 SEO 而导致!间接来说 SEO 就是把屠刀,是它在“残杀”这些关键字!

swiff-e6b3a8e5868c-google-e6909ce7b4a2.png

  以前我并不知道SEO会带来如此可怕的后果,甚至会怀疑自己怎么不会做SEO,不过现在我总算明白了。我是有良知滴 :D

  在 Yo2  管理过程中就出现过多次被人滥用我们的博客服务来做垃圾站,专门用来做SEO关键字。他们真的很流氓~,会自动转载其他网站的内容,并在内容上插入多个自己需要优化的关键字,以蒙骗搜索引擎的评分规则。为了达到更高的效果,还动用自动采集和发布的软件,每几秒就给Yo2发个文章 _-!!我查到最离谱的一个已发布了2万多篇文章,全都是做SEO,并赚取广告费的垃圾站。(看来我们的博客系统性能很不错嘛,2万多个文章的博客都能正常使用)一些出名的博客,甚至无法在搜索引擎找到原文地址,都被这些垃圾站给淹没了 _-!!

  为此我专门分析过垃圾站的发布规则,在系统上添加了自动判断的功能,如果一个博客持续大量的发布文章,会被系统自动关闭博客服务(可能有误判:) 当然导入文章,这些正常操作是不会受到影响的。我们要为维护Yo2良好环境做出努力!如果你发现有滥用Yo2博客服务的,请及时向我们举报 :) 大家一起监督管理好Yo2社区。

  目前国内互联网内容质量真的是被这些垃圾站给抹黑了 _-!!哀~可幸的是这些黑手暂时未向博客内容下手,主要还是采集大型网站的内容,如新闻、小说等,当然还包括 cnbeta 、天涯这些网站。博客因为内容不是固定某类话题 ,所以对他们来说利用价值不高。但一些专题博客也可能成为采集对象,比如月关博客。

  除了垃圾站以外,还有很多黑手伸向垃圾邮件、垃圾评论等方面,真的是无处不在 _-!! 除非哪没人看。iyee 的博客是在Yo2的,他就经常收到大量的垃圾评论,可以说Yo2的反垃圾评论系统就是以他的博客作为参考定做。目前只有人肉发表的垃圾评论没能被系统拦截下来,但数量也不会多。个别从Yo2独立出去的博客,已遇到比较多垃圾评论的问题。其实这些垃圾评论发送者应该看清楚人家博客的设置吧,来自评论的链接都是设置 nofollow 属性的,搜索引擎不会因此给你的链接打分,白费功夫~但给博主带来巨大的麻烦。

  衷心祝愿我们的互联网还能留下一方洁净的家园!~感恩。