页面 FPS 拖放和功能答案

【问题标题】：Page FPS Drop and Functions页面 FPS 拖放和功能
【发布时间】：2019-11-04 02:34:22
【问题描述】：

我写了一些渲染 DOM 的 JS 代码（这是我的自定义轮播）。我的旋转木马有 2 个按钮，它们有一些功能。当我反复触发这些函数时，DOM 呈现困难。因此，页面的 FPS 下降缓慢 - 每秒半 fps，但开始时非常快：每秒 2-3 fps-。

您可以在右上角看到（写 ortalama 2.68 fps）： https://ibb.co/8YvyJwn

还有我的性能 json 文件： https://gofile.io/?c=LIHiLh

const hizmetler = [{/* some datas */}];
    var index = 0;
    var slaytCount = hizmetler.length;

    showSlide(index);




    function showSlide(i) {
        index = i;

        if (i < 0) {
            index = slaytCount - 1;
        }
        if (i >= slaytCount) {
            index = 0;
        }

        const baslik = document.querySelector(".carousel-baslik");
        const metin = document.querySelector(".carousel-metin");
        const image = document.querySelector(".carousel-lg-image");
        const iconGround = document.querySelector(".icon-ground");
        const counter = document.querySelector(".counter");
        let iconImg = `<img src="${hizmetler[index].icon}" class="animated fadeInDown fast" alt="">`;
        let lgImage = `<img src="${hizmetler[index].lgImage}" class="animated fadeIn fast" alt="">`;

        baslik.innerHTML = hizmetler[index].baslik;
        metin.innerHTML = hizmetler[index].metin;
        image.innerHTML = lgImage;
        counter.innerText = hizmetler[index].count;
        iconGround.innerHTML = iconImg;

        document.querySelector('.controller-left').addEventListener('click', function (e) {
            index--;
            showSlide(index);
            iconImg = `<img src="${hizmetler[index].icon}" class="animated fadeInLeft faster" alt="">`;
            document.querySelector(".icon-ground").innerHTML = iconImg;

        });

        document.querySelector('.controller-right').addEventListener('click', function (e) {
            index++;
            showSlide(index);
            iconImg = `<img src="${hizmetler[index].icon}" class="animated fadeInRight faster" alt="">`;
            document.querySelector(".icon-ground").innerHTML = iconImg;
        });
    }

【问题讨论】：

请您将所有相关代码添加到问题本身中吗？请参阅minimal reproducible example 了解更多信息。
@evolutionxbox 我现在添加了你可以检查。

标签： javascript dom browser frame-rate

【解决方案1】：

我找到了解决办法。当您在 showSlide 函数中运行 click 函数时，会发生类似过载的情况，并且页面的 FPS 会崩溃。当我独立运行点击功能时，它不会导致任何崩溃。 \m/_

【讨论】：