Могу ли я оптимизировать визуальный эффект тяжелого основного потока JavaScript из библиотеки?

Question

Обычно я пытаюсь сделать все свои визуальные эффекты с помощью CSS. Но иногда, будь то явный запрос клиента или желаемый эффект слишком сложен для CSS, мне нужно использовать библиотеки JS. Одним из таких примеров является Particles. js.

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

Если у меня нет никакого контроля над самой библиотекой и нет более эффективной библиотеки доступно *, что я могу сделать, чтобы улучшить производительность?

Какие методы я могу использовать, чтобы минимизировать влияние, которое оказывает такой тяжелый сценарий визуальных эффектов? Могу ли я, например, загрузить эффект, только если устройство достаточно мощное, чтобы справиться с ним? Можно ли расставить приоритеты для эффекта, чтобы задержка не повлияла на остальную часть страницы?

* Это может иметь или не иметь место в случае данной конкретной библиотеки, но давайте предположим, что нет лучше.

Answer 1

Использование requestAnimationFrame (и библиотек, которые его используют) всегда увеличивает время рендеринга и оценки скрипта. Это не обязательно плохо, но вы не всегда можете контролировать внешнюю библиотеку.

Один из вариантов - добавить слой к анимации. Что-то вроде этого добавит очень мало накладных расходов на анимацию, но отменит ее, если частота кадров начнет снижаться:

Это выглядит примерно так:

let startTime = Performance.now() // precise start time
const animation = new MyAnimationLib()
const updateLoop = newTime => {
  const delta = newTime - startTime
  startTime = newTime
  if (delta > 1000 / 60) { 
    animation.cancel() // 60 fps min to keep running animation
    return // exit the loop
  }
  requestAnimationFrame(updateLoop)
}

// Start monitoring the animation
requestAnimationFrame(updateLoop)