The process of displaying completion from input URL to page load

"A page is completed from the input URL to the page load display, what happens in this process?" "This question I think most people will not be unfamiliar, as if the front-end questions often appear, in this I also combed a good comb, summed up into this article, hoping to and I like in front of the road ahead of the small white people have help, learning, Exchange.

I disassembled the problem into two processes:

1. User Input URL---> client (browser) to get data from the server

2. The browser gets the data---> renders the page (ie the browser working process)

After figuring out these two processes, we are also fully answering the questions raised in the preface.

I. The process of entering URLs to the browser for resources

As an example:

1. Enter the URL : http://www.cnblogs.com/dinghuihua/p/6674719.html

Divide the URL into three parts, the protocol, the network address and the resource path

• Protocol: The way to obtain resources from this computer, there are HTTP, HTTPS, FTP, etc., different protocols have different format of communication content
• Network address: Refers to which computer on the network, can be a domain name, IP address, can include the port number. such as: "Www.cnblogs.com", "192.168.0.91:8080"
• Resource path: Refers to which resource is fetched from the server. such as "/dinghuihua/p/6674719.html"

2. Obtain the corresponding IP address of the URL via DNS resolution

When sending a URL request, whether the URL is a Web page URL or a URL for each resource on a Web page, the browser will open a thread to process the request and start a DNS query on the remote DNS server, which will enable the browser to obtain the IP address that the request corresponds to

(Brain supplement Why have DNS this thing ... Because to human remember the spicy computer can remember the IP address how possible ... It is the role of the domain name analysis)

This step includes the specific lookup process for DNS

• Browser cache – The browser caches DNS records for a period of time. Interestingly, the operating system does not tell the browser when to store DNS records, so that different browsers store a self-fixed time (ranging from 2 minutes to 30 minutes).
• System cache – If the required records are not found in the browser cache, the browser makes a system call (gethostbyname in Windows). This will get the records in the system cache.
• Router caching – Next, the previous query request is sent to the router, which generally has its own DNS cache.
• ISP DNS Cache – The next check is the ISP cache DNS server. The corresponding cache record can be found in this general.
• Recursive search – Your ISP's DNS server starts with a recursive search with a domain name server, from a. com top-level domain name server to a Facebook domain name server. In the general DNS server cache there will be domain names in the. com domain name server, so the match process to the top level server is not so necessary.

3. The browser establishes a TCP/IP connection with the remote Web server through the TCP three handshake negotiation

The handshake consists of a "synchronous message", a "synchronous-response message" and a "response message", which is passed between the browser and the server in three messages. The handshake is first attempted by the client to establish communication, then the server answers and accepts the client's request, and finally the client sends a message that the request has been accepted.

4. The browser sends an HTTP request to the Web server over a TCP/IP connection

5. Permanent redirect response of the server (from http://example.com to http://www.example.com)

6. Browser Tracing REDIRECT Address

7. Server processing Requests

8. The server returns an HTTP response

The remote server locates the resource to be requested and returns the resource using an HTTP response, and the HTTP response status of 200 indicates a correct response.

9. Here is the working process of the browser ...

Browser Display HTML
The browser sends the request to get the resources embedded in the HTML (slices, audio, video, CSS, JS, etc.)
The browser sends an asynchronous request

Two. The process by which the browser obtains the resources to render the page

There are many commonly used browsers, ie, Firefox, Safari, Chrome and opera, there are many domestic browsers, such as browser Ah these, they have in common in order to let users see a variety of sites, they are different from the kernel, As a result, front-end engineers may be presented with some browser-related differences in compatibility issues.

* Browser main function: To get the network resource you want by requesting it from the server, and render it to the browser window. Resource types are usually HTML files, but they can also be PDFs, pictures, or other types of resources.

* The browser's kernel (rendering engine) is:

• Trident Kernel: IE series
• Gecko Kernel: Firefox
• WebKit kernel: Safari
• Blink Kernel: is a sub-project based on the WebKit kernel, using the browser has: Chrome/opera and other except IE, Firefox, Safari, almost all browsers (almost all domestic dual-core browser (Trident/blink) such as, Cheetah, QQ, Baidu, etc.)

In fact, after the browser gets the resource data, it starts the basic rendering process of the browser rendering engine.

The rendering engine begins parsing the HTML document and transforms the label into a DOM node in the content tree. It also begins to parse the style data, the outer-chain CSS files, and the styles within the style tag. All of these style data, as well as the visibility directives in HTML, are used to create another tree--render tree.

Now the page is now in front of us ...

Extension: Because of this process, we can do different things at different times. There are two kinds of events for page load completion:

Execution order

• Ready, which indicates that the document structure (DOM structure) has been loaded (not including non-text media files such as pictures),
• OnLoad, which indicates that all elements, including pictures and other files, are loaded and completed

$ (function() { // do something}); // In fact, this is the shorthand for jquery Ready (), which is equivalent to: $ (document). Ready (function() { //dosomething})  //  or as follows, because the default parameters of jquery are: "Document";$ (). Ready (function() {  //dosomething})

Problems with multi-function loading

Since JS is not overloaded, the following function overwrites the previous function with the same name

<onload= "A (); B ()"></body>

(1). The onload event declared in body (DOM0 level) is overwritten by the Window.onlad () (DOM0 level) at the back

<Bodyonload= "A (); B ()"></Body><Script>window.onload= function(){
Alert (' World');
}</Script>

Results only "world" pops up

(2). Multi-function execution can be implemented in the onload of body

<onload= "A (); B ()"></body>  <Srcipt> function A () {alert (' a ');}    Function B () {alert (' B ');} </ Script >

Results "A" and "B" are ejected respectively

(3). Multiple window.onload () will produce an overlay

function () {alert (' Hello 'function() {Alert (' World ');}

The results will only pop up "world"

(4). With jquery, multiple load functions can be implemented, and they will be executed sequentially

$ (window). Load (function() {    alert ("Hello");}); $ (window). Load (function() {    alert ("World");});

Related knowledge Supplement:

What are the HTTP status codes?

• 100-199 is used to specify certain actions that the client should be corresponding.
• 200-299 is used to indicate a successful request.
• 300-399 is used for files that have been moved and is often included in the locator header information to specify the new address information.
• 400-499 is used to indicate client-side errors.
• 400 incorrect semantics, the current request cannot be understood by the server.
• 401 The current request requires user authentication
• 403 The server has understood the request, but refuses to execute it.
• 500-599 is used to support server errors.
• 503– Service Not available

Common ones are:

• $ OK//client request succeeded
• Bad Request//client requests have syntax errors and cannot be understood by the server
• 403 Forbidden//server receives request, but refuses to provide service
• 404 Not Found//request resource not present, wrong URL entered
• Internal Server error//server unexpected errors
• 503 Server Unavailable//server is currently unable to process client requests and may return to normal after some time

TCP Three-time handshake:

The process of displaying completion from input URL to page load