<template>不参与初始渲染树构建因其内容被标记为“惰性”，子节点不生成DOM、不进入DOM树，跳过CSSOM匹配、布局和绘制；仅在JS调用content属性或importNode()时激活。
为什么不参与初始渲染树构建
因为浏览器解析 HTML 时，<template> 内容被标记为“惰性”，其子节点不会生成 DOM 元素，也不进入 DOM 树，自然跳过 CSSOM 匹配、布局和绘制阶段。它只在 JS 调用 content 属性或 importNode() 时才激活。
常见错误现象：把非首屏组件写成 <div style="display: none">，结果仍触发完整渲染流程——DOM 构建、CSSOM 计算、Layout 预计算全跑一遍，只是最后没画出来；而 <template> 连 DOM 节点都不创建，开销接近零。
- 必须用
document.importNode(template.content, true)克隆，直接appendChild(template.content)会清空模板（content是文档片段，移动即移除） -
<template>里不能有<script>执行逻辑——脚本不会运行，也不会被解析；如需初始化，得在外层 JS 中手动调用 - SSR 渲染后服务端已输出
<template>，但客户端 hydration 时若未显式处理，该节点始终“沉睡”，容易误以为组件漏渲染
非首屏组件用 + IntersectionObserver按需激活
单纯把 HTML 片段塞进 <template> 不等于优化完成，关键在「何时挂载」。滚动触发型组件（如商品列表底部、长文评论区）必须结合 IntersectionObserver 判断可视性，否则提前插入仍会拖慢首屏 Layout。
使用场景：门户页的「相关推荐」区块、表单页的「高级选项」折叠区、图文页的「作者卡片」。
立即学习“前端免费学习笔记（深入）”；
- 监听阈值设为
{ threshold: 0.1 }，比0更可靠——避免因滚动抖动或小范围偏移导致反复触发 - 观察器回调中应先
unobserve()当前目标，防止同一区块被多次挂载 - 挂载前检查是否已存在对应 DOM（比如 SSR 已渲染部分结构），避免重复插入；可用
data-loaded属性做标记 - 若组件含内联
<style>或<script>，需确保它们在克隆后仍可被浏览器识别——importNode(..., true)可保留 script 标签，但不会自动执行
art-template block 命名冲突导致渲染树错位
当多个模板继承链共用同名 {{block 'content'}}，最终只有最深层模板的内容生效，中间层定义的插入点被覆盖。这不会报错，但会导致 DOM 结构缺失、样式错乱、JS 绑定失败——因为渲染树里根本没那块节点。
典型表现：侧边栏导航在二级页面消失；页头 banner 在专题页变成空白；Vue/React 组件 mount 点找不到父容器。
- 命名必须带区域上下文，例如
'main-article-body'、'sidebar-ads-slot'，禁用泛义词如'content'、'section' - 所有 block 名应在构建时校验唯一性，可用脚本扫描
**/*.art文件并报出重复项 - 超过三层继承（layout → page → feature）时，建议改用组合式模板（
{{include 'header.art'}}）替代继承，降低渲染树生成时的路径复杂度 - 注意 art-template 的
{{block}}不是 DOM 节点，而是编译期占位符；它不会影响 CSSOM 构建，但会决定最终 HTML 字符串结构，进而影响 DOM 树深度和 Layout 性能
内联 CSS 与配合时的 media 属性陷阱
首屏关键样式内联进 <head> 没问题，但若把响应式规则（如 @media (min-width: 768px)）也一并内联，可能让低分辨率设备多解析无用 CSS 规则，延长 CSSOM 构建时间。
更隐蔽的问题是：<template> 中的组件若自带 <style> 标签，且未加 media 属性，浏览器会在首次解析时就将其纳入 CSSOM，哪怕该模板永远不被激活。
- 所有内联
<style>必须声明media属性，例如<style media="screen and (min-width: 768px)">，让浏览器跳过不匹配设备的解析 -
<template>内部的<style>应设为media="none"或留空，等挂载后再动态注入——避免提前污染 CSSOM - 验证方式：打开 DevTools → Elements → 查看
<style>标签是否出现在document.styleSheets列表中；若未挂载却已存在，说明解析已发生
<template> 的「惰性」仅限于解析阶段——一旦挂载，它就和其他 DOM 节点一样参与完整渲染管线。所以延迟挂载只是起点，后续的样式隔离、脚本管控、资源加载节奏，一个都不能松。 
