33 lines
953 B
Markdown
33 lines
953 B
Markdown
# 模拟展示 2：DevTools 排查链路
|
||
|
||
<div class="mt-8">
|
||
|
||
```mermaid {scale: 0.82}
|
||
flowchart LR
|
||
A[用户反馈卡顿] --> B[Performance 录制]
|
||
B --> C[定位长任务]
|
||
C --> D[Network 查资源瀑布]
|
||
D --> E[Coverage 查无效代码]
|
||
E --> F[形成优化清单]
|
||
```
|
||
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-6 mt-8">
|
||
|
||
<div class="card">
|
||
<div class="font-semibold mb-2">演示素材</div>
|
||
<div class="text-sm text-gray-400">准备一个加载慢、交互卡顿、资源偏大的页面作为示例。</div>
|
||
</div>
|
||
|
||
<div class="card-green">
|
||
<div class="font-semibold mb-2">观众收获</div>
|
||
<div class="text-sm text-gray-400">把 DevTools 从“会打开”变成“按链路定位问题”。</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!--
|
||
这一页用于现场演示细节。建议讲一个真实或模拟页面，从 Performance 开始抓主线程问题，再用 Network 和 Coverage 找资源问题，最后输出可执行的优化清单。
|
||
-->
|