前端卡顿诊断 · 三类体感问题的对症修复
分类：开发工具
它能帮你做什么
诊断并修复前端卡顿、掉帧等体感问题：先把"卡"分成点击无响应/指针迟缓/滚动掉帧三类对症，再给出可合成的 5 类修法（滤镜阴影→opacity 呼吸等）。
基本信息
| 是否收费 | 免费 |
|---|---|
| 许可 | MIT |
| 原作者 | 宫帅（AI智库） |
| 上游仓库 | https://github.com/zhiyingstudio/zhiying-skills |
| 评级 | A |
| 使用次数 | 4 |
信任状
- ✅ 已通过 AI8188 真实实测：用真实输入跑过一遍，输入、输出、耗时原样公开，可自行核对。
- 🔌 可被 AI 助手直接调用执行：经 MCP（https://www.ai8188.com/mcp）用 run_skill 真实执行，返回不可伪造的执行证明 trace_id，可用 verify_execution 独立核验。
- 📜 来源可溯：开源许可 MIT · 原作者 宫帅（AI智库） · 上游 https://github.com/zhiyingstudio/zhiying-skills
- 🔒 密钥不出本机：运行所用的模型 API 密钥只存在用户自己的浏览器，不上传平台、不入库。
实测记录（真实跑过的证据）
真实测试输入：我的网页游戏经常卡，特别是滚动的时候，想找找是点击无响应、指针迟缓还是滚动掉帧，希望能帮我诊断一下，修复一下。（直接给我能用的结果，别让我补充信息、别推我去别的地方查）
真实输出片段：根据您描述的情况，您的网页游戏卡顿主要表现为滚动不流畅，这属于**C. 滚动/拖动掉帧**这类问题。以下是针对您情况的诊断和修复建议： **诊断**： - 您的网页游戏滚动时出现卡顿，这通常是因为滚动容器内存在固定的大背景、使用了 `backdrop-blur` 效果，或者页面中存在大量 DOM 元素和阴影。 **修复建议**： 1. **检查滚动容器内的背景**：如果滚动容器内有固定的大背景，尝试将其移除或简化，以减少渲染负担。 2. **避免使用 `backdrop-blur` 效果**：如果您的页面背景不是完全不透明的，请避免使用 `backdrop-blur` 效果，因为它会降低性能。 3. **优化 DOM 元素和阴影**：检查页面中是否存在大量 DOM 元素和阴影，如果存在，尝试减少它们的数量或简化它们的样式。 **具体修复方法**： 1. **移除或简化固定背景**：如果您的滚动容器内有固定的大背景，尝试将其移除或替换为一个更简单的背景。 2. **避免使用 `backdrop-blur` 效果**：如果您的页面背景不是完全不透明的，请避免使用 `backdrop-blur` 效果。 3. **优化 DOM 元素和阴影**：检查页面中是否存在大量 DOM 元素和阴影，如果存在，尝试减少它们的数量或简化它们的样式。 **修复后测试**： 修复后，请再次测试
判定：✅ 通过 · 引擎 deepseek · Fri Sep 25
说明：以上为 AI8188 用真实输入在平台通道真跑该技能的记录，输入、输出、产出原样公开，可自行核对。
实测记录（公开可查）：https://www.ai8188.com/api/reports?type=skill&id=614
运行
本技能可直接在 AI8188 网页内运行（无需安装）：https://www.ai8188.com/run/skill/614
页面：https://www.ai8188.com/s/zy-frontend-jank 全量实测报告：https://www.ai8188.com/reports
（本页是给搜索引擎与 AI 助手抓取的静态版本；在浏览器打开会进入完整交互界面。技能提示词正文不在本页公开。）