Chrome Developer Tools:Network Panel说明

1、chrome Developer Tools:Network Panel

从网络面板中能够获取不少有用信息,如详细的时间数据,http请求头响应头,cookies,WebSocket数据。php

经过分析这些数据,能够知道哪一个资源加载耗时最久,谁发起的网络请求,这些对性能优化颇有帮助。css

这些数据的获取都是经过一个api来完成的,Resource Timing APIhtml

咱们不须要知道它的实现原理,只要知道它能提供什么数据便可。jquery

这些数据也可经过chrome浏览器的window.performace对象获取,以下chrome

2、Network Panel概况

network监控网页中全部的http请求,一行表明一个http请求,每一个字段表明请求的不一样属性和状态。api

一、切换面板行的信息量(横向)。

点击按钮精简显示信息,点击按钮显示所有信息。浏览器

显示所有信息时包括主要的域和次要的域(以下图红色框中的Time和Latency),精简时就只显示主要的域(以下图中红色框中Time)。缓存

二、增删网络面板的列(纵向)。

一条资源的请求就是一行,包括不少列参数,默认以下。性能优化

  • Name and Path:请求资源的名称和路径
  • Method :请求方法,经常使用get,post
  • Status and Text:HTTP状态码和文本信息
  • Domain:请求资源的域名
  • Type:请求资源的MIME类型
  • Initiator:发送请求的对象(如Parser,Redirect,Script,Other)

好比下图中请求menu.css的资源的Initiator显示为(index):650[paraser],表示该css文件是从首页html的第650行中解析出来的,查看源代码能够看到这行是一个<link>标签去请求menu.css资源。服务器

有的资源的Initiator一列为Script,表示该资源是经过某js文件加载的。

  • cookies:请求带了多个条cookies,cookie数在请求详情中也能够看到。
  • Size and content:size是http请求传输的真实大小,包括响应头和响应体;content表示响应体解压后的大小(若是有压缩的话,通常为gzip压缩)。若是采用了gzip编码传输,通常状况content比size大,不然content小于size。若是资源是从浏览器缓存加载的而不是经过网络获取,则content为 from cache。

好比下图这个js请求,size为64.7kb,content为201kb,说明请求该资源时服务器采用压缩传输,大小为64.7kb,能够点击查看资源详情,在Headers里能够看到Content-Encoding:gzip采用gzip压缩传输。浏览器解压后真正的内容大小为201kb,这样能够减小服务器带宽压力。

  • Time and Latency:Time表示发送请求到接收响应的最后一个字节所花的实际,即请求一个资源花的总时间,Latency表示从发送请求到接收响应的第一个字节所花的时间,即延迟。因而可知,Time减去Latency就反应带宽问题了,包括客户端和服务器带宽。
  • Timeline:整个请求过程时间轴,能够看出时间到底花在哪里了。

默认只显示部分列的信息,在标头右键出来一个列表,打对勾的就是展现的,去掉对勾就好在网络面板的表格中删掉这一列。

三、请求排序

请求默认按请求开始时间排序,为对Size和Time的排序是很是经常使用的,一眼能够看出哪一个请求比较耗资源。

队Timeline的排序能够有多个选项:

  • Timeline,默认值,按每一个http请求的start time排序,同Start Time。
  • Start Time,同Timeline排序。
  • Response Time,按http请求的response time排序。
  • End Time:按http请求的
  • Duration:按请求花费总时间排序。
  • Latency:请求开始到接收响应的第一个字节的这段时长(即TTFB—time to first byte)排序。

四、保留历史log

跳转时想保留以前的日子,用preserve log选项。若是不勾选,每次刷新log就没了,勾选上Preserve log,每次刷新都会保留log,好比刷新3次就会有三次请求的log。页面跳转到其余地址log也会保留。

五、一条请求详情

单击任意一条http请求,可查看详情。

  • HTTP request and response Headers:包括request URL,HTTP method,response 状态码等。能够经过切换view parsed/view source查看格式化的http headers和原始信息。

  • Resource Preview:能够预览图片或者格式化过的JSON信息。

  • HTTP Response:返回未格式化的的原始信息。
  • Cookies names and values:包括Request cookies和Response cookies。
  • Resource network Timing:请求到响应的时间分布。

六、请求过滤

只显示指定类型请求,如img,css,js等。

漏斗形的按钮,意思是是否启用过滤信息选项。启用后可在下面一列中筛选(Hide data URLS,XHR,JS,CSS等)。

更高级点,能够进行请求查询,即在前面的输入框中输入相应的字符对http信息进行匹配。好比输入Status-code:200筛选出状态码为200的请求。

查询的时候,输入的信息包括type(StatusCode)和value(200)。浏览器会给出自动补全提示,按上下箭头或tab选择。

还能够经过在查询条件前面加上“-”来进行反选。以下图,在status-code前面加了负号,就能够筛选出全部状态码不是200的请求。

一些可用的过滤类型以下:

  • domain:好比www.google-analytics.com
  • has-response-header:好比Access-Control-Allow-Origin
  • is:好比running
  • larger-than:好比larger-than:50larger-than:150k, larger-than:2m
  • method:好比GET
  • mime-type:就是Content-type,好比text/html
  • scheme:好比https
  • set-cookie-name:好比有一个cookie为loggedIn=true,可经过loggedIn筛选
  • set-cookie-value:好比有一个cookie为loggedIn=true,可经过true筛选
  • set-cookie-domain:
  • status-code:好比200

七、禁用缓存

勾选Disable cache选项,可禁用缓存,全部的状态码为304的请求和size为from cache的请求变成正常请求。

八、一个请求花费具体时间分析

以请求imagemap.php为例。

消耗时间总共711.41ms,包括2部分Connection Setup和Request/Response:

(官方的一个更全的图以下)

  • Connection Setup:创建与服务器的链接。具体包括QueueingStalled...
    • Queueing:不是太清楚,好像是在本地防火墙的等待时间,或者是某些插件拦截时间。
    • Stalled:网络延时。指浏览器获得要发出这个请求的指令,到请求能够发出的等待时间。通常是代理协商、以及等待可复用的TCP链接释放的时间,不包括DNS查询、创建TCP链接时间等。
    • Proxy Negotiation:与代理服务器的链接时间。
    • DNS LookUp:表示DNS查询时间,若是第一次访问的是域名就须要查找,IP地址的话不须要,上图中没有这个参数,说明本地缓存了域名服务器的IP,浏览器不须要查询,直接经过IP请求服务器。
    • Initail Connection:创建链接的时间,包括 TCP handshakes/retries和negotiating a SSL.
  • Request/Response:请求与响应的时间。具体包括Request SentWaiting,Content Download
    • Request sent:发送HTTP请求到服务器的时间,即上传时间,这个时间取决于发送请求的数据量的大小。
    • Waiting(TTFB):发送请求后收到响应的第一个字节所花费的时间,TTFB(time to first bytes);这是服务器优化的重要指标,服务器优化的目的就是减小这个时间。
    • Content Download:从服务器获取响应数据的时间,下载时间,即上面的Time减去Latency的时间,这是反应带宽的重要指标。受响应消息内容大小,网络带宽,是否使用http压缩等影响。

3、页面加载时间分析

Finish:1.39s :表示整个页面加载时间为640ms。

DOMContentLoaded:998ms :发生在页面DOMContentLoaded事件的启动时间点,对应上图蓝色竖线。

Load:1.39s:表示页面load事件的启动时间点,对应上图红色竖线。

 

一、window.onload和DOMContentLoaded详解

DOMContentLoaded事件要在window.onload以前执行,DOM树构建完成时执行DOMContentLoaded事件,而window.onload是在页面载入完成时才执行,包括图片等加载完成

二、代码测试

代码以下:

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>demo of starof</title>
    <script src="http://code.jquery.com/jquery-1.4.1.min.js" integrity="sha256-LOx49zn73f7YUs15NNJTDnzEyPFLOGc7A7pfuICtTMc=" crossorigin="anonymous"></script>
</head>

<body>
    <h1> DOM READY's TEST </h1>
    <p id="status"> DOM is not ready </p>
    <script>
    alert("111");
    if (document.addEventListener) {
        function DOMContentLoaded() {
            $("#status").text("DOM is ready now!");
            alert("222");
        }
        document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
    }
    window.onload = function() {
        $("#status").text("DOM is ready AND wondow.onload is excute!");
    }
    </script>
</body>

</html>
复制代码

效果:

jquery的$(document) .ready();就是用的DOMContentLoaded事件。

 

 

其余资源连接:

相关文章
相关标签/搜索