Javascript 浏览器如何处理<；模板>；标签与a<；部门>；标签

我一直在阅读

标签上的文档，我似乎不明白它与简单使用

有什么不同，即

显示：无

文件：

示例

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

<div id="productrow" style="display: none">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</div>



VS
示例

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

<div id="productrow" style="display: none">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</div>



在低层次上，浏览器如何以不同的方式处理这两个示例
某些JS方法或HTML属性是否不同或不可用
注：我知道浏览器兼容性的差异
请考虑：

<template>
  <style>
    body: { background-color: black; }
  </style>
  <script>
    alert('hello');
  </script>
  <audio src="alert.wav" autoplay></audio>
</template>


JS中的任何选择器都找不到
中的元素，因此您不能意外地找到它们，要提取它们，您必须使用

var clone = document.importNode(templateElement.content, true);

另外，每个
，
/…
或
都会在页面加载时进行解析，但在将其克隆到主DOM中之前不会运行。
我找到一篇文章详细解释了所有差异：

我现在意识到，
示例实际上是一种在旧浏览器中使用的polyfill，必须经过严格的黑客攻击才能使其按预期工作

谢谢大家的帮助。
template
可以进入
head
而
div
不能
div
也有
align
和
template
有
内容
。另外，
可以在div中保存无效的元素（如您的示例中所示）。您询问的是关于低级别的，但是从高层次的角度来看：
允许编写良好的语义代码，因为它显然不是一个常规的页面元素。虽然正确，但您当然也应该指出注释中已经提到的其他差异。
显示：无
是否会导致内容“不”添加到“dom”树中？或者它仍然呈现，但在页面上没有“物理”显示？
display:none
仅影响元素的外观。它仍然参与DOM。