When I communicated with many students recently, I found a problem: whether you are a front-end developer or a back-end developer, the probability of being asked is very high. Here, I want to record this question.
In general, after entering a URL in the browser's address bar, the following things happen:
DNS resolution
TCP connection
send HTTP request
The server processes the request and returns an HTTP message
The browser parses the rendered page
connection ended
The following is a detailed description of the general principle of each step.
1. DNS resolution
The process of DNS resolution is the process of finding which machine has the resources you need . When we enter an address in the browser, such as www.baidu.com, it is not the real address of Baidu website. The unique identification of each computer on the Internet is its IP address, but the IP address is not easy to remember. Users prefer to find other computers on the Internet with easy-to-remember URLs, that is, the Baidu URL mentioned above. Therefore, Internet designers need to make a trade-off between user convenience and usability. This trade-off is the conversion of a URL to an IP address, and this process is DNS resolution. It actually acts as a translator, converting URLs to IP addresses. How does the URL to IP address translation process work?parsing process
DNS resolution is a recursive query process.
The above picture is the process of finding the IP address of www.google.com. First, query the IP address in the local domain name server. If it is not found, the local domain name server will send a request to the root domain name server. If the root domain name server does not exist, the local domain name will send a request to the com top-level domain name server. request, and so on. Until finally the local domain name server gets Google's IP address and caches it locally for the next query. From the above process, it can be seen that the parsing of the URL is a process from right to left: com -> google.com -> www.google.com. But have you noticed that something is missing, the resolution process of the root name server? In fact, the real URL is www.google.com. It's not that I typed an extra ., this . corresponds to the root domain name server. By default, the last digit of all URLs is ., since it is the default For the convenience of users, it is usually omitted. The browser will automatically add it when requesting DNS. The real resolution process of all URLs is: . -> .com -> google.com. -> www.google.com.
2. Make a TCP connection
Establishing a TCP connection is commonly referred to as a three-way handshake. First, the client sends a request to the server whether the connection can be established. After the server returns the agreement, the client returns the response from the server, that is, three calls are completed. The three-way handshake and four-way wave in TCP, you can Baidu by yourself, so I won't talk about it here.
3. Send HTTP request
After completing the TCP connection, the next thing to do is to send an http request from the client to the server. The content of the http request includes:
- Request line: method + address + http version
- request header
- request body
request line
The format of the request line is:
Method Request-URL HTTP-Version CRLF
For example: GET www.baidu.com HTTP/1.1
Of course, the request methods are divided into GET POST PUT DELETE OPTION HEAD these types
request header
The request header refers to the additional information that the client transmits to the server and the client's own information.
PS: The client does not necessarily refer to the browser, and sometimes the CURL command under Linux and the HTTP client test tool can be used. For example, postman, Firefox's Restclient
Common request headers are: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent, etc.
常见有Accept Accept-Charset Conent-Type Authorization
request body
When using POST, PUT and other methods, the client usually needs to pass some parameter data to the server. This data is stored in the request body. There is some information related to the request body in the request header. For example, the current Web application usually adopts the Rest architecture, and the data format of the request is generally json. At this time, you need to set Content-Type: application/json.
Give an example of an HTTP request:
GET request
POST request
4. The server processes the request and returns an HTTP message
After the server receives the http request, it will respond, and the response content includes:
- Response line: http version + status code + status description
- response header
- response body
status code
The status code consists of 3 digits, the first digit defines the category of the response, and there are five possible values:
1xx: Indication Information – Indicates that the request has been received and processing continues.
2xx: Success – Indicates that the request was successfully received, understood, accepted.
3xx: Redirect – A further action must be taken to complete the request.
4xx: Client Error – The request has a syntax error or the request could not be fulfilled.
5xx: Server Side Error – The server failed to fulfill a legitimate request.
Commonly encountered status codes are: 200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500
response header
Similar to the request header, some additional information is added to the response message. Common response headers include Server Content-Type Content-Length Content-Charset, etc.
response body
服务器返回给浏览器的文本信息，通常后端返回的数据以及HTML, CSS, JS, 图片等文件就放在这一部分。
给一个HTTP响应报文的例子
5.浏览器解析渲染页面
浏览器在收到HTML,CSS,JS文件后，它将这些信息渲染到客户端页面上。下图对应的就是渲染的基本过程
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。