JavaScript performance story: choosing a visualization method

It workers 2022-06-23 17:48:19 阅读数:562

javascriptperformancestorychoosingvisualization

Imperfect heaps make perfect figures

How much value can my tools provide , Will be determined by the size of its ability to quickly diagnose memory profile problems . Considering that I can use intuition Engineering To enhance visualization , I put forward three criteria for success :

It is easy to create baselines . This allows users to easily see differences between different heap profiles or time samples .

Be able to communicate problems quickly and effectively .

Can effectively display many nodes . many , many , many .

To effectively create baselines , We need something that can represent a lot of relevant data at a glance . The two tools I use to represent nodes are size and color . Draw nodes by size , It can quickly highlight applications that occupy a large amount of memory . Similarly , The heap status can be analyzed at a glance by directly clicking the color .

With this general idea , The problem of how to communicate the problem is solved . combination Chrome The output of the heap configuration file and my own experience , That's true. The size of the node itself And reserve size is critical . I also know that I need to find some representatives Reserved by Methods , Because they play a key role in solving memory problems .

The first guess ? Force steering diagram

We need to find one that can display the size and color of entity format separately , It can also indicate the relationship between them , So I thought of the force - oriented graph .

Imperfect heaps make perfect figures

How much value can my tools provide , Will be determined by the size of its ability to quickly diagnose memory profile problems . Considering that I can use intuition Engineering To enhance visualization , I put forward three criteria for success :

It is easy to create baselines . This allows users to easily see differences between different heap profiles or time samples .

Be able to communicate problems quickly and effectively .

Can effectively display many nodes . many , many , many .

To effectively create baselines , We need something that can represent a lot of relevant data at a glance . The two tools I use to represent nodes are size and color . Draw nodes by size , It can quickly highlight applications that occupy a large amount of memory . Similarly , The heap status can be analyzed at a glance by directly clicking the color .

With this general idea , The problem of how to communicate the problem is solved . combination Chrome The output of the heap configuration file and my own experience , That's true. The size of the node itself And reserve size is critical . I also know that I need to find some representatives Reserved by Methods , Because they play a key role in solving memory problems .

The first guess ? Force steering diagram

We need to find one that can display the size and color of entity format separately , It can also indicate the relationship between them , So I thought of the force - oriented graph .

( picture source :Martin Grandjean)

The force guide diagram is very good ! In order to reflect the importance of communication , They will check all box—— Effectively represent nodes of different sizes , Color , They show the relationships between nodes .D3 Even a forced layout module is provided , It makes it easy to implement one of them sucker.

Unfortunately , They do not meet the performance requirements . Computationally expensive to force layout . Most browsers take a few minutes to lay out thousands of nodes . Besides , When they get bigger , It also looks like it will get very crowded .

with 20 Force oriented diagram of ten thousand nodes ( picture source :graphmap.net)

If my tool takes a long time to lay out the heap , Or if it is difficult to obtain relevant diagnostic information about a single node , Then it will not be more useful than manually parsing the data . Last , I decided pass The force oriented graph option .

Why don't you try the circle chart ?

For force oriented graphs , They use circles to represent nodes , I really like this practice . From a visual point of view , It's still very attractive , It's easier to understand . Of course , It would be nice if the cost of drawing was not so high !

In rendering force layout In the process of , Most of the difficulties come from the need to plot the relationships between nodes . If I can find a similar layout , But the edges are not drawn explicitly , Then I can render all the nodes i need .

Enter round package .

Take a look at the effect of the circular graph :

( picture source :Mike Bostock and Jeff Heer)

I see some potential advantages here - It has many advantages of force oriented graph - Circular nodes , Color nodes and relative sizes are clear at a glance - However, unlike the force oriented graph, it is not necessary to calculate the association between objects .

Of course, I also see some shortcomings :

1. For deeply nested hierarchies , It's inefficient .

2. It is difficult to reflect the non hierarchical relationship between nodes .

To solve the first problem , I decided to flatten the data as much as possible . please remember , Memory is usually represented as graphics , It is sometimes expressed as a dominating tree , No layering by default , But if you need to , It can also be grouped by type or other qualification .

Now let's talk about the second question . I like the circular layout , I think the only indication that needs to be presented to the user is the text list , And the number on the node . Often it only happens after the problem is identified , To feel the value of the preserver , So I decided to simplify the initial Visualization , Include only those elements that have problems .

Honorary Award :Treemap

You may think , Since the performance requirements of large data sets are so high , Why not use Treemap Well ?

( picture source :MDN)

Let me tell you why I didn't choose Treemap Why :

Treemaps It doesn't look as visually attractive as a circular layout ;

It's so simple ! Compared with other drawing types , The computational cost of building a tree is too small ;

Firefox Already done .

I have adopted the circular layout as my visualization method , Here are a few additional reasons .

I don't care about hierarchies beyond node types . The tree graph can quickly show the weights in the hierarchy , But for a relatively flat tree , It is more difficult to draw the outline .

In a sense , Circular layouts are generally considered more visually consumable than equivalent tree charts . I believe they got to a point - The space between nodes makes it easier to identify patterns between groups .

therefore , The problem is solved ! I decided to use a circular layout , And think of it as a good choice for visualizing memory heap .

版权声明:本文为[It workers]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/01/202201051804123602.html