页面性能分析：利用chrome做web性能分析|浏览器篇
# 页面性能分析：利用chrome做web性能分析
30 秒速记
DevTools是内嵌在Chrome中的页面制作与调试工具集合，也是观察浏览器工作过程的重要入口。- 页面性能分析不能只看最终画面，还要追踪页面源头以及网络数据的发送、接收过程。
- 网络请求及其接收结果集中呈现在
Network面板中，因此它是分析页面加载问题的基础面板。 - 原文以
Network面板为切入点：先建立对DevTools整体能力的认识，再深入请求数据。 DevTools会持续迭代；涉及具体界面、面板名称或功能位置时，应以所用Chrome版本为准，原文建议用Chrome Canary体验较新版本。
页面性能分析要从页面源头和网络数据入手，而 Chrome DevTools 是观察这些过程的核心工具。 它内嵌在 Chrome 中，既能辅助制作和调试页面，也能帮助理解浏览器内部的工作方式。分析加载问题时，我一般先看 Network 面板，因为请求的发送、接收和结果都会集中显示在这里。DevTools 会持续迭代，具体界面、名称和入口应以当前使用的 Chrome 版本为准。
“浏览器中的页面循环系统”模块我们已经介绍完了，循环系统是页面的基础，理解了循环系统能让我们从本质上更好地理解页面的工作方式，加深我们对一些前端概念的理解。
接下来我们就要进入新的模块了，也就是“浏览器中的页面”模块，正如专栏简介中所言，页面是浏览器的核心，浏览器中的所有功能点都是服务于页面的，而 Chrome 开发者工具又是工程师调试页面的核心工具，所以在这个模块的开篇，我想先带你来深入了解下 Chrome 开发者工具。
Chrome 开发者工具（简称 DevTools）是一组网页制作和调试的工具，内嵌于 Google Chrome 浏览器中。Chrome 开发者工具非常重要，所蕴含的内容也是非常多的，熟练使用它能让你更加深入地了解浏览器内部工作原理。（Chrome 开发者工具也在不停地迭代改进，如果你想使用最新版本，可以使用Chrome Canary。）
作为这一模块的第一篇文章，我们主要聚焦页面的源头和网络数据的接收，这些发送和接收的数据都能体现在开发者工具的网络面板上。不过为了你能更好地理解和掌握，我们会先对 Chrome 开发者工具做一个大致的介绍，然后再深入剖析网络面板
面试官追问
追问 1支付页首屏缓慢，后端同事拿出正常的接口处理时间，便要求前端不要再看 Network，你会怎样回应？
仍要检查 Network，服务端处理正常并不能覆盖浏览器发送请求、接收数据和加载资源的完整过程。网络面板能呈现页面源头数据的收发情况，为区分资源加载、传输等待和页面代码问题提供证据；仅凭后端指标不能关闭排查方向。
追问 2你接手一个资源很多的活动页，需要先判断慢在网络接收还是页面执行，会怎样使用 DevTools 划分排查范围？
先用 Network 观察资源发送与接收过程，再根据现象转到相应的性能或调试面板。若资源到达过程异常，就继续分析网络记录；若数据已正常到达而页面仍卡顿，再借助 Performance、Memory、Sources 等面板缩小范围，避免用单一面板包办结论。
追问 3测试同学按旧文档操作时发现面板名称或入口位置不同，于是判断当前 Chrome 已删除网络分析能力，你认可吗？
不认可，DevTools 持续迭代改进，界面布局和入口变化不能直接证明能力被删除。应先核对当前浏览器及开发者工具版本，再按现有界面定位对应功能；旧截图适合说明分析思路，不宜作为入口位置永久不变的依据。
追问 4线上页面最终能完整显示，但用户持续反馈打开过程很慢，负责人据此排除浏览器加载问题，你会要求补充什么证据？
应补充页面加载期间的网络记录，而不能以最终渲染成功代替过程分析。通过 Network 检查数据何时发出、何时接收以及相关资源状态，再判断慢点是否位于网络阶段；若网络过程正常，才有依据继续转查页面执行和渲染。
追问 5团队准备只保留一个 DevTools 面板培训名额，在 Network 与 Performance 之间二选一来治理首屏慢，你会怎么取舍？
若当前目标是分析页面源头和网络数据接收，应优先掌握 Network，因为它直接记录资源收发过程。若症状指向运行时卡顿或渲染耗时，Performance 才更贴近目标；两者覆盖的阶段不同，长期用一个面板替代另一个会留下诊断盲区。
# Chrome 开发者工具
30 秒速记
DevTools的能力可分为页面调试与性能分析两类，面板需要按问题类型选择。Elements、Sources和Console主要用于检查页面结构、源码及运行时行为。Network、Performance和Memory分别提供网络、运行性能与内存方向的观察入口。- 除了查看信息，
DevTools还允许通过界面访问或修改DOM与CSSOM，适合快速验证页面问题。 - 原文列出的十个面板及
Audits等名称属于当时版本；当前实际名称、数量和入口应以安装的Chrome版本为准。
Chrome DevTools 同时覆盖页面调试和性能分析，应该根据问题类型选择对应面板。 调试结构和运行逻辑时，重点看 Elements、Sources 和 Console；排查加载、运行性能或内存问题时，则使用 Network、Performance 和 Memory。它不只是展示信息，还能通过界面访问或编辑 DOM 与 CSSOM，适合快速验证页面修改。原文中的十个面板及 Audits 等名称对应当时版本，实际数量、名称和位置应以当前 Chrome 为准。
Chrome 开发者工具有很多重要的面板，比如与性能相关的有网络面板、Performance 面板、内存面板等，与调试页面相关的有 Elements 面板、Sources 面板、Console 面板等。
你可以在浏览器窗口的右上方选择 Chrome 菜单，然后选择“更多工具–> 开发者工具”来打开 Chrome 开发者工具。打开的页面如下图所示：
从图中可以看出，它一共包含了 10 个功能面板，包括了 Elements、Console、Sources、NetWork、Performance、Memory、Application、Security、Audits 和 Layers。
关于这 10 个面板的大致功能，我做了一个表格，感兴趣的话，你可以详细看下：
简单来说，Chrome 开发者工具为我们提供了通过界面访问或者编辑 DOM 和 CSSOM 的能力，还提供了强大的调试功能和查看性能指标的能力。
OK，接下来我们就要重点看下其中重要的 Network 面板，即网络面板
面试官追问
追问 1详情页按钮错位，开发同事直接在 Sources 全局搜索组件代码，却没有先确认最终节点和样式，你会让他改用哪个入口？
应先在 Elements 检查实际生成的 DOM 与 CSSOM，因为错位首先表现为页面结构或最终样式结果异常。确认是哪条规则或节点导致偏差后，再到 Sources 追踪源码和执行逻辑；只搜索源码可能忽略运行时覆盖关系。
追问 2一个后台系统越操作越卡，同时内存占用持续异常，负责人只要求统计 Network 请求数量，这个排查方案够吗？
不够，Network 面向资源收发，无法单独解释运行期间的性能和内存变化。应结合 Performance 观察运行性能，并用 Memory 检查内存方向，再将结果与请求活动关联；面板提供的是不同证据，不能因请求多就直接归因网络。
追问 3安全审查期间发现页面资源加载正常，但需要核对站点安全状态；团队仍坚持只看 Network，你会怎样调整？
应把检查入口扩展到 Security，因为资源成功返回不等于站点安全状态没有问题。Network 可保留用于查看请求与响应信息，但安全判断需要对应面板提供的证据；仅凭加载结果无法覆盖安全维度。
追问 4开发者在 Elements 中把错位样式改正确，刷新页面后修改消失，他却说浏览器没有保存好修复，你如何判断？
这通常只是通过界面临时编辑 DOM 或 CSSOM 来验证修复方向，并不代表项目源码已经被修改。应根据验证结果定位原始样式，在代码中完成变更后重新加载确认；把面板编辑当成持久化修复会导致线上代码保持原状。
追问 5排查一个既有资源加载失败又有脚本报错的页面时，负责人要求所有人只用 Console，你会如何分工这些面板？
Console 适合查看运行时输出和错误，但资源加载过程还应由 Network 提供记录，脚本执行细节则可转到 Sources 调试。若故障进一步表现为卡顿或内存异常，再使用 Performance、Memory；按证据类型选择面板比固定单一入口更可靠。
追问 6面试官问你如何把“页面最终结构异常”与“生成结构的脚本异常”串成一条调试链路，你会怎么做？
先在 Elements 查看并临时编辑最终 DOM、CSSOM，确认结构或样式变化能否消除现象。随后利用 Sources 和 Console 追踪生成这些结果的代码与错误，再回到页面验证；前者展示运行结果，后两者帮助定位形成结果的执行过程。
# 网络面板
30 秒速记
Network面板由控制器、过滤器、抓图、时间线、请求明细和下载概要六类区域组成，各自回答不同的加载问题。- 控制器负责抓包开关、全局搜索、禁用缓存和弱网模拟；做网络性能测试时，缓存状态与网络条件必须明确。
- 过滤器用于按资源类型缩小请求范围，抓图区域用于核对用户在加载过程中实际看到的画面。
- 时间线展示
HTTP、HTTPS与WebSocket的加载时序和并发关系，请求明细则记录单个资源从发起到完成的状态及结果。 - 下载概要重点呈现
DOMContentLoaded与Load的触发时间；按原文口径，前者对应DOM构建完成，后者对应全部资源加载完成。 - 两个事件时间只能描述加载阶段的里程碑；判断白屏或具体网络故障，还需结合抓图、时间线和请求明细。
Network 面板把抓包控制、请求筛选、加载过程和结果明细放在一起，用来定位页面加载问题。 控制器可开关抓包、禁用缓存和模拟弱网，过滤器则帮助只查看 JavaScript、CSS 等目标资源，因此测试前要先明确缓存与网络条件。遇到白屏时，可以结合抓图和时间线判断用户看到了什么、资源是否并发加载，再到请求明细检查单个请求从发起到完成的状态。DOMContentLoaded 和 Load 只表示 DOM 构建完成与全部资源加载完成的时间节点，不能单独说明具体故障原因。
