Chrome DevTools 网络性能评估指南：Network 面板与 Resource Timing API 实战详解

文档教程【免费下载链接】CN-Chrome-DevToolsChrome开发者工具中文手册项目地址https://gitcode.com/gh_mirrors/cn/CN-Chrome-DevTools点击查看免费下载Network 面板是 Chrome DevTools 中用于评估 Web 应用网络性能的核心工具它记录每一次网络操作的详细数据包括加载耗时、HTTP 请求/响应头、Cookie 与 WebSocket 数据。本文以 CN-Chrome-DevTools 仓库中收录的 Evaluating-network-performance.md 为主线完整讲解 Network 面板的列字段含义、排序过滤、Timeline 瀑布图、资源详情分页与 HAR 导出等操作并深入剖析其底层数据来源 Resource Timing API读完你不仅能回答哪个资源首字节最慢谁发起了这个请求这类问题还能把网络数据导出为 cURL 命令与 HAR 文件用于自动化分析。文档定位性能剖析板块的网络评估篇在 CN-Chrome-DevTools 仓库中本文关联文档位于 md/Performance-Profiling/Evaluating-network-performance.md属于性能与剖析Performance Profiling板块。仓库的 README.md 与 directory_with_section.md 均将其对应到官方文档的 network 篇目Evaluating Network Performance评估网络性能与 Using the Timeline、Profiling JavaScript Performance、JavaScript Memory Profiling 等文档并列而 Overview.md 在提升网络性能一节中把网络面板列为开发者工具八大工具组之一。此外remote-debugging.md 还提到可以在真实移动蜂窝网络环境下使用 Network 面板查看实际网络状况可见它是贯穿桌面与移动端调试的基础设施。Resource Timing APINetwork 面板的数据基石Network 面板所展示的各类网络计时数据底层来源于Resource Timing API——一个为每个已加载资源提供细粒度网络计时信息的 JavaScript API。例如它可以精确告诉你某张图片的 HTTP 请求在何时开始该图片的最后一个字节在何时到达。该 API 不仅服务于 DevTools也向任意网页开放。在 Chrome 中它通过全局对象window.performance上的方法暴露。performance.getEntries()返回一个资源计时对象resource timing objects数组页面中每个被请求的资源对应数组中的一个元素。你可以直接在当前页面的 JavaScript 控制台中验证这一点——打开 Console输入以下命令并回车window.performance.getEntries()[0]该表达式会取出资源计时对象数组的第一个元素并在控制台中展开显示其全部属性包括name、initiatorType、startTime、responseEnd等计时字段。需要留意的是每个时间戳的单位是微秒遵循 High Resolution Time高分辨率时间规范。该 API 在 Chrome 中对应的底层计时方法为window.performance.now()。Network 面板概览自动记录与核心列字段只要 DevTools 处于打开状态Network 面板就会自动记录所有网络活动。首次打开面板时它可能为空——重新加载页面即可开始记录或者静候应用自身的网络活动发生。每个被请求的资源都会作为一行加入 Network 表格。关于该表格需要先了解三点约定下表所列列并非全部默认可见你可以随时显示或隐藏列部分列同时包含主字段与次字段例如 Time 与 Latency使用大资源行查看时两个字段都显示使用小资源行时仅显示主字段点击列表头可按该列排序。其中 Timeline 列比较特殊点击其列表头会弹出一个包含额外排序字段的菜单详见下文排序与过滤与Timeline 视图两节。Network 表格包含的列字段及含义如下字段描述Name and Path资源的名称与 URL 路径Method请求使用的 HTTP 方法例如 GET、POSTStatus and TextHTTP 状态码与状态文本Domain资源请求的域名Type所请求资源的 MIME 类型Initiator发起请求的对象或进程取值如下ParserChrome 的 HTML 解析器发起请求、RedirectHTTP 重定向发起请求、Script脚本发起请求、Other其他进程或动作发起请求例如用户通过链接导航到页面或在地址栏输入 URLCookies请求中传输的 Cookie 数量与查看资源详情时 Cookies 分页中展示的 Cookie 对应Set-CookiesHTTP 请求中设置的 Cookie 数量Size and ContentSize 为响应头通常几百字节与响应体之和即服务器实际交付的大小Content 为资源解码后内容的大小。若资源是从浏览器缓存而非网络加载该字段显示文本(from cache)Time and LatencyTime 为总时长从请求开始到响应最后一个字节收到Latency 为加载响应第一个字节的耗时Timeline展示所有网络请求的时间线视图点击该列头可弹出额外排序字段菜单详见Timeline 视图与排序与过滤保留导航后的网络日志Preserve log默认情况下当你导航到另一个页面或重新加载当前页面时现有的网络记录日志会被清空。若希望在上述场景中保留记录点击 Network 面板底部的Preserve log upon navigation黑色按钮图标含义为导航时不要保留日志之后新记录会追加到表格底部。再次点击同一个按钮此时变为红色提示保留导航后的资源即可关闭日志保留。排序与过滤默认情况下Network 表格按每个请求的开始时间排序即网络瀑布流waterfall。点击其他列的表头即可改按该列排序再次点击同一表头可在升序与降序之间切换。Timeline 列的特殊排序菜单点击 Timeline 列头会弹出菜单包含以下排序选项Timeline—— 按每个网络请求的开始时间排序即默认排序等价于 Start TimeStart Time—— 按每个网络请求的开始时间排序等价于 Timeline 选项Response Time—— 按每个请求的响应时间排序End Time—— 按每个请求完成的时间排序Duration—— 按每个请求的总耗时排序Latency—— 按请求开始到响应开始之间的时间排序即首字节时间time to first byte。按资源类型过滤点击面板底部的任一内容类型按钮Documents、Stylesheets、Images、Scripts、XHR、Fonts、WebSockets、Other即可将表格过滤为仅显示该类型资源。例如点击 Stylesheets 后表格中只保留 CSS 资源点击All按钮可恢复显示全部内容类型。增删表格列与切换资源行大小显示/隐藏列在表格表头区域右键Mac 上为 Control点击从弹出列表中勾选或取消勾选列名即可改变 Network 表格默认显示的列集合。资源行大小面板底部有一个蓝色的Use small resource rows使用小资源行切换按钮点击后表格切换为小行视图再次点击同一个按钮此时变灰提示 Large resource rows恢复大行视图。大行模式允许某些列同时显示两个文本字段主字段与次字段例如 Time 与 Latency小行模式只显示主字段。在小行模式下配合仅保留 Timeline 列可以营造更紧凑的瀑布视图便于快速浏览请求时序。Timeline 视图瀑布图与加载阶段可视化Network 面板的 Timeline 视图以图形方式描绘每个资源的加载耗时——从 HTTP 请求开始到响应最后一个字节到达。每个资源的加载时长呈现为一条彩色横条颜色按资源类型区分Documents文档Stylesheets样式表Images图片Scripts脚本XHR异步请求Fonts字体Other其他每条横条中浅色部分的长度表示请求的延迟latency深色部分的长度表示接收响应数据所花的时间。交互细节将鼠标悬停在时间线某一行上注意不要悬停在横条本身对应横条浅色与深色区域上方会分别显示该请求的延迟与接收耗时将鼠标悬停在时间线横条本身上会弹出该资源的完整计时数据弹窗——这与该资源详情中的Timing分页所展示的信息完全一致时间线中蓝色竖线表示DOMContentLoaded事件触发时刻主文档已加载并解析完成红色竖线表示load事件触发时刻页面所有资源均已下载完成。两条竖线的间距直观反映了文档解析与全部资源下载之间的时间差是判断渲染阻塞资源影响的常用参照。保存与复制网络信息在 Network 表格内右键Mac 上为 Control点击会弹出包含多项操作的上下文菜单。其中一部分操作作用于鼠标点击所在的那一行资源另一部分作用于整个网络记录。作用于选中资源的菜单动作Open Link in New Tab—— 在新标签页打开该资源也可以直接在表格中双击资源名Copy Link Address—— 将资源 URL 复制到系统剪贴板Copy Request Headers—— 将 HTTP 请求头复制到剪贴板Copy Response Headers—— 将 HTTP 响应头复制到剪贴板Copy as cURL—— 将网络请求复制为一条 cURL 命令字符串详见下文Replay XHR—— 若关联请求是 XMLHttpRequest则重新发送原始 XHR 请求。将请求复制为 cURL 命令cURL 是用于发起 HTTP 事务的命令行工具。Network 面板的Copy as cURL会重建一个完整的 HTTP 请求包括 HTTP 请求头、SSL 证书信息与查询字符串参数并以 cURL 命令字符串的形式复制到剪贴板。你可以在安装了 cURL 的终端中粘贴执行从而精确复现同样的请求。以下是从 Google News 首页某个 XHR 请求复制得到的示例命令curl http://news.google.com/news/xhrdus -H Accept-Encoding: gzip,deflate,:sdch -H Host: news.google.com -H Accept-Language: en-US,en;q0.8 -H User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1510.0 Safari/537.36 -H Accept: */* -H Referer: http://news.google.com/nwshp?hlentabwn -H Cookie: NID67eruHSUtoIQA-HldQn7U7G5meGuvZOcY32ixQktdgU1qSz7StUDIjC_Knit2xEcWRa-e8CuvmADminmn6h2_IRpk9rWgWMdRj4np3-DM_ssgfeshItriiKsiEXJVfra4n; PREFIDa38f960566524d92:Uaf866b8c07132db6:FF0:TM1369068317:LM1369068321:SvVkfXySFmOcAom1K -H Connection: keep-alive --compressed保存网络数据HAR你可以把一次网络记录保存为HARHTTP Archive文件或把记录以 HAR 数据结构复制到剪贴板。HAR 文件包含一个描述网络瀑布流的 JSON 数据结构多种第三方工具都能依据 HAR 文件重建网络瀑布图便于团队间共享与离线分析。操作步骤在 Network 表格上右键或 Control点击在出现的上下文菜单中选择以下任一动作Copy All as HAR—— 以 HAR 格式把网络记录复制到系统剪贴板Save as HAR with Content—— 将全部网络数据连同每个页面资源一起保存为 HAR 文件其中图片等二进制资源以 Base64 编码文本形式嵌入。网络资源详情六个分页点击 Network 表格中的资源名会打开一个带分页的详情窗口其中包含以下额外信息HTTP 请求与响应头资源预览PreviewHTTP 响应内容ResponseCookie 名称与值WebSocket 消息Frames资源网络计时TimingHTTP 头HeadersHeaders 分页展示资源的请求 URL、HTTP 方法与响应状态码并列出 HTTP 响应头、请求头及其值以及所有查询字符串参数。你可以通过View parsed / View source解析后视图 / 原始视图切换按钮分别查看解析格式化后的头部或原始形式在每个查询字符串区域旁还有View decoded / View URL encoded切换按钮用于在解码形式与 URL 编码形式之间切换查看参数值。此外请求头与响应头都可以直接复制到剪贴板。资源预览Preview与 HTTP 响应ResponsePreview 分页在可用时展示资源的预览。目前对图片与JSON资源提供预览JSON 资源会以格式化树形结构呈现图片则直接渲染缩略预览。若想查看资源的未格式化原始响应请切换到Response分页——它会展示请求返回的未经格式化内容例如一段原始 JSON 文本。对于 JSON、图片等部分资源类型也可以在 Preview 分页查看格式化后的预览。CookieCookiesCookies 分页以表格形式展示该资源 HTTP 请求头与响应头中传输的全部 Cookie并支持一键清除所有 Cookie。表格包含以下列属性描述NameCookie 的名称ValueCookie 的值DomainCookie 的域PathCookie 的 URL 路径Expires / Max-AgeCookie 的expires或max-age属性值SizeCookie 的大小字节HTTP标记该 Cookie 只能由浏览器在 HTTP 请求中设置JavaScript 无法访问Secure该属性存在表示 Cookie 只能通过安全连接传输WebSocket 帧FramesFrames 分页展示通过 WebSocket 连接发送或接收的消息仅当所选资源发起了 WebSocket 连接时该分页才可见。表格包含以下列名称描述Data消息负载。纯文本消息直接在此显示对于二进制 opcode该字段显示 opcode 的名称与代码Length消息负载的长度字节Time消息创建时的时间戳支持的 WebSocketopcode包括Continuation Frame延续帧、Binary Frame二进制帧、Connection Close Frame连接关闭帧、Ping FramePing 帧、Pong FramePong 帧。消息按类型着色发出的文本消息为浅绿色收到的文本消息为白色WebSocket opcode 为浅黄色错误为浅红色。当前实现还有两点注意事项新消息到达后需要点击左侧的资源名才能刷新 Frames 表格Frames 表格仅保留最近100 条WebSocket 消息。资源网络计时TimingTiming 分页以图形展示加载该资源过程中各网络阶段的花费时间——这与悬停在 Timeline 视图资源横条上弹出的数据完全相同。各网络阶段及含义如下属性描述Proxy与代理服务器连接协商所花费的时间DNS Lookup执行 DNS 查找所花费的时间应尽量最小化 DNS 查找次数Blocking请求等待一个已建立的连接变得可复用所花费的时间Connecting建立连接所花时间包括 TCP 握手/重试、DNS 查找以及连接代理或协商安全套接字层SSL的时间Sending发送请求所花费的时间Waiting等待初始响应所花费的时间Receiving接收响应数据所花费的时间实践要点将 Timing 分页与 Timeline 瀑布图配合使用可以快速定位瓶颈阶段——例如 DNS Lookup 偏长说明域名解析慢、Waiting 偏长说明服务端响应慢TTFB 高、Receiving 偏长说明响应体下载耗时受带宽与资源体积影响、Blocking 偏长则提示连接复用不足HTTP/1.1 下并发连接被占满时尤为常见。这类阶段化分析正是网络性能评估的核心手法。从仓库结构看本文档的上下文价值在 CN-Chrome-DevTools 仓库中本主题并非孤立存在Overview.md 在提升网络性能一节中指出网络面板允许实时查看通过网络请求和下载的资源文件搞清楚这些请求为何耗时比预期长是网页优化中重要的一步Using-the-Timeline.md 与本文档同属性能剖析板块当前标注尚待翻译时间线面板侧重渲染性能加载资源、解析 JavaScript、计算样式、重绘而 Network 面板侧重网络传输层面两者可互补使用Profiling-JavaScript-Performance.md 中提到的 Flame Chart 火焰图视图与 Network、Timeline 面板同属可视化分析家族remote-debugging.md 给出了真实场景在蜂窝网络环境下使用 Network 面板查看实际移动网络情况——即把本指南所述方法应用于移动真机调试。进一步优化方向围绕网络性能优化可以继续深入以下方向对应原文档Additional resources部分的主题此处不再罗列外部链接读者可在仓库对应板块与官方文档中检索PageSpeed Insights 与 PageSpeed 优化工具用于识别可应用于站点的性能最佳实践并自动化应用这些实践Chrome 网络内部机制了解 Chrome 网络栈的内部工作原理并利用这些机制让站点更快gzip 压缩原理从高层理解 gzip 压缩的工作方式及其优化价值——这也是 Network 面板 Size/Content 两列传输大小 vs 解码后内容大小产生差异的重要原因Web 性能最佳实践获取更多优化网页或应用网络性能的补充建议。结合本仓库目录 directory.md 与 directory_with_section.md 中Performance Profiling 性能与剖析板块的规划你还可以继续阅读 JavaScript Memory Profiling 与 Profiling JavaScript Performance将网络层、渲染层与脚本执行层三方面的性能评估打通形成完整的性能诊断闭环。赞分享文档教程【免费下载链接】CN-Chrome-DevToolsChrome开发者工具中文手册项目地址https://gitcode.com/gh_mirrors/cn/CN-Chrome-DevTools点击查看免费下载相关推荐CN-Chrome-DevTools 项目使用网络面板评估网页性能CN Chrome DevTools 项目使用网络面板评估网页性能 网络面板概述 网络面板是开发者工具中用于分析和优化网页加载性能的强大工具。它能记录应用程序文档教程Chrome DevTools Network面板网络调试的10个高级技巧与实战指南Chrome DevTools Network面板网络调试的10个高级技巧与实战指南 作为前端开发者Chrome DevTools 的 Network 面板开发工具教程Axios调试终极指南Chrome DevTools网络面板实战技巧Axios调试终极指南Chrome DevTools网络面板实战技巧 Axios作为基于Promise的HTTP客户端库广泛应用于浏览器和Node.js环境网络后端前端上一篇ESP32-S3多SPI设备并发访问深度解析三层架构优化方案与性能基准测试下一篇3步掌握LunaTranslator终极视觉小说翻译解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考