August 2021 before the end of the latest test (2) – HTTP protocol

Preface: this month the blogger went to the interview, will be classified to write the interview questions to share to everyone, front-end area, common progress!

The previous post was on TypeScript related issues, check out the hyperlink.

Q1: What happens when you enter a URL from a user in HTTP?

A1: The process from parsing the URL to rendering the page occurs.

1. First, the browser parses the URL, looks at the local cache (browser cache, system cache, route cache, etc.), and displays it directly if there is one.
2. If no, the DNS domain name is resolved to obtain the corresponding IP address.
3. The TCP connection between the browser and the server is successfully established after the three-way handshake.
4. The browser makes an HTTP request.
5. The server receives the request and returns the resource.
6. After the browser receives the data, it parses and renders it.
7. Finally, the page is displayed.

Because browser rendering is mentioned, some interviewers follow up.

Q1-1: How does the browser render? CSS/DOM these.

A1-1: The process is as follows.

1. Parse the HTML and generate a DOM tree.
2. Parse the CSS and generate the CSSOM tree.
3. DOM and CSSOM are merged to generate a Render-Tree.
4. Calculate the Layout of the render tree and render the Layout Paint to the screen.

As shown in the picture (do not steal the original) :May also involve backflow, redrawing problems.

This article is mainly about the HTTP protocol, but will not dwell on the rendering issues. After reading the article, click here again, there is a very detailed browser rendering materials recommended for you.

Q2: In THE HTTP protocol, what are the caching mechanisms and how to hit?

A2: strong cache, negotiated cache.

The match between the strong cache and the negotiated cache is determined by the Response Headers (returned by the server).

1. Strong cache: Status in the response header is 200 and the relevant fields areExpires (http1.0),cache-control (http1.1), cache-control has a higher priority when both are present. Mainly to usecache-control 的max-ageValue to determine.

   When the browser requests the server again, the browser determines the max-age first. If the max-age expires, the browser directly requests the server. Otherwise, the browser directly reads the max-age from the cache.

   The fields of the response header are shown in the figure below:

2. Negotiation cache: The status in the response header is 304, and the relevant fields areEtag / If-No-Match.Last-Modified / If-Modified-Since.

   (1) ETag and if-none-match:

   Etag (server) : the response header returned by the server last time it was loaded; If-no-match (browser) : the value of the Etag in the request header of the browser request.

   When the server receives the if-none-match value, it compares it to the Etag value of the resource file. If they are the same, the resource file is not changed and matches the negotiated cache.

   Etag is preferred for servers.

   (2) Last-modified and if-modified Since:

   Last-modified (server) : When the resource file was Last Modified, as returned in the server’s Response header; If-modified-since: In the request header of a browser request, taking the last-modify value.

**Etag and last-modifed are both returned by the server response header, as shown in the figure:! (https://img-blog.csdnimg.cn/04aa7c4b75fb45d1bf233bc8e4ca3969.png?x-oss-process=image/watermark, type_ZmFuZ3poZW5na [caching field] GVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhcWluZ3lpbmc=,size_16,color_FFFFFF,t_70)Copy the code

Q3: What are the common status codes in HTTP?

A3: the value starting with 2 indicates a successful return. The value starting with 3 indicates a redirection. The value starting with 4 indicates a client or user operation problem.

1. HTTP connections are simply stateless.
2. The data transmitted over HTTP is unencrypted and is transmitted in plain text.
3. The HTTPS protocol is created byHTTP and SSL protocolsA constructed network protocol for encrypted transmission and identity authentication that is more secure than HTTP. Prevents data from being stolen or changed during transmission and ensures data integrity.
4. HTTPS requires a CA certificate, which is costly. SSL certificates also cost money, and the more powerful certificates cost more.

Q5: Differences between TCP and UDP

A5: The differences are as follows.

1. TCP is connection-oriented, while UDP is connectionless, that is, you do not need to establish a link before sending data.
2. TCP provides reliable services. That is to say, the data transmitted through the TCP connection, no error, no loss, no repetition, and in order to arrive; UDP does its best to deliver, that is, it does not guarantee reliable delivery. And because TCP is reliable, connection-oriented, and does not lose data, it is suitable for large data volume exchanges.
3. TCP is byte stream oriented, while UDP is packet oriented, and network congestion does not slow down the transmission rate (thus causing packet loss for real-time applications such as IP telephony and video conferencing).
4. TCP supports only 1-to-1, while UDP supports 1-to-1 and 1-to-many.
5. TCP is a reliable connection-oriented transport, while UDP is unreliable.

In view of the above may also incidentally asked the website performance optimization and other issues, we will study, the topic of this article is not involved. (The article is under continuous maintenance. If there are any deficiencies, please correct me.) This article is an original article, pictures and content are my own CSDN blog, reprint needs my consent and indicate the source.