模板继承需避免block名重复，应按区域+职责命名并统一维护；SSR碎片ID须加唯一前缀防冲突；禁用非法HTML嵌套；非首屏内容优先用<template>提升性能。
模板继承中 block 名重复导致内容覆盖
art-template 多层继承时，同名 {{block 'content'}} 会被最深一层完全覆盖，中间层的插入点失效——这不是渲染错乱，而是模板引擎按“就近原则”静态解析的结果。
- 必须按区域+职责命名，比如
'header-nav'、'main-hero'、'sidebar-recommend'，避免泛用'content'或'body' - 所有
block名应在项目根目录统一维护为 JSON 配置，构建脚本可校验是否存在冲突或未使用项 - 继承层级建议不超过三层（
layout → inner → page），再深会导致编译缓存命中率骤降，且 DevTools 中难以定位实际生效的 block 来源
服务端碎片缓存与客户端 hydration 的 ID 冲突
SSR 返回的模板碎片若含固定 id="modal-root"，多个服务聚合后会生成重复 ID；hydration 阶段 document.getElementById 只返回首个节点，事件绑定和焦点管理全部错位。
- 服务端渲染每个碎片前，必须注入唯一前缀：
id="{{.FragmentID}}-modal-root" - 客户端 hydrate 前，需批量重写 ID：
document.querySelectorAll('[id^="fragment-"]')，再挂载逻辑 - 绝对不要在模板里写
id="loading"这类通用名——微服务场景下，订单、用户、推荐服务各自返回的id="loading"合并后只剩一个生效
非法 HTML 嵌套触发浏览器自动修正，放大重排范围
<p><div>hello</div></p> 看似只是语法不规范，实则浏览器解析阶段会拆成 <p></p><div>hello</div><p></p>，凭空多出两个空 <p> 节点，拉长祖先链，让一次局部重排扩散到整个子树。
- 检查 Elements 面板中
<ol>或<ul>的直系子节点是否全是<li>；如果不是，说明非法内容已被剥离，隐患已埋下 -
<table>内未用<tbody>包裹<tr>，浏览器会补全匿名表格对象，破坏table-layout: fixed的列宽锁定效果 - 对疑似区域右键 → “Break on” → “subtree modifications”，若断点停在父级 wrapper 而非目标元素，说明重排已扩散
非首屏内容用 <template> 而非 display: none
display: none 的区块仍参与 DOM 构建和 CSSOM 计算，只是不绘制；对商品列表页后半截或长图文页滚动加载区，这会拖慢首屏解析速度。
立即学习“前端免费学习笔记（深入）”；
-
<template>内容不触发任何解析、样式计算或 JS 执行，是纯内存中的DocumentFragment - 克隆插入时用
document.importNode(template.content, true)，跳过字符串解析开销，JS 执行完立刻可插入 -
<template>里的<script>和<style>会被忽略，事件监听必须手动绑定；且template.content是 DocumentFragment，不能直接querySelector，得先挂载或用querySelectorAll遍历
