Tyler Sticka 深入研究了这里，以最佳方式：通过 制作测试页面 并实际测量性能。也许 1000 个图标是一个极端情况，但嘿，250 行数据，每行 4 个图标就能做到这一点。Tyler 在文章中仔细介绍了细微差别。测试的不同技术：内联 <svg>、同一文档精灵 <symbol>、外部文档精灵 <symbol>、带有外部源的 <img>、带有数据 URL 的 <img>、带有 filter 的 <img>、带有外部源的 <div> 的 background-image、带有数据 URL 的 <div> 的 background-image 以及带有 mask 的 <div>。呼！太多了 - 而且它们本身都是有用的技术。
哪种技术获胜？内联 <svg>，除非 SVG 相当复杂，否则 <img> 更好。那就是我会把钱押在哪里的地方。 我已经乘坐这趟列车一段时间了。