current position：Home>Chrome developer tool: performance analysis using web panel
Chrome developer tool: performance analysis using web panel
2022-04-29 18:54:46【No hurry, no fear, no shame】
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 ：
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 .
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 .
- Load, The browser has loaded all the resources （ Images 、 Style sheets, etc ）.
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 .
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 .
author[No hurry, no fear, no shame],Please bring the original link to reprint, thank you.
The sidebar is recommended
- Java project: nursing home management system (java + springboot + thymeleaf + HTML + JS + MySQL)
- Java project: drug management system (java + springboot + HTML + layui + bootstrap + seals + MySQL)
- Java project: agricultural material management system (java + springboot + easyUI + HTML + Maven + MySQL)
- How do Vue, native JS and jQuery feel about development
- The Ajax backend accepts post data and writes it directly to the database
- Java project: agricultural material management system (java + springboot + easyUI + HTML + Maven + MySQL)
- Brother Lao Yu takes you to play with esp32:14 and personally make a two-way wireless remote control (I)
- A king's time, I learned nginx
- Vue quick start (with actual small items: Notepad, weather forecast, music player)
guess what you like
Vue: convert user input to numeric type
- Status code: 404 for http://mirrors.cloud.aliyuncs.com/centos/8/AppStream/x86_64/os/repodata/repom
vue. config. Understanding of agent in JS
After the node is successfully installed, CMD can be executed, but the compiler webstorm runs NPM install and prompts that there is no solution to this command
How to develop and deploy front-end code in large companies
Vue assigns permissions to buttons through instructions
[development diary from 22 years to April] Vue problems encountered in actual projects and their solutions
[methodology 1] CSS development skills - global style setting and local style
vue3. 0 dynamically bind and obtain DOM through ref;
How to use HTML to display segmentation
- How to use HTML for touch event in mobile terminal
- How to define and use HTML box model
- How to use the box pack attribute and box align attribute inside the box in HTML
- What are the differences and relationships among HTML, CSS and JS
- How to save home page as HTML
- How to solve the post request return 405 of nginx reverse proxy to HTML page
- How to upload pictures without refresh with HTML5 + PHP
- How to define HTML text tags, pictures, paths, hyperlinks and anchors
- How to upload static HTML files to the host or server
- How to use calculated and watch in Vue
- How does Vue Preview PDF, word, xls, PPT and txt files
- Can jQuery listen for events
- Luxury cars "senseless price increase", the configuration of the new Porsche Macan remains unchanged, with a maximum increase of 19000 yuan
- 1-ch579m program upgrade OTA (self built Internet of things platform) - ch579m uses its own Ethernet to remotely download and upgrade MCU program through HTTP (MCU program rotation check and update)
- The front-end downloads files, and the back-end sends gzip files. Is there a way to get the file size?
- Why does Vue route jump refresh the page?
- The conversion code of Babel in the project needs to include node_ Modules
- [nginx] prefix removal in nginx proxy pass configuration
- Vue packaging error module build failed: typeerror: this getOptions is not a function
- Use of I18N in Vue
- Who is bunk, the new hero of endless dungeon? Introduction to new hero bunk skills
- Front end entry first bullet | development tools and configuration
- Nice HTML login page
- Vue error prone summary
- Summary of material resources website (icon | wallpaper | Adobe plug-in | jQuery plug-in | badge | online conversion | color splicing | continuous update)
- Step by step, configure nodesjs environment with hbuilder for Vue JS development
- Vue sets the global websocket and accepts message notification processing on the corresponding page
- Solve the problem that vuex data is reset during page refresh
- Java data structures and algorithms lesson 2 - generics
- Leetcode-82 - delete duplicate Element II in the sorting linked list
- [front end] quickly create HTML
- Vue router routing navigation
- Vue router redirection and alias
- Vue router named routes, (nested) named views
- Dynamic components & slots & custom instructions for getting started with Vue Foundation
- K8s deployment-43-take you to learn ingress nginx (Part 2)
- Detailed breakdown of actual combat of CMS background system project (VII)
- Explore the store | new architecture blessing, performance and safety. This style is super personality_ Integra_ Honda_ platform
- Sports kit blessing / replacement of four cylinder engine Chevrolet chuangku RS live shooting analysis_ Aspect_ Display screen_ Complete vehicle