激活之前，请求HTML5模板中的内容

Question

我正在使用DevTools调试我的Web应用程序时，当我注意到Firefox要求在html5 template标签中的IMG的SRC属性中定义了URL，而Chrome则没有。<<<<<<<<<<<<<<

我正在使用最后一个版本（50.0）。

这是一个错误吗？

下面的示例：

<template id="object-img">
  <div class='object-container'>
    <div>
      <img src="cacaca.jpg" class="img-responsive" alt="imagem" />
    </div>
  </div>
</template>

Answer 1

这是Firefox的一种优化。

如果image尚未在浏览器的历史记录/缓存中，则首次要求它。随后的页面重新加载不会再次触发请求。

问题是在以下内容之前请求<template>内的image，但在渲染的DOM中 normal 图像，在某些情况下可能会适得其反。解决方案是将<template>放在其他图像之后。

注意： template规格指出，模板中的元素未呈现，但它们已被解析。他们对参考资源的预加载一无所知。