1. Chrome抓包：快速定位HTTP协议问题 https://developers.google.com/web/tools/chrome-devtools/network/ 快捷键： Crontol+Shift+I(Windows) or Command+Option+I(Mac)

2. Chome抓包：Network面板 ① 控制器: 控制面板的外观和功能 抓包/停止抓包： 红色按钮 清除请求：Ø 要跨页面加载保存请求： Rreserve log 停止浏览器缓存：Disable cache 离线模拟：Offline 模拟慢速网络连接：Network Trottling，可自定义网速 隐藏Filter窗格： 漏斗图标 隐藏Overview窗格： 重新执行XHR请求：右键点击请求选择Replay XHR 手动清除浏览器缓存：右键点击请求选择Clear Browser Cache 手动清楚浏览器Cookie: 右键点击请求选择Clear Browser Cookies

② 过滤器 按类型过滤：

• XHR,JS,CSS,Img,Media,Font,Doc,WS(WebSocket),Manifest或Other(此处未列出的任何其他类型)
• 多类型，按住Command(Mac)或者Ctl(Windows/Linux)
• 按时间顾虑：概览面板，拖动滚动条
• 隐藏Data URLs: CSS图片等小文件以BASE64格式嵌入HTML中，以减少HTTP请求数

属性过滤: 多属性间通过空格实现AND操作, domain:*.tencent.com method:GET

• domain： 仅显示来自制定域的资源。您可以使用通配符(*)纳入多个域
• has-response-header: 显示包含指定HTTP响应标头的资源
• is： 使用is:running可以查找WebSocket资源，is:from-cache可查找缓存读出的资源
• larger-than： 显示大于指定大小的资源(以字节为单位)。将值设为1000等同于设置为1k
• method：显示通过指定HTTP方法类型检索的资源
• mime-type：显示指定MIME类型的资源
• mixed-content: 显示所有混合内容资源(mixed-content:all)，或者仅仅显示当前显示的资源(mixed-content:displayed)。
• 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状态代码与指定代码匹配的资源。

③ 概览： 显示HTTP请求、响应的时间轴

④ 请求列表： 默认时间排序、可选择显示列 Name: 资源的名称 Status: HTTP状态码 Type: 请求的资源的MIME类型 Initiator: 发起请求的对象或进程。它可能有一下几种值：

• Parser(解析器): Chrome的HTML解析器发起了请求 鼠标悬停显示JS脚本
• Redirect(重定向)：HTTP重定向启动了请求
• Script(脚本): 脚本启动了请求
• Other(其他): 一些其他进程或动作发起请求，例如用户点击链接跳转到页面或在地址栏中输入网址 Size: 服务器返回的响应大小(包括头部和包体)，可显示解压后大小 Time: 总持续时间，从请求的开始到接收响应中的最后一个字节 Waterfall: 各请求相关活动的直观分析图，它和这个请求完成的时间是相关的 添加其他列 添加自定义列

预览请求内容

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

⑤ 概要： 请求总数、总数据量、总花费时间等

3. 浏览器加载时间 触发流程：

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

4. 请求时间详细分布

• Queueing：浏览器在以下情况下对请求排队
  • 存在更高优先级的请求
  • 此源已打开六个TCP连接，达到限值，仅适用于HTTP/1.0和HTTP/1.1
  • 浏览器正在短暂分配磁盘缓存中的空间
• Stalled: 请求可能会因Queueing中描述的任何原因而停止
• DNS Lookup: 浏览器正在解析请求的IP地址
• Proxy Negotiation：浏览器正在与代理服务器协商请求
• Request sent: 正在发送请求
• ServiceWorker Preparation：浏览器正在启动Service Worker
• Request to ServiceWorker: 正在将请求发送到Service Worker
• Waiting(TTFB): 浏览器正在等待响应的第一个字节。TTFB表示：Time To First Byte(至第一字节的时间)。此时间包括1此往返延迟时间及服务器准备响应所用的时间
• Content Download：浏览器正在接收响应
• Receiving Push：浏览器正在通过HTTP/2服务器,推送接收此响应的数据
• Reading Push：浏览器正在读取之前收到的本地数据。

上一篇 « 下一篇 »