标签本身不触发重排重绘，拖慢渲染的是深嵌套、冗余容器、低效高亮及字体回退链；应简化dom结构、用pre-wrap替代pre、延迟/服务端高亮、精简字体栈。

<code> 标签本身不触发重排或重绘，但实际项目中它常被套在深嵌套结构里、配错样式、或配合低效的高亮库一起用——真正拖慢渲染的从来不是这个标签，而是你写它的方式。

避免<code>嵌套在多余容器中

常见错误是把 <code> 包在 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 外再套三层 &lt;code&gt;&lt;div class=&quot;highlight&quot;&gt;，尤其在 SSR 或 Markdown 渲染器输出时。DOM 深度每+1层，Chrome Layout 阶段耗时就涨 20–40%，而 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 本身只需要语义和基础样式。 &lt;ul&gt;&lt;li&gt;首屏关键代码块直接用 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;code&gt;&lt;/code&gt;，不要加 wrapper &lt;code&gt;&lt;div&gt; &lt;li&gt;禁用模板引擎自动注入的 &lt;code&gt;class=&quot;js&quot;&lt;/code&gt; 容器层（如 Prism.js 的默认 wrapper），改用 &lt;code&gt;data-language&lt;/code&gt; 属性挂载&lt;/li&gt; &lt;li&gt;检查 DevTools → Elements 面板右键节点 → “Show DOM Tree Depth”，确认 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 所在路径深度 ≤ 4&lt;/code&gt; &lt;/li&gt; &lt;h3&gt;用&lt;code&gt;white-space: pre-wrap&lt;/code&gt;替代&lt;code&gt;pre&lt;/code&gt; + &lt;code&gt;code&lt;/code&gt;组合&lt;/h3&gt; &lt;p&gt;很多场景下你并不需要 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;</pre> 的强制换行保留行为，只是想让内联代码保持等宽字体和空格对齐。此时硬套 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt; 会多建一个 DOM 节点，还可能触发不必要的文本重排。</pre>

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 纯内联代码（如 console.log()）直接用 <code> + CSS：font-family: ui-monospace, 'SFMono-Regular'; white-space: pre-wrap;
• 禁用 <pre class="brush:php;toolbar:false;"></pre> 的默认 margin 和 overflow，否则它会在无内容溢出时仍占布局空间
• 若需行号，用 ::before 伪元素生成，而非额外 <ol><li></ol> 结构

高亮逻辑别在主线程跑正则

像 Highlight.js 或 Prism 默认在页面加载时遍历所有 <code> 并执行复杂正则匹配，60 行 JS 代码块可能触发上百次回溯匹配，阻塞主线程超 50ms —— 尤其在低端安卓设备上。

• 只对视口内或即将进入视口的 <code> 延迟高亮，用 IntersectionObserver 控制
• 服务端预渲染高亮 HTML（如使用 shiki 或 lowlight），前端只做最小样式注入
• 禁用动态语言检测：highlightAuto 比 highlightElement 多 3 倍 CPU 时间，明确传 language 参数

最易被忽略的一点：浏览器对 <code> 的字体回退链极敏感。一行里混用 ui-monospace、Consolas、monospace，且未声明 font-display: optional，会导致首次渲染卡在字体加载阶段。真要快，就只留一个靠谱字体，其他全删。