Hello, everyone. I am Zhang Xuefei, an honest, pure and kind-hearted Web programmer, a student of the 22nd session of Beijing General Institute of IT Xiuzhen
What is the meaning of each item of headers in —— ——network?
1. Background
As a Web developer, one of the things that is relevant to our daily development is Chrome’s developer tools.
Today is a brief look at the Chrome developer tools in the Network section.
The Network TAB is used to analyze the Network status of web site requests and view the headers and calls of a request
The response header and the response content are useful, especially when viewing Ajax class requests.
2. Knowledge analysis
Information in 1.Net Work
If you can learn more about chrome developer tools debugging techniques/features will be helpful for your daily development.
Use these functions in actual projects to improve your work efficiency. Let’s take a look at chrome developers
Network panel function
1. Controls The appearance and function of a Network.
Filters control what exactly the Requests Table displays.
3. Overview Displays the obtained resource timeline.
4. Requests Table Displays information about all obtained resources in the order in which they were obtained. Click the resource name to view detailed information about the resource.
5. Summary Displays the total number of requests, data transfer volume, and load time.
The Network panel records the details of network requests on the page and analyzes them after the page Request is initiated
Each requested resource information obtained after an HTTP Request (including status, resource type, size, elapsed time, Request and Response) can be used to optimize network performance.
We’ll focus on the Requests Table area, where the header information resides.
Noun explanation
Name: indicates the resource Name. Click the resource Name to view details about the resource, including Headers, Preview, Response, Cookies, and Timing
Status(&Text) : The Status code returned by the server for the request and a short description of the Status code
Type: indicates the Type of the resource
Size: indicates the Size of the resource
Time: Time is the Time elapsed from the beginning of the request to the receipt of the last byte. The Latency for please
Find the time elapsed from the beginning to the receipt of the first byte. The initiation of a request here refers to its initial state of care
Timeline (Waterfall) : This column shows the stage of each request from the blocking state to the completion of the request, and the entire page from loading to completion
Load stream of resources.
Inititator: Initializes the object or process for the request
Parser: Requests are initiated by Chrome’s HTML Parser.
Redirect: Requests are initiated by HTTP page redirects.
Script: The request is initiated by a Script Script.
Other: Requests are initiated by Other processes. For example, a user clicks a link to go to another page or enters a URL in the address bar.
Information in HEADERS
General: General information
1. Request URL: indicates the Request URL of the resource
2. Request Method:HTTP Method
3, Status Code: response Status Code
200 :(status code) OK
301: Resources (web pages, etc.) are permanently transferred to another URL
401: The permission to access the resource is insufficient.
403: No permission to access resources.
404: Resource to be accessed does not exist.
405: The resource to be accessed is prohibited.
500 – Internal server error
More information on this topic can be found in the related section
4. Remote Address: indicates the requested Remote Address
5. Referrer Policy:
Introducing images, JS, and other resources into a page, or jumping from one page to another, generates new HTTP requests, and browsers typically attach the Referrer field to these request headers to indicate the source.
The new Referrer Policy specifies five Referrer policies: No Referrer, No Referrer When downgraded, Origin Only, Origin When cross-origin, and Unsafe URL.
No Referrer: No Referrer information is sent under any circumstances
No Referrer When downgraded: Will not send the Referrer information only When a protocol Downgrade occurs (such as introducing HTTP resources into HTTPS pages, jumping from HTTPS pages to HTTP, etc.). This rule is the default for most browsers today
Origin Only: sends Referrer containing Only the host part. If this rule is enabled, the Referrer information will be sent regardless of protocol degradation, regardless of the site link or site link, but only contains the protocol + host part (does not contain specific path and parameters and other information).
Origin When cross-origin: Sends the Referrer containing only host When a cross-domain access occurs, which is complete under the same domain. The difference between Origin Only and Origin Only is that it determines whether it is cross-origin. Note that only when the protocol, domain name, and port are the same, the browser considers the domain to be the same
Unsafe URL: Referrer information is sent for all local and off-site links, regardless of protocol degrade. As the name suggests, this is the loosest and least secure strategy of all
Response Headers:
field
instructions
Cache-Control
Tell the browser or other client what environment can safely cache documents
Connection
How to deal with long links when client and server communicate
Content-Encoding
The compression encoding method used in data transmission
Content-Type
Type of data
Date
The time when data is sent from the server
Expires
At what point should a document be considered expired and no longer cached?
Server
Server name. Servlets typically do not set this value, but rather the Web server itself
Set-Cookie
Sets the cookie associated with the page
Transfer-Encoding
The way data is transmitted
Request Headers:
field
instructions
Accept
Represents the MIME type supported by the browser
Accept-Encoding
Type of compression supported by the browser
Accept-Language
The language type supported by the browser, with preference for the first language type
Cache-Control
Specify the caching mechanism that requests and responses follow
Connection
How to handle long connections when the browser communicates with the server: close/keep-alive
Cookie
Returns cookies to the server that the server previously sent to the browser
Host
The requested server URL
Referer
The source URL of this page
User-Agent
Some necessary information about the user client
HTTP header details
3. Frequently Asked Questions
How do I set the value of the Content-Type when SENDING a request using POST
4. Solutions
The protocol states that the data submitted by a POST must be placed in the entity-body of the message, but it does not specify how the data must be encoded. In fact, it is entirely up to the developer to format the body of the message, as long as the final HTTP request that is sent meets the above format.
However, when the data is sent, it does not make sense until the server has successfully parsed it. Common server-side languages such as PHP and Python, as well as their frameworks, have built-in capabilities to automatically parse common data formats. The server is usually based on the Content-type of the headers
Field to know how the body of the message in the request is encoded, and to parse the body. So when it comes to POST submission data scheme, there are two parts: Content-Type and message body encoding.
1. Application/X-www-form-urlencoded the most common POST submission format, with which the data posted will be submitted as key-value pairs.
2. Multipart /form-data files are usually submitted using this encoding format.
3. Application/JSON Submit data in JSON format.
4. Text /plain Form data is encoded in plain text without any control or format characters.
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
When action is GET, the browser uses x-www-form-urlencoded to convert form data to a string (name1=value1&name2=value2…). Append the string to the URL with? Split, load this new URL.
When the action is POST, the browser wraps the form data in the HTTP Body and sends it to the server. If you don’t have controls for type=file, use the default Application/X-www-form-urlencoded. But if type=file, use multipart/form-data. The browser splits the entire form by control and adds content-disposition (form-data or file),Content-Type(default text/plain),name(control name) to each part. And add the boundary.
5. Expand your thinking
In addition to the ones already mentioned, there are other types of content-type
HTTP Content-Type mapping table
6. References
Reference 1: Referrer Policy introduction
Reference 2: Network panel
Refer to three: HTTP header details
7. More discussion
Question 1: What do the different colored lines in the timeline mean?
Queueing: The order of requested files.
例 句 : The time that a browser waits between the instruction to issue a request and its ability to issue it, typically the time for proxy negotiations and for reusable TCP connections to be released but not DNS queries, establishing TCP connections, etc.
Proxy negotiation: the time when the browser uses a Proxy server to negotiate a request
DNS Lookup: Time to perform DNS Lookup. Each new domain pagerequires DNS looks up a complete round trip. DNS query time, when the local DNS cache is not available, this time can be a length, but for example once you set DNS to host, or second access, because the browser’s DNS cache is still available, this time is zero.
Initial Connection: indicates the time of establishing a TCP connection, which is the period from the client sending a request to the end of the TCP handshake, including DNS query time +Proxy time +TCP handshake time.
Request sent: The time before the first byte is sent to the time after the last byte is sent, i.e. the upload time.
Waiting(TTFB): Time To First Byte after a request has been sent, Waiting(TTFB): Time To First Byte after a response has been received, Waiting(TTFB): Time To First Byte after a request has been sent, Waiting(TTFB): Time To First Byte after a response has been received This time period represents the network delay time for the server to process and return data. The goal of server optimization is to make this time period as short as possible.
Content Download: The time between the first byte of the response received and the last byte of the response received is the Download time.
Problem two: Browser concurrent links are blocked, how to optimize?
A: There are two methods: 1. Allocating resources to multiple hosts can increase the number of concurrent downloads, but increasing the number of parallel downloads will also increase the overhead, which depends on bandwidth and CPU speed. Excessive parallel downloads will degrade performance;
2. The script is placed at the bottom of the page;
DNS Lookup
To request resources under a domain name, the browser obtains the IP address of the DNS server through the DNS parser. The browser cannot download anything from the host name until the DNS lookup is complete.
Question 3: What is the function of the Console TAB?
Answer: Used to display debugging information output in a script or run a test script. Console allows you to view messages, errors, warnings, and output after a web page runs. You can use console. debug(” Output content “) in the background of a web page. To the Console output display, you can do debugging function, but generally the real debugging is not to take the Console. Console. debug(” Introduction to console “); “Console” is in lower case. Otherwise, the message “No console” is displayed.
thanks
Thanks for watching
Thank qi-ming zhou | Zhu Fangshan This tutorial is in her share technology on the basis of perfecting.
PPT
Video: https://pan.baidu.com/s/1eSnKWoy
Password: tw8f
———————————————————————————————————————— ——————
Skill tree.IT Monastery
“We believe that everyone can become an engineer. From now on, find a senior to guide you to the entrance, control the pace of your own learning, and no longer feel confused on the way to learning.”
Here is the skill tree.IT Shuzhen Institute, where thousands of brothers find their own learning route, learning transparent, growth visible, brothers 1 to 1 free guidance. Come and study with me!
There’s a surprise here