使用DevTools

模拟网速

虽然此时页面可以正常运转，但是我们对其性能仍然一无所知。首先需要明确的是，一个页面并非能够快速打开就说明其具有较好的性能。我们通常是在本地和比较好的网络条件下打开页面的，并且大部分内容都有缓存。如果用户在 3G 网络下打开页面，看到的情况是怎样的呢？DevTools针对这种情况提供了网速模拟功能，可以让用户模拟在不同的网络条件下打开页面。

在上面显示Hello World的页面上右击并选择“检查”命令，在打开的DevTools中选择Network选项卡，默认选择No throttling命令，此处选择Fast 3G命令，如图1-2所示。

图1-2　模拟Fast 3G网络

需要注意的是，该功能在不使用的情况下应该关闭，否则会对网速造成比较大的影响。

禁用缓存

同样，在调试性能时通常不希望受到缓存的影响。在DevTools中可以通过勾选Disable cache复选框关闭缓存，如图1-3所示。

图1-3　关闭缓存

截屏

DevTools还提供了获取过程截屏的能力，用户可以直观地看到页面的渲染过程。切换至Network面板，点击Setting按钮后勾选Capture screenshots复选框，这样在刷新页面的同时浏览器会自动把关键帧的截屏保留下来，如图1-4所示。

图1-4　截屏

刷新页面

在完成上述操作后就可以刷新当前页面，如图1-5[1]所示。

首先，可以看到关键帧的截屏，从时间上来看，600ms左右才出现Hello World的字样，1.21s仅显示了一部分图像，1.23s完成整个页面的显示。另外，从下面的网络详情中可以看到整个网络请求的过程，在完成api.jsonp.js的请求后才开始加载图片。

事实上，一般在线页面还会有更多的耗时，但这里为了可以在本地演示就忽略了这个因素。

图1-5　刷新当前页面