Today’s brief introduction to The Chrome DevTools Network is just a few modules. Front-end development, you’re all familiar with this.

Network Network panel displays a list of all requests on the page. You can view detailed information about each request, request information, response information, and various timelines.

I wanted to use the drawing tool to label all of them, but if there are orders, I will introduce a few important ones directly, and the others can be viewed by myself.

Controller: Preserve log: Jumps to the page or refreshes the page to retain the details of previously initiated requests. It can be used to trace some interfaces. Disable cache: Used to debug certain load times or performance. It is not allowed to load from the cache. No Throttling: Used to set network bandwidth, simulate some network scenarios, and can be customized.

Filter: To filter the content and details you want to see, click the Settings icon in the upper right corner, there are four filters that are not used at ordinary times. Capture screenshots: Capture screenshots: Show Overview: Capture screenshots: Capture screenshots

Page screenshot information: See the page loading process display content, if the pursuit of the ultimate performance and experience, it needs to be analyzed through this.

Timeline: used to show the time of each request, can be very detailed to know the page loading process and time. Equivalent to graph statistics, generally useless, mainly to see a detailed list.

Detailed list: This is the most used, viewing the status of each request from inception to completion.

Download info: Requests, processed, processed, resources, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed, processed and processed. If there is only one STATIC HTML, it is generally about the same. The DOMContentLoaded event is fired after the initial HTML document has been fully loaded and parsed, without waiting for the stylesheet, image, and subframe to be fully loaded. Load in MDN means that the Load event is triggered when the entire page and all dependent resources such as stylesheets and images have been loaded.

So DOMContentLoaded and Load, now a lot of things are said about when DOMContentLoaded is executed through the page rendering process, and that’s true, but just to be clear, DOMContentLoaded is triggered only after the HTML document has been fully loaded and parsed. There is another article shared specifically for this, you can check it out.

Finally, look at the most important detailed list:

There are many parameters, you can also right-click to customize the parameters to display, some do not understand can be displayed to see the content is easy to understand. Name, status, SIZE, time, Waterfall, connection ID (TCP connection ID) these several important points, the rest can be looked at casually. You can sort it.

Click on a specific request to see the details, which should go without saying, mainly the details of the request response.

Take a look at the timeline:

Queueing: The browser sets a maximum number of connections for each domain name, which is queueing.

例 句 : Several factors delayed the connection before it was launched, principally the TCP connection detection phase.

Proxy Negotiation: in the stage of Proxy Negotiation, one is found, but now it cannot be found, so the picture does not have one. If a Proxy server is used, this will appear, which represents the time taken by the Proxy server to connect and negotiate.

DNS Lookup: Resolves the mapping between domain names and IP addresses.

Initial Connection: The stage in which the connection is initialized and established with the server. This includes the time spent establishing the TCP connection.

SSL: Extra SSL handshake time with HTTPS is used to negotiate encrypted information.

Request sent: This phase is usually very fast because you just need to send the data from the browser buffer and you don’t need to determine whether the server has received it, so it usually takes less than 1 millisecond.

Waiting (TTFB) : Usually called “first byte time”, TTFB is an important indicator of server response speed. The time between sending a request and receiving a response is shorter than the TTFB time.

Content Download: After the first byte is received, the complete data is received successively, which means the time from the first byte until the full response data is received. If it takes too long, the file is too big.

Coding Personal notes public number