JSON本身不拖慢HTML美化工具，真正影响性能的是嵌入方式：type="text/javascript"导致JS解析错误、data-*属性含多行JSON引发解析卡顿、全局配置误对JSON块启用JS解析器。
JSON 格式本身不会拖慢 HTML 美化工具
HTML 美化工具（比如 Prettier、JSBeautify、VS Code 的内置格式化器）在处理含 JSON 的 HTML 时，真正耗时的不是 JSON 的存在，而是它被嵌入的位置和方式。工具默认把整个 <script> 或 <script type="application/json"> 内容当作纯文本或 JS 字符串处理——不解析、不校验、不美化，只是缩进对齐。所以哪怕里面塞了 10MB 的 JSON，只要没开启「嵌入内容美化」选项，性能几乎无影响。
但问题常出在误配：比如把 JSON 放进 <script> 标签却设了 type="text/javascript"，工具会尝试按 JS 解析，触发语法错误或卡顿；或者用 innerHTML 拼接 JSON 字符串，导致格式化器反复尝试修复“不合法”的 JS 表达式。
哪些嵌入方式会让美化工具变慢甚至崩溃
以下写法容易触发美化工具的解析逻辑，进而拖慢或失败：
-
<script>const data = { "name": "foo", "list": [1,2,3] };</script>—— 工具按 JS 解析，JSON 中若含未转义引号、尾逗号、注释等，会报错或重试 -
<script>JSON.parse('{ "id": 1 }')</script>—— 字符串内 JSON 若格式不标准，JS 解析器可能提前退出，导致美化中断 -
<div data-config='{ "theme": "dark" }'></div>—— 属性值含 JSON 时，部分工具（如旧版 HTML Tidy）会尝试解析属性内容，遇到换行/引号嵌套就卡住
Prettier 对 JSON-in-HTML 的实际行为
Prettier（v3+）默认不美化 <script type="application/json"> 内容，也不美化 data-* 属性里的 JSON 字符串。它只做两件事：保留原有缩进、确保标签结构合法。但如果你启用了 htmlWhitespaceSensitivity: "strict"，且 JSON 字符串里混有空格/换行，Prettier 可能误判为需要调整空白符，引发意外重排。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 始终用
type="application/json"标明 JSON 脚本块，别省略 - 避免在
data-属性中写多行 JSON；单行且用双引号包裹字符串值（data-config='{"key":"val"}'），比单引号 + 内部双引号更稳妥 - 如果必须动态注入 JSON，优先用
textContent赋值，而非拼接字符串到 HTML，这样美化阶段完全绕过该段内容
真正影响性能的是美化工具的配置粒度
很多团队在 .prettierrc 里全局开了 "parser": "html"，又没排除 JSON 块，结果工具对每个 <script> 都调用 JS 解析器预检——这才是慢的根源。更合理的做法是：
- 用
overrides显式指定 JSON 块走json解析器："overrides": [ { "files": ["*.html"], "options": { "parser": "html" } }, { "files": ["**/*.html"], "options": { "parser": "json", "rangeStart": 0, "rangeEnd": 0 } } ]（注意：Prettier 不支持按 HTML 内部标签类型切换 parser，此为示意；实际需靠插件如prettier-plugin-jsdoc或自定义 postprocess） - 更简单有效的方式：把大 JSON 提取为独立
.json文件，用fetch()加载，HTML 里只留占位容器——既利于缓存，也彻底规避美化干扰
复杂点在于，没有通用开关能精准告诉美化工具“跳过这个 script 标签里的所有内容”。多数时候，得靠约定（比如固定用 type="application/json"）+ 工具链配合（如 ESLint 忽略该标签）来守住边界。
