Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке "bottleneck" в алгоритмах?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Bottleneck (вузьке місце)** - це частина алгоритму (або системи), яка обмежує загальну продуктивність, тобто найповільніша або найресурсомісткіша частина, через яку все інше працює повільніше. **Ключове:** назва походить від "шийки пляшки" - крізь вузьке горлечко рідина тече повільно, хоча сама пляшка може бути великою.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## 1. Що означає "bottleneck" > **Bottleneck (вузьке місце)** - це частина алгоритму (або системи), > яка **обмежує загальну продуктивність**, > тобто найповільніша або найресурсомісткіша частина, > через яку **все інше працює повільніше**. Назва походить від "шийки пляшки": крізь вузьке горлечко рідина тече повільно, хоча сама пляшка може бути великою. --- ## 2. У контексті алгоритмів > В алгоритмі bottleneck - це операція або ділянка коду, > чия **часова або просторова складність** > домінує над іншими частинами. ### Приклад: ```javascript function processData(data) { // 1. Швидка фільтрація (O(n)) const filtered = data.filter(x => x > 10); // 2. Сортування (O(n log n)) const sorted = filtered.sort((a, b) => a - b); // 3. Легкий прохід (O(n)) return sorted.map(x => x * 2); } ``` **Bottleneck тут - сортування** (`O(n log n)`), тому що саме вона визначає загальну продуктивність. Навіть якщо оптимізувати інші кроки, прискорення буде мінімальним. Загальна складність: > `O(n) + O(n log n) + O(n)` ≈ **O(n log n)** --- ## 3. Приклад із числовим ефектом | Етап | Час | Частка від загального | |---|---|---| | Фільтрація | 10 мс | 5% | | Сортування | 170 мс | **85%** | | Постобробка | 20 мс | 10% | "Вузьке місце" - **сортування**. Оптимізація інших 15% майже не дасть приросту. Закон Амдала: > покращення 90% коду не має сенсу, якщо 10% залишаються bottleneck. --- ## 4. Як знаходять bottleneck ### У браузері: - **Chrome DevTools → Performance** → шукаємо, де "горить" більше CPU. - **Lighthouse** → показує "Long tasks", "Recalculate Style", "Layout". ### У Node.js: - `--inspect` → Flamegraph у DevTools; - `clinic.js`, `0x`, `node --prof`; - вимірювання з `performance.now()`, `console.time()`. ### В алгоритмах: - Теоретичний аналіз складності (Big O); - Вимірювання часу на великих вхідних даних; - Порівняння частин функції (loop, recursion, sort, filter). --- ## 5. Типові bottlenecks у JS-коді | Категорія | Приклад | Чому "вузьке місце" | |---|---|---| | CPU-bound | великі цикли, сортування, рекурсії | блокують event loop | | Алгоритми | неефективна структура даних (пошук у масиві замість Map) | зростає складність | | Пам'ять | зберігання великих структур без очищення | GC, лаги | | I/O | мережеві запити, читання файлів | чекаємо відповідь | | DOM | часті reflow/repaint | довгий рендер | | React | зайві перерендери, повторне створення функцій | навантаження на reconciliation | --- ## 6. Як усувають bottlenecks | Підхід | Що робить | |---|---| | **Профілювання** | спочатку вимірюємо, де "вузьке місце" | | **Оптимізація алгоритму** | замінюємо O(n²) на O(n log n) | | **Мемоізація / кешування** | повторно використовуємо обчислення | | **Паралелізація (Web Workers)** | переносимо CPU-важке в інший потік | | **Асинхронність / batching** | робимо I/O-операції неблокуючими | | **Оптимізація пам'яті** | видаляємо зайві об'єкти | | **Вибір іншої структури даних** | `Set` замість `Array.includes()`, `Map` замість `Object` | --- ## 7. Аналогія Уяви фабрику: - Один верстат виробляє 100 деталей/хв. - Другий обробляє 10 деталей/хв. → саме він стає **bottleneck**. - Навіть якщо прискорити перший верстат, швидкість усієї системи **не зросте**, поки не оптимізуєш другий. --- ## 8. Коротке резюме | Термін | Значення | |---|---| | **Bottleneck** | Найповільніша частина алгоритму, що обмежує загальну продуктивність | | **Прояв** | Тривале виконання, висока завантаженість CPU, затримки | | **Як знайти** | Профілювання, вимірювання, аналіз Big O | | **Як усунути** | Змінити алгоритм, структуру даних, розпаралелити |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.