Улучшение веб-производительности: как разбить тяжелые задачи с помощью setTimeout()

Что такое setTimeout()?

setTimeout() – это метод в JavaScript, позволяющий запланировать выполнение функции по истечении определенного времени.

Метод setTimeout() принимает два параметра: выполняемую функцию и время задержки в миллисекундах.

function sayHello() {
  console.log("Hello Basit!");
}

setTimeout(sayHello, 2000); // the function will be executed after 2000 milliseconds (2 seconds)

Примечание

setTimeout() может быть полезен для асинхронного выполнения кода, что означает, что он не блокирует основной поток браузера.

Преимущества

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

Как использовать

Чтобы использовать setTimeout() для выполнения тяжелых задач, мы можем разбить задачу на более мелкие фрагменты и выполнять каждый фрагмент с задержкой.

Вот пример:

function heavyTask() {
  console.log('heavy task started...');

  let i = 0;
  let chunkSize = 10;
  let delay = 500; // 500 milliseconds delay 
  
  function processChunk() {
    for (let j = 0; j < chunkSize; j++) {
      i++;

      console.log('processing item', i);

      if (i === 100) {
        console.log('heavy task complete.');
        return;
      }
    }
    setTimeout(processChunk, delay);
  }
  
  setTimeout(processChunk, 0);
}

heavyTask(); // CALL IT HERE

Пояснение

В этом примере функция heavyTask() устанавливает цикл, который выполняется 100 раз, при этом каждая итерация обрабатывает 10 элементов.

Цикл разбит на части по 10 элементов, и каждая часть выполняется с задержкой в ​​500 миллисекунд с использованием setTimeout().

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

Функция processChunk() определена в функции heavyTask() и содержит логику для обработки каждого блока элементов.

Сначала функция проверяет, все ли элементы обработаны, и если да, то выводит на консоль сообщение о том, что задача выполнена.

В противном случае он обрабатывает следующий блок элементов, используя цикл for, и устанавливает функцию setTimeout() для повторного выполнения функции processChunk() после задержки в 500 миллисекунд.

Наконец, функция heavyTask() настраивает начальную функцию setTimeout() на выполнение функции processChunk() сразу после завершения выполнения текущего скрипта (т. е. после обработки всех других отложенных задач).

Примечания

1. Повышение скорости отклика страницы. Разбивая задачу на более мелкие фрагменты и выполняя каждый фрагмент с задержкой, другие задачи могут обрабатываться между каждым фрагментом, поддерживая отзывчивость страницы.
2. Предотвращение длительных сценариев: выполняя тяжелую задачу небольшими фрагментами с задержкой, браузер может обрабатывать другие задачи между каждым фрагментом, предотвращая слишком долгое выполнение скрипта. >
3. Разрешение прерывания: если пользователь хочет взаимодействовать со страницей во время выполнения тяжелой задачи, задачу можно прервать или отменить, если она выполняется небольшими фрагментами с задержкой. Это может предотвратить разочарование и улучшить общее впечатление от пользователя.
4. Управление ресурсами. Разбивая тяжелую задачу на более мелкие фрагменты и выполняя каждый фрагмент с задержкой, браузер может управлять своими ресурсами более эффективно. Задача может выполняться в таким образом, чтобы максимально использовать имеющиеся ресурсы и свести к минимуму его влияние на другие задачи.

Заключение

В заключение, использование setTimeout() для разбиения тяжелых задач на более мелкие фрагменты может повысить производительность веб-сайтов, сделав страницы более отзывчивыми, предотвратив длительные сценарии, позволив прерывание и более эффективно управляя ресурсами.

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

Создавайте приложения с повторно используемыми компонентами, такими как Lego.

Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.

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

→ Подробнее

Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:

→ Микро-интерфейсы

→ Система дизайна

→ Совместное использование кода и повторное использование

→ Монорепо

Узнать больше