模板引擎性能瓶颈在于 block 命名冲突、headers_to_split_on 配置缺失、display: none 滥用；需全局唯一命名 block、显式配置三级标题切分、用 替代 display: none、内联样式限首屏且带 media 属性。
模板引擎本身不提速，关键在怎么用——错配 block 命名、漏设 headers_to_split_on、滥用 display: none，比不用引擎还慢。
art-template 的 block 继承必须全局唯一命名
大型门户常用三层继承：layout.art → inner-layout.art → page.art。一旦多个子模板都定义 {{block 'content'}}，最末层会直接覆盖中间层的插入点，导致导航栏或侧边栏内容消失，且调试时根本看不出哪一层被吞了。
- 按「区域+职责」命名，比如
'header-nav'、'main-hero'、'sidebar-recommend' - 所有
block名统一维护在根目录blocks.json，构建脚本可校验重复 - 继承链别超三层——
layout → feature → detail已到临界，再深会导致编译缓存失效、修改一处要全量重编
HTMLHeaderTextSplitter 必须显式配 headers_to_split_on
默认只切 h1，但门户网站实际结构是 h1→h2→h3 三级嵌套。漏配任意一级，对应标题下的全部内容就会被塞进上一个块里，常见现象是单块超 500KB、向量化失败、甚至 OOM 崩溃。
- 必须传
headers_to_split_on=[("h1", "title"), ("h2", "section"), ("h3", "subsection")] - 若需保留每个
<p></p>所属的标题路径（比如用于面包屑或锚点跳转），得额外加return_each_element=True - 含
<table> 或 <code><pre class="brush:php;toolbar:false;"><code></code> 的页面，换用 <code>HTMLSemanticPreservingSplitter</code>，否则表格跨行、代码块换行会被截断 <h3>非首屏内容必须用 <code><template></template></code> 而非 <code>display: none</code> </h3> <p><code>display: none</code> 的区块仍参与 DOM 构建和 CSSOM 计算，只是不绘制。对商品列表页后半截、长图文页的“展开更多”区块，这会让首屏解析拖慢 200ms+。</p> </pre> <ul> <li>把非首屏 HTML 片段包进 <code><template id="lazy-section">...</template> - 用
IntersectionObserver监听进入视口后，再调用template.content.cloneNode(true)插入 DOM - 绝对不要用 JS 动态设置
style.display = 'block'来“唤醒”隐藏内容——它已经算完了，只是没画
内联 CSS 只限首屏关键样式，且必须带 media 属性
内联整站 CSS 不仅体积暴增，还会让浏览器无法缓存，每次 HTML 更新都得重下全部样式。更糟的是，没加 media 的内联 <style></style> 会被所有设备解析，哪怕只是手机端才用的规则。
- 只提取渲染首屏 DOM 节点必需的规则，工具推荐
critters或手写critical.css - 内联部分务必压缩，空格/注释全删，体积控制在 14KB 内（TCP 初始窗口限制）
- 响应式样式必须写
<style media="(max-width: 768px)"></style>，否则大屏设备也会解析小屏规则，白耗 CPU
真正卡住性能的，往往不是模板语法多复杂，而是 block 覆盖、标题切分漏级、非首屏内容过早解析、内联样式无条件加载——这些点不盯住，换再快的引擎也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
