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
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 .
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 .
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 ：
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
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 .
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 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 .
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 .
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 .
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 .
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 .
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 .\