60. Parallel vs Sequential

JavaScript: Мозги. Parallel vs Sequential

Иллюстрация к уроку В этом уроке мы разберем, как JavaScript выполняет код: последовательно (sequential) или параллельно (parallel). Понимание этого важно для написания эффективного и предсказуемого кода, особенно при работе с асинхронными операциями.

Последовательное (Sequential) выполнение

По умолчанию, JavaScript исполняет код построчно, сверху вниз. Это называется последовательным выполнением. Каждая строка кода выполняется одна за другой, и следующая строка не начнет выполняться, пока предыдущая не завершится.

console.log("Начало");
console.log("Середина");
console.log("Конец");

Результат:

Начало
Середина
Конец

В этом простом примере, каждая строка console.log выполняется по очереди. Это прямолинейное, предсказуемое выполнение.

Параллельное (Parallel) выполнение (асинхронность)

В JavaScript “параллельность” достигается за счет асинхронности. JavaScript сам по себе однопоточный, то есть он не может выполнять код одновременно в нескольких потоках. Однако, он может выполнять асинхронные операции, которые “отправляются в фон” и выполняются параллельно основному потоку, не блокируя его. Примерами таких операций являются запросы к серверу (AJAX), таймеры (setTimeout, setInterval) и обработка событий.

console.log("Начало");

setTimeout(() => {
  console.log("Середина (через 2 секунды)");
}, 2000);

console.log("Конец");

Результат:

Начало
Конец
Середина (через 2 секунды)

В этом примере, setTimeout не блокирует выполнение остального кода. “Конец” выводится в консоль почти сразу после “Начало”, а “Середина” выводится только после истечения 2 секунд. Это происходит потому, что setTimeout отправляет функцию в очередь задач, которая будет выполнена, когда основной поток JavaScript будет свободен.

Практический пример кода

Рассмотрим пример загрузки данных с сервера и отображения их в DOM:

// Функция для загрузки данных с сервера
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => { // Имитируем задержку при запросе к серверу
      const data = "Данные с сервера";
      resolve(data);
    }, 1000);
  });
}

// Функция для отображения данных в DOM
function displayData(data) {
  const element = document.getElementById("data");
  element.textContent = data;
}

// Вызываем функции
console.log("Начинаем загрузку...");
fetchData()
  .then(data => {
    console.log("Данные получены:", data);
    displayData(data);
  })
  .catch(error => {
    console.error("Ошибка:", error);
  });
console.log("Загрузка запущена.");

<!DOCTYPE html>
<html>
<head>
  <title>Parallel vs Sequential</title>
</head>
<body>
  <div id="data"></div>
  <script src="script.js"></script>
</body>
</html>

В этом примере, fetchData имитирует запрос к серверу с задержкой. Пока данные загружаются, основной поток JavaScript продолжает работать и выводит “Загрузка запущена.” в консоль. После получения данных, они отображаются в DOM.

Жизненный пример

Во многих современных веб-приложениях используется асинхронность для улучшения пользовательского опыта. Например:

React/Vue/Angular: Эти фреймворки активно используют асинхронные операции для загрузки данных, обновления компонентов и обработки событий. Например, при нажатии на кнопку, может быть отправлен AJAX запрос на сервер, и пока данные загружаются, пользователь может продолжать взаимодействовать с приложением.
Загрузка изображений: Когда вы заходите на сайт с большим количеством изображений, они обычно загружаются асинхронно. Это позволяет странице отобразиться быстрее, а изображения загружаются постепенно в фоновом режиме.
Анимации: Анимации часто выполняются асинхронно, чтобы не блокировать основной поток и обеспечить плавную работу интерфейса.

Ключевые моменты

JavaScript по умолчанию выполняет код последовательно.
Асинхронность позволяет выполнять операции “параллельно”, не блокируя основной поток.
setTimeout, setInterval, AJAX запросы и Promise используются для асинхронных операций.
Асинхронность улучшает пользовательский опыт, позволяя приложению оставаться отзывчивым во время выполнения длительных операций.
Понимание разницы между последовательным и параллельным выполнением критически важно для написания эффективного и предсказуемого кода на JavaScript.