"2022" plans to change jobs and raise salary. It is necessary to ask interview questions and answers - browser

Hi, I'm from the front , Today, I would like to share with you ！

---

One 、 From input URL What happened to page rendering ？

Enter a web address in your browser , Such as ：https://www.baidu.com . From entering the address to seeing Baidu home page , What happened in this process ？

1.1、 Build network request

1.2、 Find cache

Check if there is a cache , The cache is used directly , If there is no cache , Will send a network request to the server .

1.3、DNS analysis

When we visit the website , You entered a domain name , For example, in the screenshot above

domain name ：https://www.baidu.com

IP Address ：36.152.44.95：443

The real packet is through IP From the address , Domain name and IP yes One One The mapping relationship . We get the specific information according to the domain name IP This process is called DNS analysis .

IP The number after the address specifies the port number , without , The default is 80 .

1.4、 establish TCP Connect

If the server wants to send packets to the browser , The first thing to do is to establish a connection . establish TCP Connect , This is to ensure that the server and browser can communicate securely , Disconnect after data transmission .

TCP (Transmission Control Protocol), Transmission control protocol , It's a connection oriented , reliable , Transport layer communication protocol based on byte stream .

Under the same domain name , At most 6 individual TCP Connect , exceed 6 If you want to , The rest will be waiting in line .TCP The connection is divided into three stages ：

• Establish the connection between the browser and the server through three handshakes .
• Data transfer , The server sends packets to the browser .
• Disconnected phase , After data transmission , Disconnect by waving four times .

1.5、 send out HTTP request

TCP After the connection is established , The browser and server can start communicating , Start sending HTTP request .

http request , Front end programmers are familiar with it ！ There are requests and responses .

Request flow chart ：

Two 、 How the page is rendered ？

The first question is about input in the browser url What did you do after that , Finally, send the network request . Server according to url Find the file at the address provided , Then load html、css、js、img Etc . How does the browser render after receiving the file ？

The process of browser rendering is ：

1. The browser will get html The document is parsed into DOM Trees .
2. Handle CSS Mark , Make up a cascading stylesheet model CSSOM.
3. take DOM and CSSOM Merge , Create a rendering tree （rendering tree）, Represents a series of objects to be rendered .
4. Each element of the rendering tree contains calculated content , It is called layout layout . The browser uses a streaming layout , Only one drawing operation is required to lay out all elements .
5. Draw each node of the rendering tree to the screen , This step is called painting.

The process is shown in the figure ：

3、 ... and 、 What about browser caching ？

3.1、 Strong cache

When checking the strong cache , Don't send http request .

How to check ？ Check through the corresponding fields , stay hTTP/1.0 Is used in Expires /, stay HTTP/1.1 It uses Cache-Control .

Expires

Expires Namely the expiration time , Exists in the response header returned by the server , Tell the browser to get data directly from the cache before the expiration time , No need to send the network request again .

expires: Wed, 29 Dec 2021 07:19:28 GMT

 I was in 2021-12-22 12:30 about   Requested  https://www.baidu.com/ ,
 Back to  expires  As above .
 Indicates that the resource is in  2012-12-29 07:12:28  Be overdue , Before that, no request will be sent to the server 

Is there anything wrong with this method ？ There is a big hole hidden , If the local time of the computer is inconsistent with the server time , The expiration time returned by the server may be inaccurate , So in this way HTTP 1.1 I've been abandoned in my life .

Cache-Control

stay HTTP1.1 in , It uses a very critical field ：Cache-Control . This field also exists in the response header . Such as ：

cache-control: max-age=2592000

It means that after the response is returned , stay （2592/3600=720 Hours ） You can use the cache directly within .

It and Expires The essential difference is that it does not adopt a specific point in time , Instead, the duration is used to control the strong cache . If Expires and Cache-Control At the same time ,Cache-Control Will give priority to .

Is it possible that the strong cache will fail ？ If the resource cache time expires , That is, the strong cache fails , What to do next ？ At this point, it will enter the second level barrier -- Negotiate the cache .

3.2、 Negotiate the cache

After the cache fails , The browser carries the corresponding cache in the request header tag Send request to server , The server uses this cache tag Decide whether to use cache or not , This is the negotiation cache .

cache tag There are two kinds of ：ETag and Last-Modified .

ETag It is the unique identifier generated by the server according to the contents of the current file , If the content is updated , The unique ID will also be updated . The browser received ETag Will act as if-None-Match The contents of the field , And put it in the request header , After sending to the server , The server will be connected with the Value for comparison , If the two are the same , The browser returns directly 304, Use the cache , Send when different http request .

Last-Modified , Last modified . After the browser sends the network request for the first time , The server will add this field to the response header . When the browser sends a request again , This value is taken as last-Modified-Since Value , Put the request header , The server then compares the last modification time on the server , If the two are the same , The browser returns directly 304, Use the cache . Send when different http request .

Both comparisons ：

Accuracy ETag Better . because ETag It can more accurately judge whether resources are updated , Make sure that what you pull is the latest content .

On the performance Last-Modified Just a little , Just record a time point .

If both exist , Give priority to ETag.

3.3、 The cache location

Above , When the browser requests an address , Server return 304 Indicates that the browser cache is used , Where are these resources cached ？

There are four cache locations , They are ranked from high to low in priority ：

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

Four 、 What is the browser's local storage ？

Local storage , Is to put some information , Store to client local , The stored information will not disappear because the page jumps or closes . Browser local storage is mainly divided into ：cookie、webStorage and indexDB.

4.1、cookie

cookie Mainly to identify users . make up http Deficiencies in state management .

http It's a stateless protocol , After the browser sends the request to the server , Server returns response , The next time I ask , The server no longer knows the browser , If the next time the browser sends a request , Can handle cookie close , The server parses , Can identify the identity of the browser .

cookie It is used to store state , Its characteristics are ：

• Compatible with all browsers , There is a certain association between it and the server .
• Storage size limit ： General browsers specify that the same source can only store at most 4KB size
• cookie There is an expiration date , The expiration time can be set by yourself .
• cookie unstable , It is easy to clean up the browser cache or three-party garbage cookie Remove .
• The user can open according to his own needs cookie cache , If you open traceless browser or stealth mode , Will close cookie.

4.2、webStorage

webStorag Can be divided into localStorage and sessionStorage , Local persistent storage , Local persistent storage is used to store information that does not need to be sent to the server , To supplement cookie Insufficient storage .

localStorage characteristic ：

• Incompatible with older browsers IE6-8 .
• The life cycle is permanent , Unless the user actively clears , Otherwise there will always be .
• The size of the stored data is generally 5M, There are differences between browsers .
• Not affected by browser traceless mode or stealth mode .
• Strict local storage , There is no relationship with the server .

sessionStorage characteristic ：

• • Incompatible with older browsers IE6-8 .
  • Valid only in current session , Close the current page or close the browser , Will be cleared .
  • The size of the stored data is generally 5M, There are differences between browsers .
  • Strict local storage , There is no relationship with the server .

localStorage and sessionStorage There is an essential difference ,localStorage The life cycle is permanent , and sessionStorage Only exists in the current session .

4.3、indexedDB

indexedDB yes html5 A kind of local storage provided by , Generally, a large amount of user data is saved and a search scenario is required between the data , When the network is disconnected , Do some offline applications , The data format is json . It's essentially a Non relational database . Its capacity is unlimited .

characteristic ：

• Large storage space , Default 250M .
• Key value pair operation , You can read and traverse the database , The index can also be used for efficient retrieval .
• Limited by homology strategy , Unable to access the database across domains .

summary ： Each method of browser local storage has its own characteristics ,cookie Relatively small, suitable for storing small status information for communication with the server ,webStorage Store data that does not participate in server communication ,indexedDB Store large non relational databases .

5、 ... and 、http and https

Browser access http When the website , There will be a prompt in front of the domain name “ unsafe ”, visit https//xxx.com When the browser prompts “ Security ”, Why is that ？

http agreement , Hypertext transfer protocol , It is used to transfer information between server and browser ,http The protocol sends content in clear text , Do not provide any way of data encryption , If the attacker directly intercepts the message transmitted between the browser and the server , You can read the information directly .

In order to solve http Defects in the agreement , Use https Secure socket layer Hypertext Transfer Protocol , In order to ensure the security of data , stay http On the basis of the agreement , Added SSL agreement ,SSL Rely on certificates to verify the server's identity , The communication between browser and server is not encrypted .

https It's not a new agreement , It's an enhanced version of http . In short https Agreement by the SSL+ http The protocol is built for encrypted transmission 、 Network protocol for identity authentication , than http Security agreement .

https and http The difference between ：

• https The protocol needs to apply for a security certificate , Generally, it is less free , It costs money , and http Unwanted .
• https have SSL The encrypted , More secure , and http It's plaintext transmission , unsafe .
• https and http Different connection methods used , The default port used is different ,http yes 80,https yes 443.
• http The connection is simple , There is no state , and https It needs to pass SSL Verify the identity information , Relatively safer .

https Working principle diagram ：

Encryption and decryption process

Next, let's talk about the process of negotiating encryption and decryption between the browser and the server .

First , The browser will send a random number to the server client_random And a list of encrypted methods .

The server will return another random number to the browser after receiving server_random And encryption methods .

Now? , They have three identical credentials : client_random、server_random And encryption methods .

Then use this encryption method to mix two random numbers to generate a key , This key is the secret code of communication between the browser and the server .