• 如何使用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:浏览器正在读取之间收到的本地数据

  • 相关阅读:
    线程(C++11)
    初始化、赋值
    优质学习资料总结
    移植之乱谈
    采集音频和摄像头视频并实时H264编码及AAC编码
    H264解码器源码(Android 1.6 版)
    移植ffmpeg到VC环境心得
    收集的网络上大型的开源图像处理软件代码(提供下载链接)
    C++开源库,欢迎补充。
    一个轻量级AOP的实现(开源)
  • 原文地址:https://www.cnblogs.com/fengxiaoyuan/p/10923558.html
Copyright © 2020-2023  润新知