0

我正在一个网站上工作，它必须在某种程度上动态调整大小，并且在背景中有多层“闪烁的灯光”。在 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>

的CSS：

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

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

起初我认为这是减慢速度的衰落，但即使我停止所有动作，只是让图层和鼠标悬停在导航元素上，速度也会严重下降。删除光层，减速就消失了。

safari 检查器分析器中的绘制调用需要 750 多毫秒。我的问题是，如果可能的话，我怎么能减少这种性能突突，同时保持它们的尺寸适合它们呢？

提前致谢

4

0 回答 0