从缓存中重新渲染 SVG。重新计算还是记住？

Question

我找不到这个问题的答案，当浏览器从缓存中获取 SVG 时，它是否重新计算 xml，它是否存储已经创建的“IMAGE”？ （如何？）

我本以为不会，但后来我注意到重复的 svgs 加载速度有多快。

我还注意到页面徽标（在移动浏览器中）速度缓慢，这让我认为他们重新计算了 SVG，因此我已转向移动设备的 PNG（显然已缓存），以节省大量计算工作低端手机。

那么也许答案取决于浏览器/浏览器类型/浏览器设置？

*顺便说一句，我的 svg 是压缩的 svgz

Answer 1

有时会，有时不会。大多数浏览器都会尽力不重新渲染内容，除非必须这样做。 SVG 1.2 Tiny 中有一个 buffered-rendering 属性，如果您使用 Opera，它可能会有所帮助，但其他浏览器会尝试自动执行操作，而不需要此类提示。

浏览器通常不会将 SVG 内容缓存为简单的位图。他们确实缓存了诸如应用了变换的形状和文本的绝对位置和大小、CSS 树结构、渐变等内容，然后使用这些信息，他们可以比每次重新绘制都更快地重新绘制内容。此类信息允许浏览器使用 JavaScript 和 SMIL 动画复制部分 SVG 内容以及用户滚动。

Answer 2

您可以使用两个元素作为缓冲区，在其中更新属性并从父元素调用 replaceChild 吗？例如

// create and append elements first
var draft // the element which will be rendered next
var drawn // the element which is currently visible

function renderLoop(parent) {
  const previous = drawn
  const current = draw(draft) // update draft element attributes here
  parent.replaceChild(current, previous) // null & isConnected checks omitted
  drawn = current
  draft = previous // Reuse existing element
}