Hello, you guys, have you ever noticed that Size and Time are two lines in Chrome Network? As shown in the arrow below:

/api/v1/myaddress/all

About the Size column

Size has two lines:

  • The first line represents the dataWhen the transmissionAs shown in the figure above44.3 KB.
  • The second line represents the dataThe actualThe size of the441KB

Explanation:

Since this interface returns a large amount of data, the backend is gzip compressed, as can be seen from the content-Encoding of the response header

gzip
441KB
44.3 KB
Ten times

Points to note:

Gzip compression compresses only the body of the response, so it is suitable for returning large amounts of data. If the amount of data is too small, it may result in the data being transferred in a larger size than it actually is (for example, adding some extra response headers).

Generally Web frameworks such as SpringMVC can specify the size of the data to use gZIP compression

About the Time

Time has two lines:

  • The first line represents the total time it takes from the client to send the request to the server to return all the data, in the case above598ms
  • The second line represents the time from the time the request was sent from the client to the time the first byte was returned from the server, in the case above118msIf we hover the mouse over to the far right, the blue bar will have a detailed explanation of the time, as follows

Explanation:

The time in the first line represents all the items in the above column: resolving DNS, establishing a connection, waiting for the server to return data, transferring data, etc

The time in the second row is the total time – the time of data transfer

conclusion

From the above analysis we can see that it took 118ms (quite a long time) from the time the client request was processed to the time the server was ready to return the data, but it took 480ms to transfer the data

Network bandwidth varies from user to user. For users with slow network connection, the experience may be worse. Therefore, when writing code, the amount of data returned should be as small as possible.

Personally, I think understanding Chrome Network’s parameters helps us get a sense of the interface’s performance