HAR(HTTP Archive)
HAR 是一种基于 JSON 的文件格式,用于记录浏览器与服务器之间的所有网络请求和响应信息。每个请求包含 URL、请求方法、响应头、响应体大小、时间戳等详细数据。本工具的核心输入就是 HAR 格式数据,它是连接 WebPageTest/DevTools 测试结果与可视化分析的桥梁。
瀑布图(Waterfall Chart)
瀑布图是 Web 性能分析中的核心可视化工具,以时间轴和水平条形图的形式展示每个网络请求的生命周期。每条横条的长度代表该请求的总耗时,不同颜色段表示 DNS、连接、等待、下载等不同阶段。通过瀑布图可以直观发现请求阻塞、长等待、慢下载等性能瓶颈。
TTFB(Time to First Byte)
首字节时间,衡量从浏览器发送 HTTP 请求到收到服务器返回的第一个字节之间的时间。TTFB 是评估服务器响应速度的核心指标,反映了 DNS 解析、TCP 连接、SSL 握手、服务器处理等多个环节的综合耗时。优秀标准通常为 200ms 以内,超过 500ms 需要重点关注优化。
DNS(Domain Name System)
域名系统,负责将人类可读的域名(如 www.example.com)解析为机器可识别的 IP 地址。DNS 查询是建立网络连接的第一步,如果 DNS 服务器响应慢或域名解析链过长,会增加页面加载的总耗时。工具中深绿色部分即表示 DNS 查询阶段的耗时。
TCP 连接(Transmission Control Protocol)
TCP 三次握手是浏览器与服务器建立可靠连接的过程。第一次握手由浏览器发送 SYN 包,第二次握手服务器回复 SYN-ACK,第三次握手浏览器发送 ACK 确认。三次握手完成后,双方才能开始传输数据。工具中橙色部分表示 TCP 连接建立的耗时。
SSL/TLS 握手
SSL(Secure Sockets Layer)及其后继 TLS(Transport Layer Security)是在 TCP 连接之上建立加密通道的过程。在 HTTPS 请求中,浏览器和服务器需要协商加密算法、交换密钥、验证证书等。这个过程通常需要 1-2 个 RTT(往返时间),工具中紫色部分表示 SSL 握手耗时。
DOMContentLoaded 事件
当 HTML 文档被完全加载和解析完成时触发的事件,此时样式表、图片和子框架可能还未完成加载。DOMContentLoaded 是衡量页面可交互速度的重要指标,与页面加载时间(Load)的区别在于它只关注 DOM 解析完成,不等待所有子资源加载完毕。
渲染阻塞资源
某些资源(如同步加载的 CSS 文件和 JavaScript 脚本)会阻塞浏览器的渲染流程。浏览器在遇到这些资源时必须等待其加载和执行完成后才能继续解析后续的 HTML 内容。减少渲染阻塞资源是提升首屏加载速度的关键优化方向之一。
并发连接数限制
浏览器对同一域名的并发 TCP 连接数有上限限制。HTTP/1.1 通常为每域名 6 个并发连接,这意味着当超过 6 个请求时,后续请求必须排队等待。工具中红色阻塞阶段的耗时通常与此限制有关。HTTP/2 引入了多路复用技术,大幅缓解了这一问题。
HTTP/2 多路复用
HTTP/2 协议的一项核心特性,允许在单个 TCP 连接上同时传输多个请求和响应,彻底解决了 HTTP/1.1 的队头阻塞问题。使用 HTTP/2 可以显著减少瀑布图中的红色阻塞阶段,提升页面加载效率。本工具的诊断模块会检查是否可以升级到 HTTP/2。
UD5工具箱