预告
浏览器中的性能很难测试和衡量,仅仅是因为变量的数量会导致浏览器、硬件或其他可能阻碍性能的变化、峰值或差异。
以下测试是我在具有以下硬件和浏览器的戴尔笔记本电脑上运行的
英特尔酷睿 i5-3320M CPU @ 2.60GHz
8GB DDR3 Ram(不确定时序等)
Windows 8.1 企业版 - 64 位
谷歌浏览器 v45.0.2454.101 m
由于时间限制,我只运行了 3 个我本来希望进行的测试,但可能会回来继续测试,并在不同的浏览器和机器上重新运行它们。
我使用的 SVG
我创建了一个 SVG 元素,它使用了 5 个相互叠加的图标。
所有这些图标都来自iconmonstr.com,该网站提供免费使用的 SVG 图标。
测试
排队 -<use>
编码
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="#globe-4-icon"></use>
</svg>
结果
1 个请求 - 221B 转移
平均
Finish: 10.3ms - DOMContentLoaded: 22.8ms - Load: 22.3ms
内联 - 个人<svg>
的
考试
这个文件太大所以只给出 CodePen 示例
结果
1 个请求 - 221B 转移
平均
Finish: 9.7ms - DOMContentLoaded: 20.6ms - Load: 19.9ms
外部文件 -<use>
考试
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#menu-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#user-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#home-4-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#phone-icon"></use>
</svg>
<svg height="100px" width="100px" viewBox="0 0 512 512">
<use xlink:href="svg.svg#globe-4-icon"></use>
</svg>
将此与页面顶部给出的基本文件一起使用
结果
2 个请求 - 440B 转移
平均
Finish: 57.5ms - DOMContentLoaded: 41.3ms - Load: 58.4ms
结论
从上面的测试和结果我们可以看出,使用内联 SVG 并引用它比使用外部文件要快得多;缓存与否。
两种内联 SVG 方法似乎都没有那么大的速度差异,但我个人会选择这种<use>
方法,只是因为从长远来看它更容易使用并且有助于保持你的正文代码干净。
现在,正如我所说,这些结果完全取决于无限数量的变量,仅举几例:
- 浏览器
- 硬件
- 网络连接
- SVG 文件大小
- 瓶颈软件(杀毒等)
我会亲自使用你觉得最舒服的任何东西。
我希望这些结果有些有用或令人满意,并可以帮助您满足您的需求。
在此处查看所有测试和结果!