DOM中大量存储模板字符串会影响性能吗？两种模板标签性能对比

1. 过度使用会因DOM体积拖慢性能吗？ #

不会。这两个标签里的内容都不会被加入到活跃DOM树中：

• <script type="text/template">的内容会被浏览器视为未识别的脚本类型，直接作为纯文本存储，不会解析生成任何DOM节点；
• <template>的内容会被解析为惰性的文档片段（DocumentFragment），仅保存在内存中，不会渲染到页面，也不属于活跃DOM的一部分。

唯一的影响是HTML文档本身的字节大小会增加，这可能会延长网络加载时间，但这属于网络层面的开销，和DOM操作（如遍历、查询）的性能无关。

2. HTML解析器如何处理这两种标签？ #

• 对于<script type="text/template">：因为type值不是浏览器默认支持的脚本类型（比如text/javascript），解析器会直接跳过内容的解析，仅将其作为纯文本节点保存，开销极低；
• 对于<template>：解析器会解析内部的HTML结构，生成对应的文档片段，但不会将其插入到页面的活跃DOM树中，也不会触发渲染或资源加载（比如不会加载<img>的src）。这一步的解析开销比纯文本略高，但非常有限。

3. 性能角度哪种标签更优？ #

两者的性能差异极小，具体选择取决于使用场景：

• 解析性能：<script type="text/template">略胜一筹，因为不需要解析内部HTML结构，直接存纯文本；
• 使用便捷性与二次开销：<template>更高效。它的content属性直接提供解析好的文档片段，克隆使用时无需手动解析文本；而<script>需要先取出textContent，再通过innerHTML等方式二次解析成DOM，这会增加额外的解析开销；
• 内存占用：两者差异可以忽略，都不会占用活跃DOM的内存资源。

总结：如果你的模板是纯字符串且需要最小化解析开销，选<script type="text/template">；如果需要预解析的HTML结构，避免二次解析，选<template>更合适。

内容的提问来源于stack exchange，提问作者Cortez