What exactly does the browser do when the user enters the url, first resolving the domain name, of course, and then establishing the link to…… The network level is not what I want to talk about, a lot of predecessors have talked about, just briefly, focusing on the browser after getting HTML, CSS, JS and image and other materials how to render the page we want to see (Google, Baidu a lot of keywords, many of the details are explained, I’m going into too much detail and it’s not easy to understand without a whole concept in my head, so I’m just writing.
1.DNS domain name resolution
When we enter the url in the browser, we actually want to ask the server for the page content we want. The first thing all browsers need to confirm is where the server corresponding to the domain name is located. The DNS server resolves the domain name to the corresponding server IP address.
Make an inappropriate example, now register account to bind the mobile phone number, the website does not need to enter a user name, as long as there is a mobile phone number can register and log in. Some people say my new mobile phone number can not remember, you can make a nickname to remember yourself can also log in. The domain name is your nickname, the IP address is your mobile phone number, the website must have an IP address to access, DNS resolution is to use the nickname to find the IP address and then visit the website.
After receiving the domain name you entered, the client first checks the local hosts file to see whether there is a mapping between the domain name and IP address. If there is a mapping between the domain name and IP address, the client sends a request to the IP address. If not, the client searches for the DNS server. Most users rarely edit or modify the hosts file.
Before the popularity of a scientific Internet access way, is to modify the IP correspondence of the file to achieve, but now the GFW again reinforced, can use less and less IP, this kind of martial arts secret book has become extinct.
2. Establish the TCP connection
It took a lot of trouble to finally get the server IP, and establish TCP connection with the server
3. Send an HTTP request
After establishing a TCP connection with the server, you can send requests to the server.
4. The server processes the request
After the server receives the request, the Web server processes the request, such as Apache, Ngnix, and IIS. The Web server parses the user request, knows which resource files need to be scheduled, processes the user request and parameters through these resource files, and calls the database information, and finally returns the results to the browser client through the Web server.
5. Return the response result
6. Close the TCP connection
To avoid resource consumption and wastage on both the server and client, either party can initiate a shutdown request when no request or response is delivered. Similar to the three-way handshake used to create a TCP connection, four handshakes are required to close a TCP connection.
Network phase, end
7. Browsers parse HTML
1. Build a DOM Tree
When the browser receives the HTML document from the server, it traverses the document nodes to generate a DOM Tree.
When the
2. Build CSSOM
The CSS Parser of the browser parses CSS into Style Rules, also known as CSSOM (CSS Object Model). StyleRules are also Tree structures, similar to DOM trees, arranged from CSS files. CSS rendering is done synchronously with HTML rendering, so the faster it loads the better. The second half of the golden rule above is CSS at the top of the page.
3. Build Render Tree
DOM Tree and CSSOM we can build Render Tree. The browser iterates through each visible node, starting at the root of the DOM Tree. For each visible node, find the appropriate CSS style rule and apply it. This involves two steps, style calculation and style overlay
Style calculation
Each node on the Render Tree is bound, including the browser default style sheet, custom style sheet, inline style elements, and HTML visual attributes such as width=100. The latter will be converted to match CSS styles and will need to be computed.
Style overwriting The same tag may be defined repeatedly, may be affected by generic definitions, or may not be defined at all. The high-weight definition overrides the low-weight definition to get the final rendered style, which can be seen in some detail from the console.
4. The Layout of the building
After creating the render tree, the next step is a Layout, or reflow (relayout). This process takes information from the render objects in the tree, calculates the position and size of each render object, and places it in the correct position in the browser window. Sometimes we modify the DOM after the layout of the document is complete. In this case, we may need to rearrange, also called backflow, which is essentially a layout process. Each rendered object has a layout or backflow method that implements its layout or backflow.
Colloquically speaking, it is to arrange seats for a meeting, to know which leaders are coming, and to line up the positions of these leaders.
5. [k? : n]
In the paint phase, the rendering tree is traversed and the renderer’s “paint” method is called to display the renderer’s contents on the screen. Drawing is done using user interface infrastructure components.
The top step is to set the leadership position, this step is the leadership seat (if the director of the row in the director of the back, you this browser can not dry).
8. JS loading
To be precise, JS loading is a part of HTML loading. In the beginning, webpage loading is only HTML, and later developed JS. But now the development of JS obviously makes its flexibility, plasticity is higher than HTML (personal idea), so I want to take it out separately.
JS is actually divided into three parts: ECMAScript, DOM and BOM.
ECMAScript and JS are commonly referred to together, but in fact it is the most core part of JS. The browser is one of ECMAScript’s host environments (as is nodeJS).
The DOM is an extension of the browser host environment for application development. There are other languages that can manipulate the DOM, but JS is the most developed, and the other methods have fallen by the wayside.
BOM, for those of you who don’t know, DOM is the article object model, which is the HTML part of the browser. But a browser is a container that holds HTML, and the operation on the container itself is the BOM browser object model, which includes information tips (i.e. operating system tips that go beyond the sandbox), getting display resolution, and so on. Of course, the BOM concept was not clear until the RELEASE of H5, and these standards themselves are subject to the implementation of browser manufacturers, so there is no BOM format.
Talk so much foreshadowing, start talking about JS loading.
1. Create the window object
The Window object is also called the global execution environment, which is created when the page is generated. All global variables and functions belong to the properties and methods of the window, and the DOM Tree is mapped to the Doucment object of the window. We use this document object to manipulate the DOM in JS. (This object is inefficient, which is why React and Vue were born.) When a web page or browser is closed, the global execution environment is destroyed, including all of its internal members.
2. Load the file
Nothing good to say, load the file, finished js engine analysis of its syntax and morphology is legal, if legal into the pre-compilation
3. The precompiled
Explain nouns, precompiled.
There is no standard for the distinction between interpreted and compiled languages.
Compiled languages are those in which the compiler translates a language (programming language) that humans can understand into a language that machines can understand before the code is run. Programs written in compiled languages generally run faster at runtime than programs written in interpreted languages. Because at compile time, the program has been pre-compiled into machine code, can run directly, as interpreted language, like another translation program.
Interpreted languages run code directly, sentence by sentence, without the need for a compiler to compile it into machine code and run it later, as compiled languages do. Such programming languages require the use of an interpreter to dynamically interpret code, sentence by sentence, at run time into machine code, or subroutines that have been precompiled into machine code and run later.
Many people think interpreted languages mean that when you encounter a program with line number XYZ, you just pass it to the CPU and it runs. But that’s not the case. All programming languages were created for humans. They are something that humans can understand. You have to convert programming language into machine language. The difference is when and how to switch.
As a typical example, consider the following code.
for(i=0; i>1000; i++){
sum += i;
}
Copy the codeIn compiled languages, the sum += I part is compiled into machine code when the loop is run, and machine code is run a thousand times directly.
But in an interpreted language, he would interpret sum += I a thousand times as he executed it. So because converting the same code a thousand times can cause a very high performance penalty.
So the difference is pretty clear. Compiled languages take a long time to compile, but they run fast, and they don’t need a container like a browser to run. Interpreted languages do not compile directly run, but can not optimize, run slowly, and need a carrier. Because there are so many different types of devices today, the container is an advantage because the browser solves the problem of application compatibility and reduces development time.
(I think this is how it works locally on the back end. I don’t understand it. It’s pure yy.)
The browser is not stupid, you do quick compilation so I also do a pre-compilation, if really like the example above 1000 times loop conversion 1000 times is not slower than IE.
During precompilation, the browser looks for the global variable declaration, adds it to the window object as a property of the window, and assigns the variable ‘undefined’; Look for the global function declaration, add it to the window object as a method of window, and assign the function body to it (anonymous functions are not precompiled because they are variables).
This process involves a lot of optimization, both of which are obvious to us. My understanding is that in this process, the browser sets up memory for variables and functions, waiting for subsequent operations. While variable promotion as an unreasonable area has been resolved in ES6, function promotion still exists.
4. Explain execution
If the variable is not defined, it is not precompiled. In ES5 non-strict mode, the variable becomes an attribute of the window, i.e. a global variable. Values such as string and int are put directly into the storage space of variables, and objects are Pointers to the storage space of variables. When the function is executed, it pushes the function’s environment onto the stack of an environment, and pops up again after execution, handing control back to the previous environment. If you think about this process carefully, the JS scope is actually implemented by such an execution flow mechanism.
After that, there may be some loose talk, but I’m just throwing out a brick to give you a general understanding of this question when you brag about it in an interview. Don’t laugh when you see the mistake, please point it out. Thank you.
reference
JavaScript advanced programming
Browser rendering process and page optimization
wiki
MDN