Svg 使用Edge或Internet Explorer 11的CSS精灵速度非常慢

我们有一个使用AngularJS 1.5的单页应用程序，它在使用Chrome时运行平稳，但不幸的是，我们还支持IE11+和Edge，使用这些浏览器，性能接近糟糕（延迟超过两秒）。这似乎与我们使用css精灵的方式有关，因为如果我删除背景图像属性，一切都会恢复正常。我在css方面的经验不是很丰富，因此我希望有更深入了解css的人对性能优化有所了解。sprite svg文件（325kb2350px 2340px）如下所示

<?xml version="1.0" encoding="utf-8"?>
<!-- SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 2350 2340" enable-background="new 0 0 2350 2340" xml:space="preserve">
     <symbol  id="ic_x5F_website_x5F_blk" viewBox="0 -50 50 50">
     ...
     <use xlink:href="#ic_x5F_website_x5F_blk"  width="50" height="50" id="XMLID_496_" x="0" y="-50" transform="matrix(1 0 0 -1 284.9999 155)" overflow="visible"/>
     ...
</svg>

为什么Chrome的速度要快得多？这是缓存问题吗？IE正在一次又一次地取那个大文件吗？svg文件本身可能有问题吗？还是说css很复杂？我们是否缺少一些重要的属性？IE找到正确的背景位置是否太慢

谢谢你的提示

更新

---

将大文件与另一个小得多的svg交换无助于提高性能。

您可以发布一个复制文件吗？看不到现场很难帮上忙嗨，帕特里克，谢谢你的评论。目前该网站尚未上线。：）但有一个小小的更新：我们现在对所有图标使用图标字体，性能现在好多了。

.ico() {
    &:extend(.ic-mixin);
}

.ic {
    .ic-mixin;
}

.ic-mixin {
    background-image: url('../icons/spritesheet.svg');
    background-size: @spritesheet-width @spritesheet-height;
    display: inline-block;
    width: 50px;
    height: 50px;
}

.icon(@column, @row, @color: blk, @offset: 0px, @offsetY: @offset) {
    .createIcon(@column, @row, @color, @offset, @offsetY);
}

.createIcon(@column, @row, @color, @offsetX: 0, @offsetY: @offsetX) {
    @positionX: @initIconGapX + @iconColumnWidth * (@column - 1);
    @positionY: @initIconGapY + @iconOuterSize * (@row - 1);

    & when (@color = wht) {
        background-position: -(@positionX + @iconOuterSize + @offsetX) -(@positionY + @offsetY);
    }

    & when (@color = blu) {
        background-position: -(@positionX + @iconOuterSize * 2 + @offsetX) -(@positionY + @offsetY);
    }
}

.icon-virtual {
    &:after {
        .ico();
        .icon(4, 23, wht, 15px);
        content: ' ';
        width: 20px;
        height: 20px;
        background-color: @green;
        position: absolute;
        top: 2px;
        right: 2px;
    }
}