Это были несколько загруженных месяцев, связанных с женитьбой, свадебным путешествием, переездом и обустройством нашей квартиры. Несмотря на всю эту реальную жизнь, я много работал над созданием классного маленького инструмента для визуализации профилей кучи Chrome. Я очень рад объявить, что HeapViz работает!
HeapViz - это инструмент, который позволяет загружать временную шкалу кучи Chrome или снимок кучи и видеть их визуализированными с помощью алгоритма упаковки кругов. Это означает, что вы понимаете, какой объем памяти занимает ваше веб-приложение, и можете легко находить выбросы или проблемные узлы. Пошагово просматривая свою временную шкалу, вы можете точно определить, где возникают эти проблемные области, а, просматривая края и фиксаторы, вы можете понять природу проблемных узлов.
Чтобы использовать HeapViz, сгенерируйте временную шкалу или снимок веб-сайта, который вы хотите профилировать, с помощью вкладки памяти в Chrome DevTools.
Затем загрузите профиль кучи в HeapViz, перетащив его в главное окно.
Наконец, поэкспериментируйте со своим профилем, наводя указатель мыши и нажимая на узлы. Вы можете изменить отображаемый образец, щелкнув и перетащив полосу выбора образца в верхней части окна или используя клавиши со стрелками.
Попробуйте изменить фильтры, чтобы отображать только узлы определенного размера, количества фиксаторов или краев или типа.
Нажмите кнопку фиксаторов или краев, чтобы просмотреть узлы, которые ссылаются на текущий узел.
Создавать HeapViz было очень весело и много работы. Ознакомьтесь с моими статьями о моем вдохновении, как я выбрал метод визуализации, моем выборе средства визуализации, использовании WebWorkers и ускорении макета с помощью WebAssembly. Я хотел бы получить отзывы как о приложении, так и о коде, стоящем за ним, и надеюсь, что вы получите удовольствие от просмотра пространства памяти, расположенного крутым круговым образом!
