FlameGraph — це інструмент візуалізації для аналізу продуктивності додатків, який відображає стек трейсів у вигляді ієрархічної структури, де кожна функція представлена прямокутником. Ширина кожного прямокутника відповідає часу, витраченому на цю функцію та її дочірні елементи, що дозволяє розробникам виявляти вузькі місця продуктивності та оптимізувати код.
Цей інструмент широко використовується в різних мовах програмування та середовищах, зокрема в таких інструментах, як Linux perf для C/C++ або Node.js --prof для JavaScript для збору профілюючих даних. FlameGraphs особливо корисні для налагодження, моніторингу продуктивних систем і покращення ефективності додатків, оскільки вони забезпечують інтуїтивно зрозумілий, інтерактивний вигляд шляхів виконання та споживання ресурсів.
Flamegraph KnowledgeMap надає доступ до всіх зразків, які зображені на наведеному нижче зображенні.
https://onurdayibasi.dev/flamegraph-knowledge-map
Примітка: Платформа LearnReactUI.dev надає підручники та вихідний код для синіх зразків, що зображені на зображенні нижче. Для додаткових і більш складних прикладів ви можете звернутися до мене через цю сторінку. Також натисніть це посилання, щоб переглянути приклади на інші теми.
Приклади
FlameGraph
У цьому прикладі я створив інфраструктуру для генерації випадкових даних про використання процесів та експериментую з тим, як вони виглядатимуть. Ця інфраструктура для генерації випадкових даних:
- Dividing Count: Максимальна кількість горизонтальних поділів шарів процесу по осі X
- Level Count: Визначає, скільки шарів матиме процес по осі Y
Tooltip
Під час навігації на FlameGraph, Tooltip дозволяє показати деталі даних, з якими ви працюєте за допомогою миші.
Офарблення
Я працював над тим, як шари та фрагменти можна краще розуміти за допомогою різних технік фарбування.
AutoSize
Я створив тестове середовище, щоб перевірити, як FlameGraph реагує на екрани різних розмірів.
Перекладено з: React FlameGraph Examples