【chrome开发者工具介绍】评估网络性能

本文为chrome官网，开发者工具简介译文 ，原文见文末连接

Network

Network选项卡： 记录应用中的每个网络操作的信息。包括详细的时间数据、HTTP请求和响应头、cookie、WebSocket数据等等。
Network面板可以帮助您分析web应用程序的网络性能,如:
哪些资源所加载最慢?
哪些资源需要最长的时间负载(持续时间)?
谁发起的网络请求?
在特定资源的各种网络阶段花费了多少时间?

时间资源API

Network使用资源时机API,一个JavaScript API,它提供了详细的网络时间数据为每个加载资源。例如,API可以告诉你准确形象的HTTP请求开始的时候,当图像的最终接收字节。下面的插图显示了网络时间数据点资源API提供了时机。

API可用于任何web页面,而不只是DevTools。在Chrome,作为全球窗口方法公开。表现对象。performance.getEntries()方法返回一个数组的“资源时间对象”,页面上的每个请求的资源。
试试这个:在当前页面打开JavaScript控制台,输入以下的提示,点击返回:

window.performance.getEntries()[0]

这个评估资源时间对象的数组中的第一个元素并显示其属性在控制台中,如下所示。

每个时间戳以微秒为单位,后高ResolutionTime规范。这个API可用inChrome作为window.performance.now()方法。

Network 概述

当开发者工具打开时，Network面板将自动记录所有网络活动。你第一次打开面板可能是空的。重新加载页面开始记录，或在你当前应用程序等待网络活动运行时记录。

参考链接
谷歌chrome官网

如果您觉得本文的内容对您的学习有所帮助,您可捐赠共勉