不会加速首屏渲染，反而可能拖慢fcp 60–110ms；因其默认仍完整解析、样式计算与布局，仅视觉折叠，须配合content-visibility: auto与contain-intrinsic-size才可能优化，且仅限chrome 108+/edge 109+。
<details></details> 不会加速首屏渲染，反而可能拖慢——除非你用对了触发时机和配套策略。
为什么直接加 <details></details> 反而让 FCP 变慢
浏览器解析到 <details></details> 时，仍会完整构建其内部 DOM 节点、计算样式、生成布局树。它只是默认折叠（open 属性未设），但内容并未跳过解析或渲染流程。实测显示，在含 50+ 行代码块的 <details></details> 中，FCP 延迟可达 60–110ms（低端安卓 WebView）。
常见错误现象：
- 把整段 Markdown 预览或 API 文档塞进
<details></details>，以为“不展开就不渲染” - 嵌套在
<section></section>或<article></article>内部多层使用，叠加 DOM 深度 - 子元素含
position: absolute或transform，导致浏览器为每个<details></details>生成独立包含块
<details></details> 真正起效的两个前提
它只在「内容可延迟呈现 + 浏览器能跳过绘制」时才优化首屏。必须同时满足：
- 内部内容不参与首屏 LCP 计算：比如不是 Hero 图、主标题、核心按钮等关键元素
- 配合
content-visibility: auto+ 动态contain-intrinsic-size（仅限 Chrome 108+、Edge 109+）
示例写法：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<details><summary>点击查看技术细节</summary><div class="details-content" style="content-visibility: auto; contain-intrinsic-size: 200px;">
<pre class="brush:php;toolbar:false;"><code>...大段代码...</code>
