В этой статье описывается какой-то опыт устранения утечек памяти, надеюсь будет полезен, но и способ самопоощрения, дозаправки ^ _ ^
Как узнать, есть ли утечка памяти
Способ 1. Откройте монитор производительности панели браузера Chrome, чтобы просмотреть использование памяти в режиме реального времени.
如果一段时间内，内存持续稳定攀升，就有内存泄漏。这就要求实时查看内存占用。
Способ 2: используйте командную строку узла
process.memoryUsage()// Выводим использование памяти, поля следующие
> rss（resident set size）：所有内存占用，包括指令区和堆栈。
> heapTotal："堆"占用的内存，包括用到的和没用到的。
> heapUsed：用到的堆的部分。
> external： V8 引擎内部的 C++ 对象占用的内存
Определить использование памяти, чтобыheapUsedв качестве эталона.
Способ 3: Периодически выводить текущий размер памяти в html
// 周期性观察输出的内存是否有变化
setInterval(()=>{
console.log(window.performance.memory);
},2000)
window.performance.memory: вывести текущие свойства памяти
usedJsHeapSize — общий объем памяти: относится к памяти, занимаемой объектами JS, включая внутренние объекты V8. totalJsHeapSize — текущая общая память: относится к памяти, занимаемой кучей JS, включая свободную память любого объекта js.
Как использовать панель анализа Chrome
1.монитор производительности: мониторинг памяти в реальном времени
Откройте панель Chrome - вкладку «Функция», нажмите ... в правом верхнем углу выбрать больше инструментов -> монитор производительности
> CPU usage - 当前站点的 CPU 使用量；
> JS heap size - 应用的内存占用量；
> DOM Nodes - 内存中 DOM 节点数目；
> JS event listeners- 当前页面上注册的 JavaScript 事件监听器数量;
> Documents - 当前页面中使用的样式或者脚本文件数目；
> Frames - 当前页面上的 Frames 数目，包括 iframe 与 workers；
> Layouts / sec - 每秒的 DOM 重布局数目；
> Style recalcs / sec - 浏览器需要重新计算样式的频次；
Сосредоточьтесь на 4 пункта, если вам нужно оптимизировать производительность, вы можете обратить внимание на 3 предмета!
2.memory
При наблюдении за панелью монитора производительности, если объем памяти увеличивается медленно, это означает наличие утечки памяти.
В моем случае память увеличивается на 1-2 МБ каждые 30-х годов. Хотя это не так много, процесс веб-страницы будет застрять по мере увеличения времени, поэтому требуется подробный анализ.
Откройте панель памяти в Chrome и запишите снимок 1 до утечки памяти и снимок 2 после утечки памяти, как показано на следующем рисунке.
Существуют различные типы списков, которые могут отображаться в каждом представлении результата, но наиболее полезным для нашей задачи являются сводными и сравнениями списками.
В сводном представлении представлены различные типы объектов распределения и их совокупный размер:
> shallow size：一个特定类型的所有对象的总和
> retained size：shallow size 加上引用此对象的其它对象的大小。
也是指释放了该对象及其引用后，可以回收的内存。
即对象及其依赖对象的内存大小。
> distance 显示了对象到达 GC 根（校者注：最初引用的那块内存）的最短距离。
> constructor：表示所有通过该构造函数生成的对象。
Представление сравнения предоставляет ту же информацию, но позволяет сравнивать разные снимки. Это полезно для поиска утечек.
3.JavaScript profiler
Функция: он может записывать трудоемкую ситуацию функций, и удобно находить функции, которые занимают больше времени. использовать:
4.Performance
Пламенный график различных показателей производительности на странице статистики, где можно увидеть такую информацию, как время белого экрана, FPS, график загрузки ресурсов, лонгтаск и кривая изменения памяти. Цель: Оптимизация производительности веб-страниц.
Цитируется в этой статье
1.Руан Дашен — руководство по утечке памяти
2.Инструменты анализа утечек памяти JS и Chrome
3.Анализ утечки памяти во внешнем интерфейсе
4.Инструмент анализа оптимизации производительности внешнего интерфейса