What front-end personnel most often contact is browser , No matter what page we usually write ,F12 Check it out Element, Or write js Function debugging Console, Or used to debug the interface Network. But what else does our browser have , Because this is also a big content , So I set up a special column to introduce , Today, let's talk about his composition , To lay the foundation for the specific principle and mechanism in the future .
The main functions of the browser
The main function of the browser is to input the information entered by the user web Resources are displayed graphically , The general resource format is HTML Format . User use URI（Uniform Resource Identifier Uniform resource identifiers ） To specify the location of the requested resource . That's when the user enters URL What does the post browser do ？ We have to understand what the browser has .
The composition of the browser
- The user interface
- Browser engine
- Rendering engine
- The Internet
- Show the back end
- JS Interpreter
- Data persistence layer
The user interface （User Interface）
In addition to the pages displayed in the browser window , What other users see belongs to The user interface , such as ： Address bar 、 Bookmarks 、 Preferences 、 The avatars （ Browser with login function ）、 Forward / back off / Refresh 、 Downloader wait . It is a functional component for users to interact with the browser itself .
Browser engine （Browser Engine）
In the user interface and Rendering engine Transfer instructions between , yes Rendering engine An interface of .
Used to load the specified URI, Make progress 、 back off 、 Refresh and other functions .
Used to query / modify Rendering engine Set up .
Rendering engine （Rendering Engine）
It is the most important module of the browser , Responsible for the designated URI Generate a visual interface , analysis html,css And resources such as pictures .
In fact, the process of parsing is the most important thing we should understand and pay attention to ： backflow , Repaint ,cssom,DOM Trees , The sequence of execution of different threads on a process, etc . I will write these one after another , Please also pay attention and look forward to .
Rendering engine Also known as Browser kernel , There are five common kernels on the market ：
- Trident Common browsers ：IE,360 Secure browser （1.0-5.0 by Trident,6.0 by Trident+Webkit） Cheetah browser .
- Gecko Common browsers ： Firefox
- Presto Common browsers ：Opera Early use of browsers , At present, it is abandoned due to compatibility and other problems .
- Webkit Common browsers ： Google browser ,Safari, Mobile phone browser .
- Blink Common browsers ： Google ,Opera, It's Google and Opera Jointly developed .
The Internet （Networking）
Realization http/https,FTP File transfer protocol . You can convert between different character sets . You can also cache recently retrieved resources . Here comes a topic ：
1. Browser caching mechanism , The main thing is http cache , Among them Strong cache , Negotiate the cache What are the differences , How to perform .
2.http/https difference ,
post Equal request
Show the back end （Display Backend）
Draw a collection of user interface controls , Combo box （ A drop-down box , List box ）, Font collection, etc . for example
input Different from
type The style of , The bottom layer uses the user interface of the operating system .
It leads to some topics ：
1. Rendering engine and Js Interpreter Work together , The event loop .
2.Js Interpreter Medium Garbage collection mechanism .
3.V8 in Interpreter , Parser , optimizing compiler How it works . perform Js when , Parser Analytic AST, Bytecode , lexing , Syntax parsing and so on .
Data persistence layer （Data Persistence）
The data saved by the browser on the hard disk :
1. Bookmarks 、 Advanced data such as toolbar settings .
2.Cookie, A security certificate 、 Cache and other low-level data .
We should pay more attention to their cache ：Local Storage,Session Storage,indexedDB,Web SQL. These are all HTML5 As defined in the specification . In the future, I will take out a chapter to describe and compare them .
The user entered URL What does the post browser do ？
This is also a classic interview question . The answer can be rough or detailed . Roughly speaking here , Because detailed explanation can tear down many articles .
1.DNS Domain name resolution ;
2. establish TCP Connect ;
3. send out HTTP request ;
4. Server processing request ;
5. Return the response result ;
6. close TCP Connect ;
7. Browser parsing HTML And layout rendering ;
DNS Domain name resolution
DNS Try to parse the semantic domain name , Become a server ip Address .
1. First find... In the browser DNS cache , Is there a domain name corresponding to ip.
2. Not looking for... From the operating system .
3. The system has no corresponding ip, Use recursive or iterative query , In order to Root domain server 、 Top-level domain server 、 Authoritative domain name server Initiate a query request , Until you find one or a group IP Address , Back to the browser .
establish TCP Connect
To find the corresponding ip after , You need to shake hands with the server three times , establish TCP Connect .
We can talk about... Later TCP Three handshakes , Four waves ,UDP No connection protocol , Characteristics and differences between .
send out HTTP request
The browser starts sending HTTP request , A request message is sent by the request line 、 Request header 、 Blank line 、 Entity （Get The request did not ） form .
Server processing request
After the browser request message arrives at the server , The server interface will process the request message , Execute the code corresponding to the interface , Respond to the client after processing .
Return the response result
The browser processes the returned results . When the message header sent by the client accept（ The type of data the client expects , This is the request header automatically encapsulated by the browser ）, If the server returns content-type yes accept Any one of them , Browsers can parse , And show it directly on the web page .
close TCP Connect
- The server sends... To the client Alert message , The type is Close Notify, Notify the client that it will no longer send data , Closing connection , Again , This message is also encrypted .
- The server calls close Function actively closes the connection , Send to client with FIN Grouping of flag bits , Serial number for m.
- The Client acknowledges receipt of the packet , Send to the server with ACK Grouping of flag bits , The confirmation number is m+1.
- After the client sends all the data , Send to the server with FIN Grouping of flag bits , Serial number for n.
- The server acknowledges receipt of the packet , Send to client with ACK Grouping of flag bits , Serial number for n+1. After the client receives the confirmation packet , Enter immediately CLOSED state ; meanwhile , The server is waiting 2 individual MSL(Maximum Segment Lifetime, Maximum message lifetime ) After , Get into CLOSED state .
Browser parsing HTML And layout rendering
The browser parses HTML, Generate DOM Trees , analysis CSS, Generate CSS The rule tree , And then through DOM Trees and CSS Rule trees generate render trees . This is about Rendering engine The work of , Let's take an article to describe it .\
thus , The general introduction to the browser is completed , At the same time, it also causes many problems ：
1. Browser caching mechanism .
2.http/https The difference in agreement .
3.GET/POST And other requests
4. Browser garbage collection mechanism .
5. Rendering engine ,Js How does the interpreter work .
7.V8 How the script engine works .
8. Browser storage mechanisms .
How interesting the front end is , A browser is enough for us to explore so deeply . Please pay attention to me , I'll make up these articles .
If this article is helpful or enlightening , That would be my pleasure