0

我最近将我网站上的所有图标都切换为 SVG 图标/图像。我从一个精灵文件中提供所有的 SVG。我正在使用 Chrome Dev Tools Performance 来尝试优化资源的加载。看到这个 SVG 文件的加载总共需要 10.61 秒，我感到非常惊讶。“网络传输”耗时 141.71 毫秒，“资源加载”耗时 10.47 秒。从这张图来看，资源加载似乎也阻塞了很多其他的事情。完全披露的是，在此测试期间，我正在节流 CPU 以优化最坏情况下的性能。

但是我不明白这么小的文件如何需要 10.47 秒才能加载资源？

SVG 文件详细信息：
未压缩大小：51,183 字节
文件路径：/web_root/images/svg/all.svg
文件布局（文件中大约有 20 个左右的符号）：

<svg  preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
      <style>
         g { display: none }
         g:target { display: inline }
      </style>

      <symbol viewBox="0 0 512 512" id='twitter_solid' class='solid'>
         <g>
             .......
         </g>
      </symbol>

      <symbol>.....</symbol>
      ....
      <symbol>.....</symbol>

   </defs>
</svg>

我在 HTML 代码/标记中使用它的方式如下： 
<svg><use xlink:href="/images/svg/all.svg#twitter_solid"></use></svg>

我对这个精灵做错了吗？我是否以错误的方式创建它？我是否在 HTML 标记中以不正确的方式使用/注入它？这个文件很小，图标/符号也很少，我不敢相信即使在受限制的 CPU 上也要花这么长时间来“资源加载”，除非我做的事情非常不正确。

任何建议将不胜感激！提前致谢！

4

0 回答 0