Network infrastructure browser to process input from the url of the page display

Foreword

Analysis of the browser Enter the url to a final input from the browser to display the page , we can be divided into the following four aspects to be analyzed (in my opinion, this is actually an extended version of the HTTP traffic, it increased the number of mechanisms to enable the client and the server can quickly and easily secure data transmission)

1. How browser sends a request
2. How to request packet to the server
3. How browser receives the content returned from the server
4. How browser parses the content returned by the server

I think, as long as find out these four aspects, then we can figure out the browser Enter url to the final input from the browser page display in the end with what technology

How browser sends a request

Url input from the browser to press ENTER, it will send a request packet. Here we have to enter www.baidu.com

Before the browser sends a request message, it will be determined using the http protocol or the use of https. If no agreement directly enter a domain name or an IP address, the default http protocol (Of course, some server when receiving the request packet will force the browser to use the https protocol)

https = http + ssl
为什么会提出http协议：主要是因为http本身不安全，因此需要添加一些机制来保证http传输的安全
ssl的全称是Secure Sockets Layer(安全套接层) 是为网络通信提供安全及数据完整性的一种安全协议
在http中添加ssl机制一般就能保证数据传输的安全

This is the input www.baidu.com request packet header

Here, we can know that the request method request message is get method (generally we request packet input via the browser url to send the request method is get), http version 1.1 version, host name www.baidu.com .

However, we need to know that HTTP communication is transmitted through the IP protocol, and can not be transmitted through the domain name, so there needs to talk about the domain name into the corresponding IP.

With this step we need DNS domain name resolution service, to convert our domain name into the corresponding IP.

The browser then re-transmitted to the IP server requests

Here, make a few concluding the first step

1. 输入url后，判断是域名还是ip，如果是域名则请求DNS服务器获取域名对应的IP地址
2. 得到服务端的ip地址后，向服务端发送请求报文

How to request packet to the server

ok, just the first step in the browser has sent a request message to the server, the next step is to talk about how the service request message is to reach the end

Here, it is necessary to enable the IP protocol request packet can be transmitted to a corresponding server

IP protocol routers and gateways through a variety of constantly jump upon request message of HTTP header fields, and finally to the server where the network segment, and finally to the server

The service receives the request message sent by the browser, you can know the location of the browser, then it can be a TCP connection and browser

TCP transport layer protocol is located, and its main function is to provide reliable byte stream service (say plainly, it is the browser and server to establish a TCP connection, for transmission of data via tcp protocol, as if the data transmission, we can not control)

Here tcp connection will be three-way handshake , the purpose is to determine the ability of the browser and the server to send and receive data.

Tcp on establishing connections and disconnections can read this article: network infrastructure tcp four times and waved the three-way handshake

The second step in here to do some summary

1. 请求报文根据IP协议会被传输到服务端
2. 服务端接收到了请求报文后就知道浏览器的网络地址
3. 浏览器与服务端通过TCP三次握手建立连接

How browser receives the content returned from the server

Next, the browser and the server successfully established tcp connection, it is possible to obtain the server based on the content request packet is returned (a response that is browser can get the server to send packets from)

How browser parses the content returned by the server

The browser parses the response message, get their desired data

Here, the browser by entering the url html content are generally acquired (will get a download link to the url after some input, and start local download)

The next task is to resolve this html content

Parse html content, we can be understood from the following aspects

1. html code itself
2. Resources (css, js, img, ...) html will be introduced in the

Moreover, we need to know the general browser is responsible for parsing html content browser rendering engine (also called UI engine)

Next, we began to analyze the content of parsing html

1. In the process starts parsing html content, the browser rendering engine will parse html content from top down

2. If you find that those resources are need to be introduced, then immediately notify the web browser engine immediately request resources from the network

3. The HTML code is parsed into a DOM tree and the parsed into CSS CSS rule, and then combined to form both the render tree

4. + Render tree to start drawing the layout of the page, and finally displayed on the page

5. Just above steps were not linear, that is the first step to do than wait before making a second step, when generating the render tree is likely to have been drawn page

6. However, sometimes some of the rules of CSS and JavaScript Some syntax modify the DOM tree and CSS rules, then the corresponding render tree will change, this time the page will be redrawn and reflux

7. In the end, all the work to be completed, the page displayed on the browser

Deeper browser page rendering principles refer to the following article

1. Works browser: Behind the scenes of modern web browsers
2. Browser page rendering principle (redrawn on the page and return relevant content)

to sum up

Finally, FIG borrow one (from "illustrates the HTTP" book) to conclude the input url from the browser to the flowchart displayed page

In the transmission process, the network protocol involved the following

1. Responsible for the transmission of IP protocol (network layer)
2. To ensure the reliability of the TCP protocol (transport layer)
3. Provide domain name resolution DNS service (application layer)