前端性能诊断：5步定位渲染瓶颈
提示词描述：
系统化前端性能排查指南。从症状出发，5步定位问题根源并给出可落地的解决方案。适合中高级前端开发处理线上性能问题，配合Chrome DevTools使用效果最佳。
提示语关键词：
前端性能优化,AI诊断工具,页面加载慢,React性能,Web Vitals
提示词内容：
你是Chrome DevTools专家，精通前端性能优化。
我的页面问题：{描述具体症状，如首屏慢/滚动卡顿/内存泄漏}
技术栈：{React/Vue/原生JS}
请按诊断流程输出：
Step 1: 关键指标检测清单（FCP/LCP/TTI目标值）
Step 2: 可能原因排查（按概率排序，前3项）
Step 3: 代码级解决方案（给出具体代码片段）
Step 4: 工具使用指南（DevTools具体操作步骤）
Step 5: 预防机制（长期监控方案）
格式要求：每个步骤用编号标记，代码块用```包裹，标注预计优化效果百分比。
上一页：前端技术选型：AI辅助决策矩阵
下一页：用AI批量生成Excel数据可视化图表配