In the front-end interview, I would like to analyze the interview questions often encountered from the following three aspects: cache + network + DOM parsing rendering
The cache
No cache
If you send a request for the first time, or if the browser sends a request to the browser cache and returns no cached result and no cached result, there’s no cached result, so the browser needs to send a request to the server, and the server returns the cached result and cached result, puts it in the browser cache, and the next time there’s a cache
Strong cache
Since the strong cache takes precedence over the negotiation cache, the negotiation cache is entered only after the strong cache expires. The browser sends requests to the browser cache, and the browser cache directly returns cached results. A strong cache doesn’t interact with the server, so it has cache-control and Expires. Expires takes precedence over cache-Control.
Negotiate the cache
When strong cache invalidation, the cache will use negotiation, when the browser to the browser cache sends the request, because the cache invalidation as a result, the browser cache only returns the cache, the browser to the server with a cache marking request, the server is updated according to the resources decided to return to code is 200/304, if resources are not update, return to 304, or 200. The browser cache is updated by writing cache flags and results to the browser cache
network
The application layer
Requests are sent at the application layer, and DNS is used to resolve domain names. HTTP /DNS/ FTP protocols are used at the application layer. DNS mainly resolves domain names into IP addresses
The transport layer
The transport layer mainly provides data transmission between two computers. It divides the data obtained by the application layer, marks the serial number and port number, and sends the data to the network layer. The protocols at the transport layer are UDP/TCP. TCP uses a three-way handshake. In the first handshake, the sender sends a packet marked with SYN to the receiver. The second time, after receiving the data, the receiver sends a packet with SYN/ACK. The third time, the sender sends the ACK packet to the receiver. The connection is set up after three attempts
| Contrast type | TCP | UDP |
|---|---|---|
| Whether connection | connection-oriented | Oriented disconnection |
| Transmission reliability | reliable | unreliable |
| applications | A small amount of data | Transfer large amounts of data |
| speed | slow | fast |
The network layer
The network layer processes network flow packets, uses ARP addressing to find the corresponding MAC address, and forwards the packets to the link layer. The protocol at the network layer is IP
The link layer
The link layer deals with the hardware parts of the network, such as network cards and device drivers
Dom parsing rendering
A. Convert HTML into a DOM tree
B. Convert the CSS to a CSSOM tree
C. Merge DOM and CSSOM into a render tree
D. According to the rendering tree layout, calculate the geometric information of each node
E. Draw each node to the screen
CSS block rendering
In the above rendering process, if the CSS download is not complete, the rendering will block, which simply means whether the browser needs to pause the first rendering of the page until the resource is ready.
reference
- www.toutiao.com/i6917490602…
- www.w3.org/TR/navigati…
- Mp.weixin.qq.com/s?srcid=042…
- www.cnblogs.com/xuxg/articl…
- Developers. Google. Cn/web/fundame…
- Javascript. The info/script – asyn…
- Developers.google.com/web/fundame…
- Developer.mozilla.org/zh-CN/docs/…