Оптимизация animation

@Dmitrin · Регистрация: 04.12.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте. Использую на всём сайте эффект переливания градиента, сделанного на css аnimation.

Выглядит это примерно следующим образом:

CSS

.main_page .first_screen {
    background: #ff9237;
    background: -moz-linear-gradient(135deg, #ff9237 0%, #b13cff 100%);
    background: -webkit-linear-gradient(135deg, #ff9237 0%,#b13cff 100%);
    background: linear-gradient(135deg, #ff9237 0%,#b13cff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9237', endColorstr='#b13cff',GradientType=1 );
    background-size: 200% 200%;
    background-position: center;
    -webkit-animation: GradientAnimation 10s ease infinite;
    -moz-animation: GradientAnimation 10s ease infinite;
    -o-animation: GradientAnimation 10s ease infinite;
    animation: GradientAnimation 10s ease infinite;
}
@-webkit-keyframes GradientAnimation {
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}
@-moz-keyframes GradientAnimation {
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}
@-o-keyframes GradientAnimation {
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}
@keyframes GradientAnimation {
    0%{background-position:0% 0%}
    50%{background-position:100% 100%}
    100%{background-position:0% 0%}
}

Столкнулся с проблемой на слабеньких компьютерах всё сильно начинает подвисать и становится невозможно пользоваться сайтом. Подскажите, можно ли как-то оптимизировать данный код? Может есть способ плавной смены градиенты другим методом? Или может можно как-то отлавливать "слабые" компьютеры и отключать для них анимацию? (подобных экранов просто несколько на странице с переливанием градиента)

@mrtoxas · 06.06.2018, 00:18

Можно убрать префиксы и проверять, поддержку linear-gradient\animation. Если не поддерживается, то просто фон поставить, без анимации. Но так мы только отсечем старые браузеры.
Можно попробовать узнать количество ядер процессора:

Javascript

let workerList = [];
 
for (let i = 0; i < window.navigator.hardwareConcurrency; i++) {
  let newWorker = {
    worker: new Worker('cpuworker.js'),
    inUse: false
  };
  workerList.push(newWorker);
}
 
alert(workerList.length)

NavigatorConcurrentHardware
polyfill

Но это все очень относительно.

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

	06.06.2018, 00:18