每次写前端模板，拼字符串、手动操作 DOM，页面渲染慢、逻辑乱、还有 XSS 风险？
lit-html 让你只写模板、只更新变化部分，性能翻倍、代码更清晰、安全高效。

截图引用GIthub项目

一、什么是 lit-html？

lit-html 是一个来自 Lit 团队的轻量级 HTML 模板库，它使用 模板字面量 + 动态占位符 来构建 DOM，只更新发生变化的部分，从而减少不必要的重绘。

主要特性：

• 高效更新：只改动变更的 DOM 节点
• 支持指令：repeat、unsafeHTML、asyncReplace 等
• 轻量零编译：直接在浏览器或打包工具中运行
• 可与 Lit/LitElement 组件框架结合，做可复用组件

总结：lit-html = 模板渲染引擎；Lit = 组件 + 模板 + 样式封装。

二、实战示例：简单计数器 + 列表渲染

import {html, render} from 'https://unpkg.com/lit-html?module';

const container = document.getElementById('app');
let state = {count:0, items:['apple','banana']};

const template = s => html`
  <p>计数：${s.count}</p>
  <button @click=${()=>{state.count++; update();}}>+1</button>
  <ul>
    ${s.items.map(i => html`<li>${i}</li>`)}
  </ul>
  <input id="newItem" placeholder="新项"/>
  <button @click=${()=> {
    const v = document.getElementById('newItem').value;
    if(v){ state.items = [...state.items, v]; update(); }
  }}>添加</button>
`;

function update(){ render(template(state), container); }
update();

特点：

• 模板写法接近 HTML，自然易读
• 只更新变化部分，性能高
• 事件绑定简单 (@click)

这是 lit-html 的最小示例，展示了计数器和列表的高效渲染。

三、常用指令

• repeat(items, keyFn, template) → 高效渲染列表，保持 DOM 状态
• unsafeHTML(str) → 渲染可信 HTML 字符串
• asyncReplace → 异步流数据渲染，如实时日志或流式数据

示例：用 repeat 渲染带 key 的列表

import {html, render} from 'lit-html';
import {repeat} from 'lit-html/directives/repeat.js';

const data = [{id:1,name:'a'}, {id:2,name:'b'}];

const tpl = html`
  <ul>${repeat(data, item => item.id, item => html`<li>${item.name}</li>`)}</ul>
`;
render(tpl, document.body);

四、性能与实践提议

1、大列表用 repeat + key，避免 DOM 重建

2、避免模板内大量表达式重复计算

3、配合 LitElement 做组件化管理，便于大型项目维护

4、默认模板安全，不解析任意 HTML，只有使用 unsafeHTML 才会解析字符串

总结：合理使用 lit-html，可以显著提升模板渲染性能和可维护性。

五、适用场景

• 小型项目：只需要模板渲染 → lit-html
• 大型项目或组件化：需要封装组件、样式 → Lit
• 优势：轻量、零编译、高效、安全

对于想替代手拼字符串或手工 DOM 的开发者，lit-html 是最佳选择。

六、参考资料

lit-html 官方文档:
https://lit.dev/docs/v1/lit-html/introduction/?utm_source=chatgpt.com

Lit GitHub: https://github.com/lit/lit?utm_source=chatgpt.com

lit-html 指令文档:
https://lit.dev/docs/templates/directives/?utm_source=chatgpt.com