Waterfall UI conventions (waterfall User Interface Convention)

I have used the HTTP waterfall chart for a long time. Each browser has its own waterfall chart, which is reasonable because different browsers track network events in different ways. Some tools can be used across browsers, suchHttpwatchBecause I want to deal with different types of browsers, the lack of user interface consistency between different browsers has a great impact on me. I am writing this blogArticleTo summarize the current situation and recommend the waterfall User Interface convention.

 

Judging from the experience I often use such tools, it is obvious that these waterfall charts are inconsistent. Each video is displayedWikipediaWaterfall. Areas I will focus on include connection status, content-category, and color and name of upload events. Some fields have a good degree of consistency, including the overall layout and initial columns, but these fields are subjective and the tool selector will feel that their choice will make their tools more favored. The consistency changes I recommend do not affect the content of the displayed information, but only the way in which the information is displayed.

 

CHrome development tools:

Firebug:

Httpwatch:

 

IE 9 development tools:

Webpagetest:

One of the major differences is the information displayed on the horizontal bar. The chrome development tool uses a horizontal bar to display the Content-Type: HTML-blue, CSS-green, image-purple, and so on. Other tools use a horizontal bar to display the length of each connection condition, such as DNS query, request sending, and download feedback. I think the content-category is more useful. I prefer the overall display method of httpwatch. The horizontal bar shows the connection status and the Content-category is a small icon (refer to the "type" column ). Even if other tools do not use the show icon, they use the font color to display the content-category. Next let's take a look at the connection status and content-Category Selection of different tools.

 

Connection status

The names and colors of network connection statuses used by different tools are different. In some cases, the granularity of the connection status is also different. The following table lists the colors and names used by each tool:

 

First, let's take a look at the name: chrome development tool and firebug for each connection status using the same name: blocking, DNS lookup, connection, sending), waiting, and receiving ). Except for "DNS query", all other names use verbs for temporal form. "querying DNS" sounds awkward. I prefer to use simple consistent verb tenses to express all names: Block, lookup DNS, connect, send, and wait), and receive (receive ). Similarly, similar connection statuses should be used between different tools: ie9 development tools and webpagetest do not show blocking and combine sending and waiting.

 

The color inconsistency is greater. The chrome development tool uses the same color for all connection states. Other tools have almost no overlap in color: I propose here:

 

L interception (Gray)-because nothing will happen

L DNS query (YELLOW)-like a yellow page

L connection (red)-this is the most important thing to discuss (RED: Warning)

L send (blue)-This color is in stark contrast to red

L waiting (pale purple)-pure ripe color during waiting

L accept (green)-because I have received the payment (green represents the money-if this word is incorrect for the United States, I apologize)

These are subjective choices. Other suggestions are welcome. I prefer to use Gray to intercept, and yellow to query DNS. I also listened to some people who know about the color wheel. (I have been engaged in painting for many years, but I have never learned it .)

 

Content-category

Only chrome development tools use the level in the waterfall to reflect the content-category. The tool developer can decide whether to use a horizontal bar to display the content-category or connection status. I prefer to use a horizontal bar to display the content-category, just like the chrome development tool. The connection status information can be displayed in the pop-up window or in the Details View. If you select a level bar, chrome development tools, firebug, httpwatch, and ie9 development tools have used the detailed view to display the connection status.

 

Aside from the information displayed on the horizontal bar, you can benefit a lot from the color consistency of the content-category. A color chart can be used to download the text color, general requirement chart, and content-category of a waterfall chart.

Color Map of chrome development tools:

 

L HTML (blue)

L JavaScript (orange)

L CSS (green)

L image (purple)

L text/plane (yellow)

L redirection (Gray)

 

I have no objection to the selection of these colors. I like JavaScript to be red because there are many errors in my JavaScript. I made CSS purple, which is more "Fantastic" (CSS can make the page more distinctive ). I made the image blue. Images are the most common types of appearance, and my world is almost full of blue (true rather than instant emotional ). HTML is green. I emphasize that this is my subjective idea.

 

Upload event

Many development tools use vertical lines to display uploaded domc content and window upload events. Similarly, different tools use different names and colors:

 

I like the domc content upload function because I understand its meaning. I don't pay much attention to the color. For me, I will choose blue and green.

 

Others

I work in Jan's (Honza's) at Brian pane and Jan odvark)Har BrowserUser Interface modification. I want to add the content-category icon so that other tools can follow suit. If you want to add tags,Contact me.

I have no good solutions for names and colors.MarknotttheimWe recommend that you use"Etherpad or wiki page". I would be grateful if you could provide me with good ideas or suggestions on the content. All in all, if the consistency of development tools can be more, tool developers can also improve network performance more conveniently. I believe this is also the hope of everyone.

 

Waterfall UI conventions