Initial Slidev Chrome talk project

2026-06-14 14:05:01 +08:00
commit 3e3718c239
19 changed files with 9163 additions and 0 deletions
@@ -0,0 +1,32 @@
+# 模拟展示 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 找资源问题，最后输出可执行的优化清单。
+-->