Как исправить предупреждение «Long running JavaScript task»

Быстрый ответ

Для устранения предупреждений об излишней продолжительности выполнения долгих задач добавьте асинхронность и разбейте сложные вычисления на менее обременительные части. Используйте setTimeout или requestAnimationFrame для создания неблокирующих циклов. А ещё воспользуйтесь async/await в сочетании с Promise для постоянного возврата контроля в цикл событий.

Пример эффективного подхода:

function processAsync(array, process, done) {
  // Начинаем с первого элемента
  (function loop(i) {
    // Если элементы в массиве ещё остались,
    if (i < array.length) {
      // Вставляем минимальную паузу (микроскопическую по времени)
      setTimeout(() => {
        // Обрабатываем текущий элемент
        process(array[i]);
        // Переходим к следующему
        loop(i + 1);
      }, 0);
    } else {
      // Завершаем работу
      done(); 
    }
  })(0);
}

processAsync(largeArray, item => {
  // Подготавливаем элемент к обработке
}, () => {
  console.log('Обработка завершена. Время учуять чаек'); // Маленькая отсылка к традициям британских разработчиков
});

Вышеуказанный скрипт обрабатывает largeArray постепенно, позволяя браузеру оставаться отзывчивым во время тяжёлых операций. Дополнительно оптимизируйте процесс для увеличения производительности.

Идентификация узких мест производительности

Понимание причин замедления работы JavaScript помогает повысить его производительность. Профилировщик Chrome, вкладка «Производительность», — это инструмент, позволяющий выявить узкие места в коде, с тем чтобы эффективно устранять баги и повышать производительность.

Предупреждения и рефакторинг: упорядочиваем все дела

Предупреждения в консоли Chrome могут сигнализировать о возникших проблемах. Система контроля версий поможет идентифицировать момент возникновения проблем. Постепенное компонование кода поможет найти причину замедления.

Подробнее об этом расскажет наш спикер на видео

Оптимизация DOM: дом должен быть в порядке

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

Асинхронные решения: дорога к неблокирующим операциям

Преобразование синхронных операций в асинхронные позволяет избежать блокировки. Используйте setTimeout или Promise.resolve для перевода операций в неблокирующие события или Web Workers для выполнения вычислений на заднем плане без влияния на главный поток рендеринга.

Визуализация

Представьте движок JavaScript как повара (👨‍🍳) на загруженной кухне ресторана:

Кухня (🏠): [👨‍🍳🍳🔥, 🕒🧑‍🍳, 🐢💬📈]

Повар начинает выполнять заказ (задачу):

👨‍🍳🍳🔥: Готовлю обед из четырех блюд. Оставайтесь здесь!
Vs.
🧑‍🍳🥪: Собираю бутерброд. Быстро и просто!

Обед из четырех блюд — это долгое дело, которое занимает массу времени (xx мс). Из-за этого клиенты (события) становятся недовольными:

🕒🧑‍🍳: Время идет... "Что занимает столько времени?"

При отставании ходового процесса:

🐢💬📈: "Суфле готовилось слишком долго и заставило всех ждать. Не давайте такого повторяться."

Пересмотрите свои методы или разбейте задачи на части. Так кухня (цикл событий JS) останется активной.

Характеристики лидера: звезда на JavaScript-сцене

Уходим от консольных сообщений

Предупреждения в консоли — это полезная информация, но Профилировщик Chrome дает гораздо больше данных об производительности. Проводите тестирование, используйте инструменты отображения результатов и анализируйте проблемные задачи.

Бенчмаркинг: улучшаем навыки

Интегрируйте проверенные библиотеки для бенчмаркинга вроде Benchmark.js. Такой подход улучшает понимание производительности кода и помогает выявить слабые места.

Точность – залог успеха: от громоздкого к минималистичному

После выявления проблем перейдите к улучшению кода. В частности, оптимизируйте алгоритмическую сложность, используйте Web Workers при необходимости и применяйте актуальные инструменты, такие как lodash, для оптимизации дебаунсинга и троттлинга обработчиков событий.

Кроссбраузерность: делаем доступным для всех

Производите тестирование приложения в разных браузерах. Определённые ошибки могут проявляться только в Chrome, поэтому важно понимать, как ваше приложение функционирует в других окружениях, чтобы гарантировать комфортный веб-опыт.

Полезные материалы

1. Chrome DevTools | Chrome для разработчиков – подробное руководство по использованию инструментов разработчика от Chrome для анализа производительности.
2. Использование Web Workers – Веб API | MDN – исчерпывающая информация о применении Web Workers для выполнения JavaScript-задач в фоновом режиме.
3. Debouncing и Throttling объяснены на примерах | CSS-Tricks – пояснение о том, как дебаунсинг и троттлинг способствуют увеличению производительности JavaScript с примерами на практике.
4. Non-blocking JavaScript с помощью Async и Defer — SitePoint – описание методом загрузки JavaScript без блокировки DOM.
5. Цикл событий: микрозадачи и макрозадачи – подробный обзор работы цикла событий JavaScript, что критически важно для понимания асинхронных операций.
6. Чек-лист по производительности фронтенда 2021 (PDF, Apple Pages, MS Word) — Smashing Magazine – детализированный список контрольных задач для оптимизации веб-приложений на фронтенде.
7. AddyOsmani.com – Улучшение производительности с помощью профилей Chrome DevTools – представляет сведения о работе с профилями и выявлении проблем производительности веб-приложений.