网页内容的详细加载速度(时间)查看工具及方法

页面显示太慢?天才加载出来?别着急,用工具看看到底是什么原因,有助于开发人员的分析及对网页的优化。



使用chrome】的用户,可以直接点击右键查看【审查元素】,或使用快捷键Ctrl+Shift+I,打开开发人员工具:



切换到【Network】(网络)的tab:



刷新页面,可以看到每个文件的加载时间:



【Firefox】下需要安装firebug工具:



搜索firebug,并且安装,重启firefox之后生效:



还是在页面上点右键,点选【使用Firebug查看元素】,



并切换到【网络】tab,点击【启用】



刷新页面,可以查看到每个文件在显示过程中所花费的时间:通常我们可以只看蓝线左侧的部分,绿线表示的是页面显示的时间,之后继续加载一些内容,但不影响页面的显示。



【IE】下面,需要借助插件,这里推荐一下httpwatch pro (各位是不是也一样饱受ie摧残了)

下载安装之后,IE工具栏里,增加了一个功能按钮



也有可能被隐藏起来了



点击后启用,先开启【Record】(记录)功能



刷新之后,就可以看到页面各个组件的加载顺序和速度了。通常我们可以只看绿线左侧的部分,绿线表示的是页面显示的时间,之后继续加载一些内容,但不影响页面的打开。




posted @ 2013-05-11 17:59 RichZhang 阅读(...) 评论(...) 编辑 收藏