HTML模板与前端性能优化指标下的组件重构-html教程-PHP中文网

template.content.clonenode(true)是唯一可靠克隆方式，必须取content→clonenode(true)→插入，true不可省略，否则仅复制空fragment；需处理id/name冲突、事件重绑、script/style不执行等问题。

html模板与前端性能优化指标下的组件重构

<template></template> 不是组件，只是浏览器跳过解析的占位容器；直接拿它渲染页面，首屏会空白、表单状态丢失、脚本不执行——性能优化不是加个标签就完事，得先搞清它怎么“活”起来。

为什么`<template></template>`克隆后表单控件状态全丢了

常见错误是用 cloneNode(true) 复制 <template></template> 内容，但该方法不保留 <input checked>、<select></select> 当前选中项、<textarea></textarea> 的用户输入值。这些状态只存在于真实 DOM 节点实例上，克隆时不会带过去。

正确做法是用 document.importNode(tmpl.content, true)：它能穿透 Shadow DOM，保留表单控件的运行时状态，也兼容现代框架嵌套场景。

必须传第二个参数 true，否则只克隆结构，不深拷贝子节点
不能对克隆出的 DocumentFragment 再调用 innerHTML = ...，会清空已有状态
若需预设初始值，应在克隆后、插入前，通过 node.value = data.xxx 或 node.checked = true 显式赋值

非首屏内容用`<template></template>`加载，但别配`display: none`

display: none 的区块仍参与 HTML 解析、CSSOM 构建和布局计算，只是不绘制——对商品列表页后 50 条、长图文页下半截，这会拖慢首屏可交互时间（FID）和最大内容绘制（LCP）。

用 <template></template> + IntersectionObserver 按需加载才是真懒加载：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

模板内容写在 <template id="list-item"></template> 里，完全不进渲染流程
监听目标元素进入视口时，才调用工厂函数生成真实 DOM 并 appendChild
避免在模板内写 id 属性，多次实例化会导致 ID 重复，破坏 CSS 选择器或 document.getElementById 查询

art-template 的 `{{block}}` 命名冲突会让继承链失效

大型门户常用 art-template 多层继承：layout → inner-layout → page。但如果多个子模板都定义了 {{block 'content'}}，最末层会覆盖中间层的同名 block，导致“导航区插入点”被悄悄吞掉。

命名必须全局唯一且带区域语义：

用 'header-nav'、'main-hero'、'sidebar-recommend' 替代泛泛的 'content' 或 'body'
所有 block 名维护在项目根目录的 blocks.json 中，构建时校验是否重复
继承层级建议不超过三层，否则编译缓存命中率骤降，本地调试时改一个变量要等 8 秒以上