Почему тормозит анимация при скролинге страницы?

Question

[harry999]

Добрый день, разрабатываю веб сайт на стеке vue & laravel, сайт работал и все хорошо, но спустя несколько дней захожу на него и начинаю видеть фризы в 0.2-0.5 секунд при скролинге (Запросов на бекенд нету). На сайте используется простая анимация с помощью обычного js и css, transform: translateX, transform: translateY в основном. Так же пристутствует parallax фона.

Перечитав форумы, нашел информацию что нужно оптимизировать анимацию с помощью will-change, добавил на все анимационные элементы такое свойство, но в итоге это не дало желаемого результата. А именно без микрофризов.
Так же по рекомендациям добавил Debounce среднего значения, чтобы не было заметно для пользователя.

Так же из интересного момента, данные фризы воспроизводяться только в google chrome, и больше ни в каком из других браузеров, тестировал FireFox, Opera, Explorer, Edge.

Так же в perfomence тесте замечаю dropped frame, не понимаю с чем это может быть связано еще..



Сразу благодарю вас, за уделенное время, и помощь в решении моего вопроса. Буду признателен любым рекомендациям, возможно кто-то уже сталкивался с похожим.

Comments

[Олег]

а ссылку на пациента вера не позволяет? По фото и скудному описанию, ванга гадала только

[harry999]

Олег, bit.ly/3QCwa5D

[godsplane]

harry999, без примера кода реализации анимаций не будет ответа.
попробуй вызывать анимацию через requestAnimationFrame, а вообще для таких больших анимаций лучше юзать gsap или framer motion или может есть еще что-то для vue хз

[Big Wheel]

...нужно оптимизировать анимацию с помощью will-change, добавил на все анимационные элементы такое свойство...

Так делать не нужно, злоупотребление will-change может привести к серьёзному замедлению работы приложения.

Очень соблазнительно использовать некое волшебное свойство не вникая в то, что оно на самом деле делает, после этого получить негативные последствия и при этом усугубить ситуацию отсутствием понимания, откуда эти последствия взялись.

Не ленитесь заходить на MDN. 15 минут на чтение доки, чтобы понять что к чему и как это использовать — спасут вам кучу времени и нервов.

[harry999]

На счет will-change, спасибо буду знать, искал любые решения..

Прошу прощения что сразу не закинул код.

Код анимации:

setStylePositionY(el, startValue, direction, desiredChangeValue, currentScrollValue, maxHeightStriveValue, withLimits, units = 'px') {
    let localDesiredChangeValue = 0;
    desiredChangeValue == 0 ? localDesiredChangeValue = Math.max(startValue, -startValue) : localDesiredChangeValue = desiredChangeValue;
    let currentValue = this.displacementCalculation(localDesiredChangeValue, currentScrollValue, maxHeightStriveValue);

    if (direction == 'toTop') {

        if (withLimits) currentValue = Math.max(-desiredChangeValue, startValue - currentValue);
        else currentValue = startValue - currentValue;

    } else if (direction == 'toBottom') {

        if (withLimits) currentValue = Math.min(desiredChangeValue, startValue + currentValue);
        else currentValue = startValue + currentValue;

    }

    el.style.transform = `translateY(calc(${currentValue}${units}))`;
}

displacementCalculation(desiredChangeValue, currentScrollValue, maxHeightStriveValue) {
    return (desiredChangeValue / maxHeightStriveValue) * currentScrollValue;
}

Страница:

methods: {
    debounce(func, timeout = 300) {
        let timer;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                func.apply(this, args);
            }, timeout);
        };
    },
    updateScrollPosition() {
        this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    },
    mainScrollAnimation() {
        this.debounce(this.updateScrollPosition, 60)();
        // ...
    }
}
mounted() {
    window.addEventListener('scroll', this.mainScrollAnimation);
}
beforeUnmount() {
    window.removeEventListener('scroll', this.mainScrollAnimation);
}

<template>
	<my-component :scroll-position="this.scrollPosition" />
</template>

Компонент:

watch: {
	scrollPosition() {
		// вызов setStylePositionY() с нужными параметрами
        }
}

[Aetae]

debounce ты не правильно используешь, каждый раз создаёшь новый, в итоге ничего не дебонсится, а может и лагает. Надо, условно, так:

mainScrollAnimation() {
        this.updateScrollPosition();

mounted() {
  this.updateScrollPosition = this.debounce(this.updateScrollPosition, 60);

Но скорее всего причина не в этом.

Здесь calс не нужен - он ничего не вычисляет:

el.style.transform = `translateY(calc(${currentValue}${units}))`;

Но скорее всего причина и не в этом.)