HTML模板组件化不是“把JS塞进HTML”，而是通过<template>惰性渲染、外链资源、按需激活等手段切断内联膨胀链，实现性能可控的模块化。
HTML模板组件化不是“把JS塞进HTML”
很多人误以为在HTML里反复写<my-card>、<my-header>就是组件化，结果文件体积暴涨、首屏解析卡顿。真实问题是：HTML本身没有模块系统，<template>或自定义标签只是占位符，不自动去重、不管理依赖、不拆分加载。
真正可控的优化起点是切断内联膨胀链：
- 禁用所有重复
<style>和<script>块——每个<my-card>都带一份Shadow DOM初始化代码？删掉，统一外链 - 把base64图标、内联SVG全部移出HTML，改用
<img src="icon.svg">或CSS background-image引用 - 第三方库（如lit、hyperhtml）必须通过CDN或
importmap统一版本，禁止多个<script src="...>重复引入 - 构建时用
html-webpack-plugin配html-minifier-terser，但关掉removeEmptyAttributes——否则disabled、hidden等空属性会被误删，导致交互失效
非首屏内容必须用<template>包裹
display: none不是懒加载，它照样触发DOM构建、样式计算、布局重排。对商品列表页后半截、长图文的副标题区块，这是隐形性能杀手。
正确做法是用原生<template>配合IntersectionObserver按需激活：
立即学习“前端免费学习笔记（深入）”；
-
<template id="product-list">...</template>—— 完全不参与初始解析 - 滚动到视口附近时，用
document.importNode(template.content, true)克隆并插入 - 旧版Safari不支持
template.content？加降级判断：if ('content' in template) {...} - 别用
innerHTML拼接字符串再插入——会触发完整HTML解析，比importNode慢3倍以上
art-template多层继承中block命名必须全局唯一
大型门户常用layout.art → inner-layout.art → page.art三层继承，但若多个子模板都定义{{block 'content'}}，最末层会直接覆盖中间层的插入点，导致导航栏、侧边栏样式丢失。
实操要点：
- 按区域+职责命名：
'header-nav'、'main-hero'、'sidebar-recommend'，避免泛用'content' - 所有
block名维护在根目录blocks.json里，构建脚本读取校验，防止冲突 - 继承深度控制在三层以内——超过
layout → feature → detail，编译缓存命中率下降超40%，且调试时难以定位哪一层覆盖了哪一块 - 用
art-template的include替代深层继承：把复用模块（如评论框）抽成独立comment.art，用{{include './comment.art'}}显式引入
首屏关键CSS内联但必须≤3KB且声明media
内联<style>不是把整个main.css复制进去，而是只提取渲染首屏必需的规则。超过3KB，HTML传输时间反而拖累TTFB。
具体操作：
- Chrome DevTools → Coverage面板，筛选未被使用的CSS规则，直接删除
- 内联部分禁用
@import——它串行加载，实测拉长FCP超300ms - 非首屏样式（如弹窗、暗色主题）用
<link rel="stylesheet" media="print" onload="this.media='all'">延迟加载 - 字体必须加
crossorigin：<link rel="preload" as="font" href="font.woff2" crossorigin>，否则不会预加载
最容易被忽略的是：内联CSS里嵌入base64图片，单个图标就占2KB，三个就超限。这类资源一律外链，靠HTTP缓存复用。
