Що показує вкладка Memory?

Вкладка Memory у Chrome DevTools показує, як вебсторінка використовує оперативну пам'ять, і допомагає знаходити витоки пам'яті, зайві об'єкти та неефективне керування ресурсами.

---

#Що можна робити:

#1. Heap snapshot (Знімок купи)

• Робить знімок поточної пам'яті: об'єкти, посилання, масиви, рядки
• Показує, які об'єкти займають найбільше місця
• Корисно для пошуку витоків пам'яті (об'єкти, які «висять» у пам'яті, хоча вже не потрібні)

#2. Allocation instrumentation on timeline

• Запускає запис, відстежує всі алокації протягом часу
• Показує, які функції створюють об'єкти
• Допомагає знайти «перевитрату» - об'єкти, які створюються знову і знову

#3. Allocation sampling

• Швидка оцінка, які типи об'єктів споживають найбільше пам'яті
• Підходить для швидкої діагностики без повної трасировки

---

#Що шукають у вкладці Memory:

• Витоки пам'яті (Memory leaks)
• об'єкти, які не видаляються після використання
• Надмірне використання пам'яті
• особливо в односторінкових застосунках (SPA) після переходів
• Накопичення DOM-нод
• коли елементи видаляються зі сторінки, але залишаються в пам'яті
• Незвільнені слухачі подій
• часта причина витоків

---

#Коли використовувати:

• при падіннях продуктивності на довгих сесіях
• при підозрі на витік (пам'ять зростає без повернення)
• при оптимізації рендера і керування об'єктами
• при розробці складних застосунків на React, Vue, Angular тощо

---

Висновок: Memory - це інструмент для тих, хто хоче зрозуміти, куди витікає пам'ять і чому сторінка гальмує з часом. Без нього доводиться ловити баги наосліп.