gpt4 book ai didi

html - 内联 SVG 与嵌入或 iframe 的性能问题

转载 作者:太空狗 更新时间:2023-10-29 16:43:00 26 4
gpt4 key购买 nike

我有两个 SVG 图像,它们总共有大约 8000 行,并且由几个具有渐变的形状组成。没有图案、过滤器、文本,只有带有笔触、简单或渐变填充的基本图形元素。

目前它们在生成 HTML 时被内联注入(inject),因此源代码变得非常大。这是否会降低动画的性能,因此最好以不同的方式嵌入 svg?

嵌入 svg 时是否有一般的经验法则可遵循?

问候菲利普

最佳答案

如果您使用 HTML5 SVG 标签嵌入 SVG 内联,这不仅会增加 html 文件的大小,还会使 DOM 和您的浏览器渲染器保持忙碌。

如果您使用 iframe,您实际上并不知道它何时加载或呈现,至少对于所有浏览器而言并非如此。

HTML5 为您提供了 JavaScript,这可能是解决方案。就等 body 到load然后注入(inject) SVG。

您可以使用 body-onLoad或 jQuery ready()-funktion

这是在 jQuery 中的实现方式:

<!DOCTYPE html>
<html>
<body>
<div id="svg-01" class="placeholder"></div>
<script src="path/to/jQuery.js"></script>
<script>
$(document).ready(function(){
$("#svg-01").replaceWith('<svg><!--// some svg //--></svg>');
});
</script>
</body>
</html>

我什至会更进一步,宁愿使用 iframe 和 gziped SVG as described here. 替换它

关于html - 内联 SVG 与嵌入或 iframe 的性能问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10597826/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com