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

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

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



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



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



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



搜索firebug，并且安装，重启firefox之后生效：



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



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



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



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

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



也有可能被隐藏起来了



点击后启用，先开启【Record】（记录）功能



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