zoukankan      html  css  js  c++  java
  • 如何使用Chrome的Network面板分析HTTP报文

    快捷键:Control+Shift+I(Windows)

     

     概要中有抓取的请求数量,传输的数据的大小,资源的总计的大小,总共花费的时间,DOMContentLoaded和Load所花费的时间

    DOMContentLoaded与load的区别:http://www.cnblogs.com/caizhenbo/p/6679478.html

    • 控制面板:控制面板的外观与功能
    • 过滤器:过滤请求列表中显示的资源
        • 按住Ctrl(windows/linux),然后点击过滤器可以同时选择多个过滤器
        • 隐藏Datas URLs:CSS图片等小文件以BASE64格式嵌入HTML中,以减少HTTP
    • 概览:显示HTTP请求、响应的时间轴
    • 请求列表:默认时间排序,可选择显示列
    • 概要:请求总数,总数据量,总花费时间等

    过滤器:属性过滤

    • domain:仅显示来自指定域的资源,可以使用通配符字符(*)纳入多个域
    • has-response-header:显示包含指定的HTTP响应标头的资源
    • is: 使用is:running 可查找WebSocket资源  is:from-cache 可查找缓存读出的资源
    • larger-than:显示大于指定大小的资源(以字节为单位),将值设置为1000等同于设置为1k
    • method:显示通过指定HTTP方法类型检索的资源
    • mime-type:显示指定的MIME类型的资源
    • scheme:显示通过未保护HTTP(scheme:http)或受保护HTTPS(scheme:https)检索的资源
    • set-cookie-domain:显示具有Set-Cookie表头并且Domain属性与指定值匹配的资源。
    • set-cookie-name:显示具有Set-Cookie表头并且名称与指定值匹配的资源
    • set-cookie-value:显示具有Set-Cookie表头并且值与指定值匹配的资源
    • status-code:仅显示HTTP状态代码与指定代码匹配的资源

    多属性间通过空格实现AND实现

    请求列表的排序

    • 时间排序默认
    • 按列排序
    • 按活动时间排序(Waterfall右键)
        • Start Time:发出的第一个请求位于顶部
        • Response Time:开始下载的第一个请求位于顶部
        • End Time:完成的第一个请求位于顶部
        • Total Duration:连接设置时间和请求/响应时间最短的请求位于顶部
        • Latency:等待最短响应时间的请求位于顶部

    请求列表

    Initiator:发起的请求对象或进程。它可能有以下几种值

    • Parser(解析器):Chrome的HTML解析器发起了请求
        • 鼠标悬停显示js脚本
    • Redirect(重定向):HTTP重定向启动了请求
    • Script(脚本):脚本启动了请求
    • Other(其他):一些进程或者动作发起的请求,例如用户点击连接跳转到页面或在地址栏中输入的网址

    请求列表中的列可以增加或者减少,在列名上面右键,可以勾选想要增加或者减少的列,也可添加自定义列

    预览请求内容:

    • 查看头部
    • 查看cookie
    • 预览响应正文:查看图像用
    • 查看响应正文
    • 时间详细分布
    • 导出数据为HAR格式
    • 浏览器加载时间(概览、概要、请求列表)  
        • DOMContentLoaded事件的颜色设置为蓝色,而load事件设置为红色
    • 将请求数据复制到剪切板
        • Copy Link Address :将请求的网址复制到剪切版
        • Copy Response:将响应包体复制到剪切板
        • Copy as cURL:以cURL命令形式复制到剪切板
        • Copy All as cURL:以一系列cURL命令形式复制所有请求
        • Copy All as HAR:以HAR数据形式复制所有请求
    • 查看请求上下游:按住shift键悬停请求上,绿色是上游,红色是下游

    浏览器加载时间:

    触发流程:

    • 解析HTML结构
    • 加载外部脚本和样式表文件
    • 解析并执行脚本代码//部分脚本会阻塞页面的加载
    • DOM树构建完成//DOMContentLoaded事件
    • 加载图片等外部文件
    • 页面加载完毕//Load事件

    请求时间的详细分布:

    Queueing:浏览器在以下情况下对请求排队

    • 存在更高优先级的请求
    • 此源已打开六个TCP连接,达到限值,仅适用于HTTP1.0/HTTP1.1
    • 浏览器正在短暂分配磁盘缓存中的空间

    Stalled:请求可能会因Queueing中描述的任何原因而停止

    (Stalled阶段时TCP连接的检测过程,如果检测成功就会继续使用该TCP连接发送数据,如果检测失败就会重新建立TCP连接。所以出现stalled阶段过长,往往是丢包所致,这也意味着网络或服务端有问题。)

    DNS Lookup:浏览器正在解析请求的IP地址

    Proxy Negotiation:浏览器正在与代理服务器协商请求

    Request sent :正在发送请求

    ServiceWork Preparation:浏览器正在启动Service Worker

    Request to ServiceWork:正在将请求发送到Service Worker

    Waiting(TTFB):浏览器正在等待响应的第一个字节。TTFB表示Time To First Byte(至第一个字节的时间)。此时间包括1次往返延迟的时间及服务器准备响应所用的时间。

    Content Download:浏览器正在接受收应

    Receiving Push:浏览器正在通过HTTP/2服务器推送接收此响应的数据

    Reading Push:浏览器正在读取之间收到的本地数据

  • 相关阅读:
    jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解
    jQuery 源码解析(二十三) DOM操作模块 替换元素 详解
    jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
    jQuery 源码分析(二十一) DOM操作模块 删除元素 详解
    jQuery 源码分析(二十) DOM操作模块 插入元素 详解
    jQuery 源码分析(十九) DOM遍历模块详解
    python 简单工厂模式
    python 爬虫-协程 采集博客园
    vue 自定义image组件
    微信小程序 image组件坑
  • 原文地址:https://www.cnblogs.com/fengxiaoyuan/p/10923558.html
Copyright © 2011-2022 走看看