您好，我是路人，更多优质文章见个人博客：http://itsoku.comThis question is already a cliché, and it is often used as the final question of the interview. There are also many articles on the Internet, but recently I was bored, and then I made a note by myself, and I feel that I understand it more thoroughly than before.
Note: The steps in this article are based on the fact that the request is a simple HTTP request, no HTTPS, HTTP2, the simplest DNS, no proxy, and the server has no problems, although this is impractical.
general flow
URL parsing
DNS query
TCP connection
process request
accept response
render page
1. URL Analysis
Address resolution:
First of all, it judges whether what you input is a legal URL or a keyword to be searched, and performs operations such as auto-completion and character encoding according to the content you input.
HSTS
Due to security implications, HSTS is used to force clients to use HTTPS to access pages
other operations
The browser will also perform some additional operations, such as security checks and access restrictions (previously domestic browsers restricted 996.icu).
check cache
2. DNS query
The basic steps
1. Browser cache
The browser will first check whether it is in the cache, and if not, call the system library function to query.
2. Operating system cache
The operating system also has its own DNS cache, but before that, it will check whether the domain name exists in the local Hosts file, and if not, send a query request to the DNS server.
3. Router Cache
Routers also have their own caches.
4. ISP DNS caching
The ISP DNS is the preferred DNS server set on the client computer, which in most cases will have a cache.
Root Name Server Lookup
In the case that all the previous steps are not cached, the local DNS server will forward the request to the root domain on the Internet. The following figure illustrates the whole process well:
Root Name Servers (Wikipedia)
Points to note
Recursive method: check all the way down without returning in the middle, and only return information when the final result is obtained (the process from the browser to the local DNS server)
The iterative method is the method of querying from the local DNS server to the root domain name server.
What is DNS hijacking
Front-end dns-prefetch optimization
3. TCP connection
TCP/IP is divided into four layers. When sending data, each layer must encapsulate the data:
1. Application layer: send HTTP request
We have obtained the IP address of the server in the previous steps, and the browser will start to construct an HTTP message, including:
Request Header (Request Header): request method, target address, protocol followed, etc.
Request body (other parameters)
Points to note: browsers can only send GET and POST methods, and the GET method is used to open web pages
2. Transport layer: TCP transmits packets
The transport layer will initiate a TCP connection to the server. In order to facilitate transmission, the data will be divided (in the unit of message segment) and numbered, so that the server can accurately restore the message information when receiving it.
Before establishing a connection, a TCP three-way handshake will be performed first.
Regarding the TCP/IP three-way handshake, there are already many paragraphs and pictures on the Internet that describe it vividly, and you can take a look at it.
3. Network layer: IP protocol query Mac address
Pack the data segments, add the source and destination IP addresses, and be responsible for finding the transmission route.
Determine whether the target address is in the same network as the current address, if yes, send it directly according to the Mac address, otherwise use the routing table to find the next hop address, and use the ARP protocol to query its Mac address.
Note: In the OSI reference model the ARP protocol is at the link layer, but in TCP/IP it is at the network layer.
4. Link layer: Ethernet protocol
ethernet protocol
According to the Ethernet protocol, the data is divided into data packets in units of "frames", and each frame is divided into two parts:
Header: sender, receiver, data type of the packet
Data: the specific content of the data packet
Mac address
Ethernet stipulates that all devices connected to the network must have a "network card" interface, and data packets are passed from one network card to another. The address of the network card is the Mac address. Each Mac address is unique and has one-to-one capability.
broadcast
The method of sending data is very primitive. The data is directly sent to all machines in the network through the ARP protocol. The receiver compares the header information with its own Mac address and accepts it if they agree, otherwise discards it.
Note: Receiver responses are unicast.
The server accepts the request
The acceptance process is to reverse the above steps, see the picture above.
Fourth, the server processes the request
general flow
HTTPD
The most common HTTPDs are Apache and Nginx commonly used on Linux, and IIS on Windows.
It will listen to the request and then start a child process to handle the request.
deal with
After receiving the TCP message, it will process the connection, analyze the HTTP protocol (request method, domain name, path, etc.), and perform some verifications:
Verify that virtual hosts are configured
Verify that the virtual host accepts this method
Verify that the user can use the method (based on IP address, identity information, etc.)
redirect
If the server is configured with HTTP redirection, it will return a 301permanent redirection response, and the browser will resend the HTTP request (re-execute the above process) according to the response.
URL rewriting
Then it will check the URL rewriting rules. If the requested file is real, such as pictures, html, css, js files, etc., it will directly return the file. Otherwise, the server will rewrite the request to a RESTful URL according to the rules. Then, according to the script of the dynamic language, it is determined what type of dynamic file interpreter to call to process the request.
Taking the MVC framework of the PHP language as an example, it first initializes some environment parameters, matches the route from top to bottom according to the URL, and then lets the method defined by the route process the request.
5. The browser accepts the response
After the browser receives the response resource from the server, it analyzes the resource.
First check the Response header, and do different things according to different status codes (such as the redirection mentioned above).
If the response resource is compressed (such as gzip), it also needs to be decompressed.
Then, cache the response resource.
Next, parse the response content according to the MIME[3] type in the response resource (for example, HTML and Image have different parsing methods).
6. Render the page
browser kernel
Different browser kernels have different rendering processes, but the general process is similar.
basic process
6.1. HTML parsing
First of all, you must know that browser parsing is parsed line by line from top to bottom.
The parsing process can be divided into four steps:
① decoding (encoding)
What is transmitted back is actually some binary byte data, and the browser needs to convert it into a string according to the specified encoding of the file (such as UTF-8), that is, HTML code.
② Pre-parsing (pre-parsing)
What pre-parsing does is to load resources in advance to reduce processing time. It will identify some attributes that will request resources, such as imglabel srcattributes, and add this request to the request queue.
③ Tokenization
Tokenization is the process of lexical analysis, which parses the input into symbols. HTML symbols include start tags, end tags, attribute names, and attribute values.
It uses a state machine to identify the state of the symbol, such as encountering <, >the state will change.
④ tree construction
Note: symbolizing and building the tree operate in parallel, which means that as soon as a start tag is parsed, a DOM node will be created.
In the previous step of tokenization, the parser gets these tokens, then creates the object in an appropriate way DOMand inserts these tokens into DOMthe object.
<html><head><title>Web page parsing</title></head><body><div><h1>Web page parsing</h1><p>This is an example Web page.</p></div></body></html>
browser error tolerance
You've never seen an "invalid syntax" error in a browser, it's because the browser corrects the bad syntax and keeps working.
event
When the entire parsing process is completed, the browser will DOMContentLoadednotify DOMthe parsing completion through an event.
6.2. CSS parsing
Once the browser has downloaded the CSS, the CSS parser processes any CSS it encounters, parses out all the CSS according to the grammar specification [4] and tokenizes it, then we get a rule table.
CSS matching rules
When matching the CSS rules corresponding to a node, it is in the order from right to left, for example: div p { font-size :14px }it will first find all pthe tags and then judge whether its parent element is div.
So when we write CSS, try to use id and class, and don't over-cascade.
6.3. Rendering tree
In fact, this is a process of merging DOM tree and CSS rule tree.
Note: The rendering tree will ignore those nodes that do not need to be rendered, such as display:nonenodes that are set.
calculate
Any size value is reduced to one of three possibilities by calculation: auto, percentage, px, such as converting remto px.
cascade
The browser needs a way to determine which styles actually need to be applied to the corresponding element, so it uses a specificityformula called , which goes through:
tag name, class, id
Whether to inline styles
!important
Then get a weight value, take the highest one.
render blocking
When a scripttag is encountered, DOM construction is paused until the script finishes executing, and then continues building the DOM tree.
But if JS relies on CSS styles, and it has not been downloaded and built, the browser will delay script execution until CSS Rules are built.
All we know:
CSS blocks JS execution
JS will block the subsequent DOM parsing
In order to avoid this situation, the following principles should be followed:
CSS resources are sorted before JavaScript resources
JS is placed at the bottom of the HTML, that is,
</body>before
In addition, if you want to change the blocking mode, you can use defer and async.
6.4. Layout and drawing
Determine the geometric properties of all nodes in the rendering tree, such as position, size, etc., and finally input a box model, which can accurately capture the exact position and size of each element on the screen.
The render tree is then traversed, calling the renderer's paint() method to display its contents on the screen.
6.5. Merging render layers
Merge all the pictures drawn above, and finally output a picture.
6.6. Reflow and Redraw
reflow
When the browser finds that a certain part finds that the change has affected the layout, it needs to go back and re-render. It will recurse from the htmllabel and recalculate the position and size.
Reflow is basically unavoidable, because when you slide the mouse and resize the window, the page will change.
repaint
Redrawing occurs when changing the background color, text color, etc. of an element does not affect the position changes of surrounding elements.
After each redraw, the browser also needs to merge the rendering layers and output them to the screen.
The cost of reflow is much higher than redrawing, so we should try to avoid reflow.
For example: display:none reflow will be triggered, but visibility:hidden only redrawing will be triggered.
6.7. JavaScript compilation and execution
general flow
It can be divided into three stages:
1. Lexical analysis
After the JS script is loaded, it will first enter the syntax analysis stage. It will first analyze whether the syntax of the code block is correct. If it is not correct, it will throw a "syntax error" and stop the execution.
Several steps:
Word segmentation, for example
var a = 2, divides , into such lexical units asvar,a,=, .2Parsing, which converts the tokens into an Abstract Syntax Tree (AST).
Code generation, which converts abstract syntax trees into machine instructions.
2. Precompile
JS has three runtime environments:
global environment
function environment
eval
Every time you enter a different operating environment, a corresponding execution context will be created. According to different contexts, a function call stack is formed. The bottom of the stack is always the global execution context, and the top of the stack is always the current execution context.
Create execution context
In the process of creating the execution context, the following three things are mainly done:
create variable object
parameter, function, variable
Create a scope chain
Confirm whether the current execution environment can access variables
Make sure This points to
3. Execution
JS thread
Although JS is single-threaded, there are actually four threads involved in the work:
Three of them are just assistance, only the JS engine thread is actually executed
Three of them are just assistance, only the JS engine thread is actually executed
JS engine thread: also called JS kernel, responsible for parsing and executing the main thread of JS script programs, such as V8 engine event trigger thread: belonging to the browser kernel thread, mainly used to control events, such as mouse, keyboard, etc. When the event is triggered, The event processing function will be pushed into the event queue, waiting for the JS engine thread to execute the timer trigger thread: the main control
setIntervalandsetTimeoutused for timing, after the timing is over, the timer processing function will be pushed into the event queue, waiting for the JS engine thread. HTTP asynchronous request thread: After connecting through XMLHttpRequest, through a new thread opened by the browser, when monitoring the change of the readyState state, if the callback function of this state is set, the processing function of this state will be pushed into the event queue and wait for the JS engine thread implement.
Note: The number of concurrent connections of the browser to the same domain name is limited, usually 6.
macro task
Divided into:
Synchronous tasks: Execute in order, only after the previous task is completed, the next task can be executed
Asynchronous task: not directly executed, only when the trigger condition is met, the relevant thread pushes the asynchronous task into the task queue, and waits for the execution of the task on the main thread of the JS engine to complete, such as asynchronous Ajax, DOM event, setTimeout, etc.
micro task
Microtasks are under ES6 and Node environment, the main APIs are: Promise, process.nextTick.
Microtasks are executed after the synchronous tasks of the macrotasks and before the asynchronous tasks.
code example
console.log('1'); // 宏任务 同步
setTimeout(function() {
console.log('2'); // 宏任务 异步})
new Promise(function(resolve) {
console.log('3'); // 宏任务 同步
resolve();
}).then(function() {
console.log('4')// 微任务})
console.log('5') // 宏任务 同步The above code output sequence is: 1,3,5,4,2
↓ ↓ ↓ Click to read the original text and go directly to my personal blog
Are you looking