Что вызывает это предупреждение на Safari?«Эта веб-страница использует значительную энергию. Закрытие может улучшить отзывчивость вашего Mac»

Question

У нас есть веб-сайт React с большим количеством высококачественных изображений, на которых появилось это предупреждение.Как начать отладку этого предупреждающего сообщения в Safari?Есть ли конкретные причины, которые вызывают это?

Answer 1

Откройте страницу в Chrome, откройте Инструменты разработчика и перейдите на вкладку «Производительность».

Затем используйте 2-й значок слева - тот, который выглядит как кнопка «перезагрузить».Который говорит: «Начните профилирование и перезагрузите страницу».

У вас будет полное краткое изложение того, что занимает, сколько.В верхней части вы можете увидеть, что съедает FPS и CPU, а затем вы можете выбрать таймфреймы, которые имели особенно высокую нагрузку.

В нижней части выберите «Дерево вызовов» или «Вниз»вкладки, чтобы получить краткое изложение того, какие скрипты и вызовы функций вызывают проблемы с производительностью.

Обычно "нормальные" сайты (например, не игры) не будут иметь много перерисовок фреймов.Затем вы можете определить, например, загружаются ли прядильщики с помощью javascript вместо преобразований и переходов;и иногда они все еще повторяют рендеринг, хотя они находятся вне досягаемости.

В примечании, относящемся к React: Возможно, имеет смысл дополнительно проверить его с помощью React Developer Tools .Например, вы можете обнаружить, что субкадры постоянно рендерится без причины.

Answer 2

Это сообщение вызвано сторожевым процессом Safari, который отслеживает сценарии Javascript, запущенные на странице.Он предназначен для уведомления пользователя, когда скрипт использует слишком много ресурсов.Ваша страница при загрузке на мой компьютер увеличивает загрузку процессора до 68 процентов.Будьте осторожны с циклами и пользовательским кодом рендеринга.

Примечания по улучшению:

• Сделайте код рендеринга максимально эффективным.

• Объедините ваши внутренние файлы Javascript в один файл вместо 7 файлов.Значительное улучшение.

• По возможности (из-за соображений лицензирования и обновления) включите 9 внешних сценариев в один файл, указанный выше.Незначительное улучшение.

• Разделить главную страницу на разные разделы, либо как отдельные страницы, либо динамически загружать с помощью AJAX.Значительное улучшение.

• Избегайте SVG-файлов.SVG-файлы требуют много вычислительной мощности для растеризации и отображения.Это основная причина 7-секундного времени загрузки.Преобразуйте файлы в png с наибольшим ожидаемым разрешением экрана и предложите расширенный файл SVG, если требуется больше деталей (щелчком мыши или задержкой мыши).Значительное улучшение.

Количество изображений не является проблемой.Это количество изображений SVG (при загрузке) и сценариев, вызывающих проблему.