Chrome developer tool: performance analysis using web panel

Form writing habits together ！ This is my participation 「 Nuggets day new plan · 4 Yuegengwen challenge 」 Of the 28 God , Click to see the event details .

Chrome Developer tools are very important , It also contains a lot of content , Using it skillfully allows you to write better applications . It contains 10 A function panel , It includes Elements、Console、Sources、NetWork、Performance、Memory、Application、Security、Lighthouse and Layers. The following mainly introduces the network panel , The network panel contains the following contents ：

controller

among , The controller has 4 A more important function , Follow the diagram below to briefly introduce .

• Red dot button , Express " Start / Stop grabbing ".
• " Global search " Button , This function is very important , You can search for relevant content in all download resources , You can also quickly locate some files you want .
• Disable cache, namely " Prohibition from Cache Loading resources in " The function of , It's debugging Web Very useful when applying , Because it's on Cache It will affect the results of network performance test .
• Online Button , yes " simulation 2G/3G" function , It can limit bandwidth , Simulate the display of the page under the condition of weak network , Then you can dynamically adjust the strategy according to the actual display , In order to make Web The application is more suitable for these weak networks .

Snapshot information

Capture the information area , It can be used to analyze what the user sees while waiting for the page to load , Analyze the actual experience of users . such as , If the page loads 1 After more than seconds, the screen shot is still white , At this time, it is necessary to analyze whether it is the network or the code .

Download information summary

Download the information summary , You need to focus on DOMContentLoaded and Load Two events , And the completion time of these two events .

• DOMContentLoaded, After this incident , Explain that the page has been built DOM 了 , That means building DOM The required HTML file 、JavaScript file 、CSS The files have been downloaded .
• Load, The browser has loaded all the resources （ Images 、 Style sheets, etc ）.

Detailed list

Browser HTTP Request flow , Refer to the below ：

To launch a HTTP After the request , The browser first looks for the cache , If the cache misses , Then continue to launch DNS The request for IP Address , And then use it IP Address and server-side establishment TCP Connect , Send again HTTP request , Wait for the server to respond ; however , If the server response header contains redirection information , Then the whole process needs to go again . This is a in the browser HTTP The basic process of the request .

How does the detailed list show the process ？ This will focus on the timeline panel ：

The first is Queuing, That means queuing , When the browser makes a request , There are many reasons why the request cannot be executed immediately , It's about waiting in line . There are many reasons why requests are queued .

• First , The resources in the page have priority , such as CSS、HTML、JavaScript Etc. are the core files in the page , So the highest priority ; And pictures 、 video 、 Audio is not the core resource , The priority is lower . Usually when the latter meets the former , Need “ Give way ”, Enter the waiting state .

• secondly , The browser will maintain a maximum of 6 individual TCP Connect , If you launch a HTTP When asked , this 6 individual TCP Connections are busy , Then the request will be queued .

• Last , When a network process allocates disk space for data , new HTTP The request also needs to wait briefly for the disk allocation to end .

Wait for the queue to finish , It's about to enter the state of initiating connection . But before initiating the connection , There are other reasons why the connection process may be delayed , This delay is shown in the panel Stalled On , It means stagnation .

Next , That's it Initial connection/SSL Stage , That is, the stage of establishing a connection with the server , This includes the establishment of TCP Time spent connecting ; But if you use HTTPS agreement , Then you need an extra SSL Handshake time , This process is mainly used to negotiate some encrypted information .

After establishing a connection with the server , The network process is ready to request data , And send it to the network , This is it. Request sent Stage . Usually this stage is very fast , Because all you need to do is send out the data in the browser buffer , There is no need to determine if the server has received , So this time is usually less than 1 millisecond .

The data is sent out , The next step is to wait for the first byte of data from the receiving server , This stage is called Waiting (TTFB), It's often called " First byte time ". TTFB It is an important indicator reflecting the response speed of the server , For servers ,TTFB The shorter the time , The faster the server responds .

After receiving the first byte , Enter the stage of receiving complete data one after another , That is to say Content Download Stage , This means the time from the first byte to receiving all the response data .

Optimize time-consuming items on the timeline

line up （Queuing） Too long

Too long in line , The approximate rate is maintained by the browser for each domain name at most 6 Connection . So for this reason , You can make 1 Resources under sites are placed under multiple domain names , For example, put it in 3 Under domain names , In this way, we can support 18 One is connected , This program is called Domain name fragmentation Technology . Apart from domain name segmentation technology , I also suggest you upgrade your site to HTTP2, because HTTP2 There is no maximum maintenance for each domain name 6 individual TCP The connection limits .

First byte time （TTFB） Too long

• The server has been generating page data for too long . For dynamic web pages , When the server receives a user's request to open a page , First, read the data required by the page from the database , Then pass this data into the template , After template rendering , And back to the user . The server is processing this data , Maybe something will go wrong .
• The reason for the Internet . For example, servers that use low bandwidth , Or the server originally used for Telecommunications , Unicom network users want to access your server , This will also slow down the network speed .
• Send request header with extra user information . For example, some unnecessary Cookie Information , The server received these messages Cookie Each item may need to be processed after the information , This increases the processing time of the server .

Facing the problem of the first server , You can find ways to improve the processing speed of the server , For example, by adding various cache technologies ; For the second network problem , You can use CDN To cache some static files ; As for the third kind , When you send a request, try to minimize unnecessary Cookie Data and information .

Content Download Too long

If a single request Content Download It took a lot of time , It may be caused by too many bytes . At this point you need to reduce the file size , Like compression 、 Remove unnecessary comments and other methods from the source code .