Html safari和多个大型<；img>；标签（透明png'；s）导致了巨大的减速

我在一个网站上工作，它必须有一些动态调整大小，并在背景中有多层“闪烁的灯光”。在chrome和firefox中，当我以半随机模式淡入淡出对象时，性能可以忽略不计，但在safari中，这些对象的存在会导致其他所有东西都嘎嘎作响

例如：

<div class="light_layer">
    <img class="lights" src="1.png" width="1400" alt="">
    <img class="lights" src="2.png" width="1400" alt="">
    <img class="lights" src="3.png" width="1400" alt="">
    <img class="lights" src="4.png" width="1400" alt="">
    <img class="lights" src="5.png" width="1400" alt="">
    <img class="lights" src="6.png" width="1400" alt="">
    <img class="lights" src="7.png" width="1400" alt="">
    <img class="lights" src="8.png" width="1400" alt="">
    <img class="lights" src="9.png" width="1400" alt="">
    <img class="lights" src="10-blue.png" width="1400" alt="">
    <img class="lights" src="10.png" width="1400" alt="">
    <img class="lights" src="11.png" width="1400" alt="">
    <img class="lights" src="12.png" width="1400" alt="">
    <img class="lights" src="13.png" width="1400" alt="">
    <img class="lights" src="14.png" width="1400" alt="">
    <img class="lights" src="15.png" width="1400" alt="">
    <img class="lights" src="16.png" width="1400" alt="">
    <img class="lights" src="17.png" width="1400" alt="">
    <img class="lights" src="18.png" width="1400" alt="">
    <img class="lights" src="19.png" width="1400" alt="">
</div>

一开始我以为是褪色让事情变慢了，但即使我停止所有的动作，只是让图层和鼠标移到导航元素上，也会出现严重的减速。删除灯光层，减速就消失了

safari inspector profiler中的绘画调用需要750+毫秒。我的问题是，如果可能的话，我该如何在保持其尺寸的同时降低这种性能障碍

---

提前感谢

不要有19个不同的大图像，你能有一个单星图像，你可以复制和/或移动，而不是（像spriting）？我会的，但问题是它们都是不同的大小/颜色，可以同时出现在页面上，我不明白。你是不是在互相使用图像？使用

z-indexes

？无z-indexing只需想象一个非常大的区域，如1400x787（每个图像的大小），但只有图像本身的一小部分（可能是50x50部分）有任何内容，其余部分是透明的空白。它是许多层叠在一起的

.light_layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.light_layer img {
    position: absolute;
    width: 100%;
    min-width: 1200px;
    min-height: 677px;
}