Удаление страницы FPS и функции - PullRequest
Новая
       24

Удаление страницы FPS и функции

0 голосов
/ 21 июня 2019

Я написал некоторый JS-код, который отображает DOM (это моя специальная карусель).Моя карусель имеет 2 кнопки, и у них есть некоторые функции.Когда я запускаю эти функции несколько раз, DOM испытывает трудности при рендеринге.Таким образом, FPS страницы падает медленно - половина кадров в секунду, но очень быстро в начале: 2-3 кадра в секунду -.

Вы можете видеть справа вверху (пишет ortalama 2,68 кадров в секунду): https://ibb.co/8YvyJwn

И мой JSA файл перформанса: 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;
        });
    }

1 Ответ

0 голосов
/ 22 июня 2019

Я нашел решение.Когда вы запускаете функции щелчка внутри функции showSlide, происходит что-то вроде перегрузки и происходит сбой FPS страницы.Когда я запускаю функции щелчка независимо, это не вызывает сбоев.\ М / _

...