Browser input URL to the entire page show out the process of experience

In fact, the common Web application, is actually the application of HTTP, HTTP is a TCP protocol-based network transport protocol, working in the application layer, as a web developer, I mainly from the point of view of HTTP to see this problem:

First of all, for HTTP must have a client and server, in this context, the client and the server is essentially a software, the implementation of the HTTP protocol-related standards of software. The client is generally used by the browser, that is, in the browser to implement the relevant functions of the HTTP client. And the implementation of the server is a variety of, we can write servlet,c# in Java to write ASP, and Php,ruby,python,nodejs and so on. In fact, I think the HTTP service should be implemented at the bottom of the operating system, and these languages are simply encapsulating their interfaces with the operating system's HTTP service for developers to write Web server programs. Iis,tomcat,apache,web logic, which we are familiar with, is a large server platform that can be used as a container for some WEB servers, and they all include many more powerful features. Generally speaking, the server we refer to is the Web application server program that we write in a specific language. Nodejs does not need a Web container, it has a direct application module for HTTP, so it is convenient to create a Web server with Nodejs.

Overall communication

With the client and server, you can start communication, which is divided into 3 steps as a whole:

1. Because HTTP is built on top of TCP, it is natural to create a connection after 3 handshakes.
2. After the connection is created, the server responds by processing the information in the URL request, typically finding an HTML file to return to the client.
3. The client is the browser that gets the HTML to render.

These 3 steps are detailed below

Create a connection

This with the network more than some, I network study of the so-so, can only roughly say a bit. For the HTTP client, its input is a URL, and for the creation of the connection, it needs only the URL of the host (host) part, and the host address is generally the domain name of the site, so the first step is definitely the domain name resolution, that is, the DNS server for domain name resolution to get the IP address of the website, Then send a connection to this IP address to establish a request, if the server receives a request will return a confirmation, the client is confirmed to send confirmation again, the connection was established successfully. Of course, in this process will also involve a lot of details, this is the knowledge of the network, not much to say here.

Server processing

Once the connection is established, the client sends an HTTP request that contains a header and a request body.

The generic web technology encapsulates the request and then gives it to our server for processing, such as a servlet encapsulating the request as a HttpServletRequest object and encapsulating the response as a Httpsevletresponse object. Nodejs HTTP module, when you create the server will write a callback function, callback parameters to accept the HTTP request object and Response object, and then in the callback function to process the request.

In the request object we can get path (path), queryString (query string), body (data submitted in the POST request), etc. The processing of requests can be complex or simple. We can find the client's desired file according to path, read the file, and then return the content to the client through the response object, this process, the different technology provides the API may be different, especially those who are accustomed to the MVC framework, may just specify a file, or set it in the configuration file. But the final implementation must be in line with the HTTP response standard, which is to have a response header and a response body. The settings response header I generally touch is set Content-type to determine the MIME type, set the cache content such as cache-control,last-modify. Generally, the content returned to the client is an HTML string, and then Content-type is set to text/html. Of course, it is possible that the client is requesting an image file, that is, after reading the image file, Content-type may be set to image/png,image/jpg, etc., and then return the content to the client. This time the processing of the request is over.

Of course, this process is too simple, and the processing process may be very complex, but also the operation of the data, and the construction of the page, and the path to find matching, as well as the file read and so on, so there is the MVC framework and the subsequent evolution of the various mv* framework. The content of MVC is not detailed here, because it takes a long time. Just an overview of what MVC basically does, and in my opinion the most important is decoupling and modularity. I think the most important thing about MVC implementation is two points:

1. Route matching, the path of the HTTP request does not need to be specified to the specific view location, but according to the rules we make to match, so there is a lot of flexibility, programmability.
2. Template technology, in general we finally return to the client is an HTML string, and sometimes the string is often not static single, sometimes need to combine with the data, need to splice. This brings a lot of trouble, template technology to solve this problem brings great convenience, but also can decouple the view and data.

Client rendering

The client receives the response from the server, obtains the HTML string and mime, and according to MIME know to use the page rendering engine to process the content is the HTML string, so into the page rendering phase, this is a very complex system. I can only say in general:

From the browser's point of view, it contains a few large components, network functions (such as the implementation of HTTP) is one of them, the rendering engine is one of them, there are some other such as their own UI interface, JavaScript interpreter, client data storage and so on. Here we focus primarily on the rendering engine and the JavaScript interpreter, which is the core of the browser for Web developers.

We can see a page in the browser, so how does this page appear? is actually called the underlying drawing API to draw out. Different rendering engine, its implementation is also different, mainstream engine including IE Trident,chrome and safary webkit,firefox gecko,chrome another blink, give up WebKit. Then there are the various compatibility issues that make people headache.

The overall page rendering process is roughly the same:

The rendering engine takes the HTML string as input, then transforms the HTML into a form that can be processed by the DOM, and then transforms it into a DOM tree, parsing the HTML process to parse the <link>,<script>, When some request tag is sent, a request is made to get the corresponding content. At this time, the CSS will be parsed synchronously, the CSS style rules are applied to the DOM tree, and then a certain layout processing, such as the tag node block in the browser coordinates such as the formation of the final rendering tree, and finally based on the tree in the browser window to draw.

In the end, we see what the page looks like.

Of course, in the page rendering process will also be synchronous JavaScript parsing, and the two are in the same thread, so once the JavaScript cycle, the page rendering will not go on.

This is the whole process of thinking from the perspective of a web developer. If you think more about it from another angle, it includes many things:

For example, the package of protocols in the entire network communication:

In this machine, the content to be transferred is the request object on the application layer with the app header, passed to the transport layer plus the TCP header, to the network layer plus the IP header, the data Link Layer plus Ethernet header and tail, and then converted into a bit stream into the network environment. After the arrival of the host in a layer of solution encapsulation, the final content to the server program.

Another example of this process of authentication, encryption, security, coding and other issues will have certain processing, but these things I do not know very well.

Browser input URL to the entire page show out the process of experience