Said in the previous

Limited to this is a self-examination manual, the answer is not so detailed, if there is a link under a knowledge point, and they have not in-depth understanding, should click the link or search in-depth understanding.

Two other parts:

• Front end test questions self – check JS CSS part
• Front end test question self – check algorithm design mode operating system part

In the browser, what happens between typing the URL and displaying the page

1. The user enters the URL and press Enter. 2. The browser process sends url requests to the network process through interprocess communication (IPC) 4. After receiving the URL request, the network process checks whether the requested resource is cached in the local cache and returns it to the browser process 5. If not, the network process sends an HTTP request (network request) to the Web server. The request process is as follows: 5.1 Performing DNS Resolution to obtain the IP address and port of the server 5.2 Establishing A TCP Connection with the Server using the IP Address 5.3 Building The Request Header 5.4 Sending the Request Header 5.5 After the server responds, the network process receives the response header and response information and parses the response content 6. Network process resolution response process; 6.1 Check the status code. If the status code is 301/302, redirection is required, and the address is automatically read from Location. Step 4 If the status code is 200, continue processing the request. 6.2 200 Response processing: Check the response Type content-type. If the response Type is byte stream, the request will be submitted to the download manager, and the navigation process will end and no further rendering will be performed. If the response Type is HTML, the browser process will be notified to prepare rendering. 7.1 Browser process Check whether the current URL is the same as the root domain name of the previously opened rendering process. If the current URL is the same as the root domain name of the previously opened rendering process, the original process is reused. If the current url is different, the new rendering process is started. 8.1 When the rendering process is ready, the browser sends a message of "submit document" to the rendering process, and the rendering process receives the message and establishes a "pipeline" for data transmission with the network process. 8.2 After the rendering process receives the data, Sending a Confirmation Message to the Browser 8.3 After receiving the Confirmation message, the Browser Process updates the browser interface status, including security, URL in the address bar, forward and backward historical status, and Web page update. 9. Parse the page after receiving an HTML document...Copy the code

Page four process, IPC, cache, DNS resolution, CND, TCP establishment, HTTP request, SSL connection establishment (if HTTPS), HTTP response, parsing page

As an introduction, the above knowledge points will be analyzed below

Network, HTTP

Five-layer network model

(1) Application layer

Provides network access services for applications and a place where application-layer protocols persist. For example, HTTP provides the request and transfer of Web documents, SMTP (Mail Transfer Protocol) provides the transfer of E-mail, and DNS (domain name resolution Protocol) converts http://202.108.22.5 into the human-friendly www.baidu.com.

(2) Transport layer

Provide end-to-end services, that is, host to host. Responsible for transmitting packets from the application layer to the destination, and also ensuring transmission error control and traffic control. In the Internet, two transport protocols, TCP and UDP, provide end-to-end, reliable or unreliable transport.

(3) Network layer

The network layer is responsible for moving packets of datagrams from one host to another for addressing, routing, establishing, holding, and terminating connections. The transport layer in the host making the transport request sends the transport segment and the destination address to the network layer, just as you provide the destination address when sending an item through a Courier service.

(4) Data link layer

The most basic service of the data link layer is to reliably transmit the data from the network layer to the adjacent nodes, and the link layer of the destination host of the next node will packet the data to the network layer. Examples of data link layer include Ethernet, WiFi and so on. The functions of this layer include: physical address addressing, data frame, flow control, data error detection, retransmission and so on.

(5) Physical layer

The job of the physical layer is to move bits of the frame from one node to the next. Protocols at the physical layer are link-dependent and need to ensure that raw data can be transmitted over a variety of physical media. Many physical layer protocols for Ethernet, for example, are related to twisted-pair copper wires, coaxial cables, optical fibers, and so on.

HTTP is at the application layer, TCP at the transport layer, and IP at the network layer.

TCP

The soul of the TCP protocol is to consolidate the underlying foundation of your network

TCP has three handshakes and four waves

The necessity of three handshakes

The first two handshakes are performed in order for the server to receive the information from the client and make the correct response

The last two handshakes are performed in order for the client to receive the information from the server and make the correct response

Signs that

ACK: TCP specifies that the ACK of all packets sent after a connection is established must be 1. This parameter is valid only when ACK = 1

SYN: Used to synchronize the sequence number when establishing a connection. When SYN is set to 1, it indicates a connection request or a connection receive packet

FIN: Terminating, used to release a connection. When FIN = 1, it indicates that the data of the sender of the packet segment has been relaxed and can request to release the connection

Three handshakes

First handshake: A connection is established. The client sends a connection establishment request with SYN set to 1 and seq set to x. The client then enters the SYN_SEND state and waits for confirmation from the server

Second handshake: The server receives the SYN packet. After receiving the PACKET, ACK is set to 1 and the acknowledgement number is x+1. The SYN request is set to 1 and seq is set to y. The server sends the SYN+ACK packet segment to the client and enters the SYN_RECV state.

Third handshake: The client receives the SYN+ACK packet segment. Upon receipt, the confirmation number ACK is y+1; The ACK packet segment is sent to the server. After the segment is sent, both the client and server enter the ESTABLISHED state, complete the three-way handshake, and start data transmission.

By the time of the third handshake, the client is in the ESTABLISHED state and has been able to confirm that the server is receiving and sending data, so it is relatively safe to carry data.

Four waves

First wave: Host 1 sets SEQ to U and sends a FIN packet segment to host 2. In this case, host 1 enters FIN_WAIT state, indicating that no data is to be sent to host 2

Second wave: After receiving the FIN packet sent by host 1, host 2 replies an ACK packet with the confirmation number u+1 and the serial number SEq v to the host. Host 2 enters the CLOCK_WAIT state. After receiving the ACK packet from host 2, host 1 enters the FIN_WAIT_2 state.

Third wave: Host 2 sends a FIN packet to host 1, set SEq to W, ack to U +1, and request to close the connection. Host 2 enters the LAST_ACK state

Fourth wave: Host 1 receives the FIN packet sent by host 2 and sends an ACK packet to host 2 with the acknowledgement number w+1 and seQ U +1. Then host 1 enters TIME_WAIT. When host 2 receives an ACK packet from host 1, it closes the connection. In this case, host 1 does not receive a reply after waiting for 2MSL (maximum lifetime of the message), which proves that the server has been properly shut down, and host 1 can also close the connection

When the first wave is sent, the client can only receive but cannot send.

Four handshakes are necessary

The second wave and the third wave cannot be combined, because the second wave represents that the service segment received a close request, and it is not consecutive with the third wave. Perhaps the service segment has data to send, and it waits for all of it to be sent before sending the third handshake.

2 MSL meaning

• One MSL ensures that the last ACK message from the active close party in the four waves can reach the peer end
• One MSL ensures that the peer end does not receive the FIN packet retransmitted by ACK

Half connection queue

When a client sends a SYN to a server, and the server responds with an ACK and A SYN, the state changes from LISTEN to SYN_RCVD, and the connection is pushed into the SYN queue, or half-connection queue.

Full connection queue

When the client returns an ACK and the server receives it, the three-way handshake is complete. The connection is waiting to be picked up by the application. Before it is picked up, it is pushed to another Queue maintained by TCP, the Accept Queue.

Mechanism of SYN Flood attacks

SYN Flood attacks are typical DoS or DDoS attacks. The attack mechanism is simple: the client forges a large number of non-existent IP addresses in a short period of time and sends SYN packets to the server. On the server side, there are two dangerous consequences:

1. Handle a large number ofSYNPackage and return the correspondingACK, there are bound to be a lot of connections inSYN_RCVDState, thusIt fills the entire half-connection queueUnable to process normal requests.
2. Because the IP address does not exist, the server cannot receive the client for a long timeACK, which causes the server toConstantly resend dataUntil the server’s resources are exhausted.

Response to SYN Flood attacks

1. Increase the capacity of the HALF-connection queue by adding SYN connections.
2. Reduce the number of SYN + ACK retries to avoid a large number of timeout resends.
3. Received on the server using SYN Cookie technologySYNInstead of allocating connection resources immediately after, it is based on thisSYNCalculates a Cookie, replies to the client with a second handshake, and replies on the clientACKTake this with youCookieThe server authenticates that the Cookie is valid before allocating the connection resource.

Calculation of round trip delay RTT

Round-trip Time (RTT)

TCP calculates the difference between the time when a packet is sent and the time when a response packet is received using the timestamp

1. When A sends it to B,timestampIs the kernel time when host A sentta1.
2. When B replies the S2 packet to A,timestampIs the time of host Btb.timestamp echoThe field is TA1 parsed from the S1 packet.
3. After A receives the S2 packet from B, the kernel time of host A is TA2, which can be obtained from the timestamp echo option in the S2 packetta1, which is the initial sending time of the packet corresponding to S2. Ta2 minus ta1 gives you the value of RTT.

TCP timeout retransmission (RTO timeout retransmission time)

TCP has the timeout retransmission mechanism. If no reply is received within a certain period of time, the packet is retransmitted.

The Retransmission interval is also called the Retransmission TimeOut (RTO).

Classic methods

The classic approach introduces a new concept — SRTT(Smoothed round trip time), every time the RTT is generated. SRTT is updated according to a certain algorithm. Specifically, the calculation method is as follows (SRTT initial value is 0):

SRTT =  (α * SRTT) + ((1Alpha) * RTT),Copy the code

RTO = min(ubound, Max (lbound, β * SRTT))Copy the code

β is the weighting factor, generally ranging from 1.3 to 2.0, lbound is the lower bound and ubound is the upper bound. The range of α is 0.8 ~ 0.9

TCP Flow Control

For the sender and receiver, TCP puts the sent data into the send cache and the received data into the receive cache.

What flow control is supposed to do is control the sending side by the size of the receive cache. If the recipient’s receive cache is full, the recipient cannot send any more.

To understand flow control specifically, you first need to understand the concept of sliding Windows.

TCP sliding window

There are two types of TCP sliding Windows: sending window and receiving window.

Send window

The structure of the sliding window at the sending end is as follows:

It contains four major parts:

• Sent and confirmed
• Sent but not confirmed
• Not sent but can be sent
• If you have not sent it, you cannot send it

There are some important concepts

The send window is the area in the picture that is framed. SND means send, WND means window, UNA means unacknowledged, NXT means next, indicating the next sending location.

Receiving window

The window structure of the receiving end is as follows:

Rev. indicates receive, NXT indicates the location of the next receive, and WND indicates the size of the receive window.

The specific process

First, the two sides shake hands three times to initialize their respective window sizes, both of which are 200 bytes.

The sender sends 100 bytes to the receiver, and the sender SND.NXT moves 100 bytes to the right, that is, the available window is reduced by 100 bytes.

100 bytes arrive at the receiver and are placed in the buffer queue. However, due to the heavy load, the receiver can not process this many bytes, can only process 40 bytes, the remaining 60 bytes are left in the buffer queue.

So the receiver’s policy is to reduce the receiving window and notify the sender: specifically, by 60 bytes, from 200 bytes to 140 bytes, because the buffer queue still has 60 bytes left to apply.

The receiver will put 140 bytes of the reduced sliding window in the ACK header, and the sender will adjust the size of the sending window to 140 bytes.

At this time, for the sender, 40 bytes have been confirmed, snD. UNA is moved 40 bytes to the right, and the sending window is reduced to 140 bytes.

TCP congestion control

Congestion control needs to deal with the problem of packet loss in a congested network environment. How to send packets

For congestion control, TCP needs to maintain two core states per connection:

• Congestion Window (CWND)
• Slow Start Threshold (SSthresh)

There are several algorithms involved:

• Slow start
• Congestion avoidance
• Fast retransmission and recovery

Congestion window

Congestion Window (CWND) is the amount of data you can still transfer.

We know that the receiver’s receive window controls the size of the sender’s send window

In fact, the send window size is jointly controlled by the sender’s congestion window and the receiver’s receive window

Send window size = min(RWND, CWND)

Take the smaller of both. Congestion control is to control CWND changes.

Slow start

When you first start transferring data, you don’t know whether the network is stable or congested. If you do it too aggressively and send packets too quickly, you will lose packets and cause an avalanche of disaster.

Therefore, congestion control first requires a conservative algorithm to slowly adapt to the whole network, this algorithm is called slow start. The operation process is as follows:

• First, with a three-way handshake, both sides declare their receive window size
• Each side initializes its own congestion window (CWND) size
• During the initial transmission period, the congestion window size increases by 1 for each ACK received by the sender, that is, the CWND doubles for each RTT passed. If the initial window is 10, after the first round of 10 packets are transmitted and the sender receives an ACK, the CWND changes to 20, the second round to 40, the third round to 80, and so on.

It doesn’t grow exponentially all the time, it has a threshold called a slow start threshold, at which the rate of growth decreases dramatically.

Congestion avoidance

After the threshold is reached, each CWND increase by 1 / CWND. After a round of RTT, CWND ACK is received, the size of congestion window CWND increases by 1.

Fast retransmission and recovery

Fast retransmission and selective retransmission

In the process of TCP transmission, if packet loss occurs, that is, when the receiver finds that the data segment does not arrive in order, the receiver processes the ACK before sending repeatedly.

For example, if the fifth packet is lost, even if the sixth and seventh packets arrive at the receiver, the receiver will return an ACK for the fourth packet. When the sender receives three duplicate ACK’s, it realizes that the packet is lost and immediately retransmits the packet without waiting for an RTO to run out.

This is called fast retransmission, and it addresses the question of whether or not you need to retransmit.

After receiving a packet from the sender, the receiver replies with an ACK packet. In this case, the SACK attribute can be added to the optional header of the packet, and the left edge and right edge of the packet can be used to inform the sender of the range of datagram received. So even if the fifth packet is lost, when the sixth and seventh packets are received, the receiver will still tell the sender that these two packets have arrived. If the fifth packet does not arrive, the packet is retransmitted.

This process, also called SACK, Selective Acknowledgment, solves the problem of how to retransmit.

Fast recovery

Of course, after receiving the repeated ACK for three times, the sender finds that the packet is lost and thinks that the current network has been somewhat congested, so it will enter the rapid recovery phase.

At this stage, the sender changes as follows:

• The congestion threshold is reduced to half of that of CWND
• The CWND size becomes the congestion threshold
• CWND increases linearly

These are the classic algorithms of TCP congestion control: slow start, congestion avoidance, fast retransmission, and fast recovery.

Differences between TCP and UDP

Detailed UDP protocol parsing

UDP provides unreliable services and has the following advantages over TCP:

• UDP Is connectionless and does not require a delay for establishing a connection. In space, TCP needs to maintain the connection state in the end system, which requires some overhead. This connection load includes receive and send caches, congestion control parameters, and sequence and acknowledgement number parameters. UCP does not maintain connection state and does not track these parameters, which is low overhead. Space and time have advantages. If the DNS runs on UDP, it does not need to establish a connection and is much faster. HTTP uses TCP because reliability is important for Web pages based on text data. The same dedicated application server that supports UDP is bound to support more active clients.

• The packet header has small overhead. The TCP header is 20 bytes and the UDP header is 8 bytes.

• UDP does not have congestion control. The application layer can better control the data to be sent and the transmission time. Congestion control in the network does not affect the transmission rate of the host. Some real-time applications require a steady rate of transmission that can tolerate some data loss, but cannot allow large delays (such as live video, live streaming, etc.)

• UDP provides best – effort delivery and does not guarantee reliable delivery. All maintenance of transport reliability needs to be done by the user at the application layer. There is no TCP confirmation and retransmission mechanism. If the packet is not sent to the peer end due to network reasons, UDP does not return an error message to the application layer

• UDP is packet-oriented. Packets delivered from the application layer are directly delivered to the IP layer after the header is added. The packets are neither merged nor split. After the header is removed, UDP user datagrams are delivered to the upper-layer application process intact. Packets are indivisible and are the smallest unit of UDP datagrams processing. Because of this, UDP is not flexible enough to control the number and quantity of read and write data. For example, if we want to send a packet of 100 bytes, we call sendto once to send 100 bytes, and the peer end also needs to use recvFROM to receive 100 bytes at a time, instead of using a loop to obtain 10 bytes each time.

• UDP is used for network applications that transmit a small amount of data at a time, such as DNS and SNMP. If TCP is used for these applications, the creation, maintenance, and removal of connections will incur a large cost. UDP is also commonly used in multimedia applications (such as IP telephony, live video conferencing, streaming media, etc.) to which reliable transmission of data is not important, and TCP congestion control can cause large delays that are not tolerated

Is TCP stateful? HTTP?

Status refers to the impact between requests;

Stateless is that each request is independent of each other. The receiver does not remember the previous request from the sender and processes the request according to the content of the packet.

Stateful means that requests affect each other. The receiver identifies the previous request from the sender, and then processes the request in combination with the content of the received packet.

• TCP is stateful. For example, establishing a connection and waving a wave have the mechanism of state change, packet sequence number, and retransmission
• UDP is stateless. It does not require a connection to be established before communication, nor does it have a mechanism such as confirmation or retransmission
• HTTP is stateless, and each HTTP request is independent. Therefore, packets need to carry records of the relevant state, such as cookies

Is TCP full-duplex?

• Simplex: one fixed is the sender, one fixed is the receiver, one-way transmission
• Half duplex: At a certain time, one party can only be the sender or receiver, and data can only be transmitted to the receiver
• Full-duplex: Either party can be the sender or the receiver. Data can be transmitted in both directions at the same time

TCP is full-duplex, allowing one host to send and receive data at the same time

Http

Strengthen your knowledge of HTTP

A complete HTTP transaction flow

1. Domain name resolution
2. Initiates the TCP three-way handshake
3. Establish a TCP connection and make an HTTP request (if HTTPS)
4. The server responds to the HTTP request, and the browser gets the HTML code
5. The browser parses the HTML code and requests resources in the HTML
6. The browser renders the page to the user
7. End connections

HTTP header

• Request line: method, URL field, and HTTP version
• Generic headers: cache-control, Connection, Date, Pragma, transfer-encoding, Upgrade, Via
• Entity: Allow, Content-Base, content-encoding, Content-language, content-Length, content-Location, content-MD5, content-range, and content-t Ype, Etag, Expires, last-Modified, and extension-header
• Request header: Accept, accept-charset, accept-encoding, accept-language, Authorization, Expect, From, Host, if-match, if-modified-since, if-none – Match, IF-range, if-unmodified-since, max-forwards, proxy-authorization, RangeReferer, TE, user-Agent
• Response headers: Accept-ranges, Age, ETag, Location, Referer, Retry-after Server, Vary, wwW-Authenticate

The HTTP status code

Concept:

When a user visits a web page, the browser will send a request to the server where the web page is located. The server will return an information header containing an HTTP status code to respond to the browser’s request. The HTTP status code is used to describe the server’s processing result of the request.

Classification of HTTP status codes

• 1** : information. After the server receives the request, the requester needs to continue to perform the operation
• 2** : Successful, the operation is received and processed successfully
• 3** : Redirects that require further action to complete the request
• 4** : Client error, request contains syntax error or request cannot be completed
• 5** : Server error. An error occurred during the server request

Common HTTP status codes

• 200 — OK, request succeeded
• 301 — Moved to Permanently move resources (web pages, etc.) to other urls
• 302 — Found, 307 — Temporary Redirect
• 304 — Not Modified, indicating that the client cache version is the most recent
• 401 — Unauthorized, the request requests user identity authentication
• 403 — Forbidden the server understands the client request but refuses to process it, usually due to permission Settings
• 404 — Not Found, requested resource Not Found
• 500 — Internal Server Error — Internal Server Error
• 502 — Bad Gateway, the server acting as the Gateway or proxy received an invalid request from the remote server
• 504 — Gateway time-out: the server acting as a Gateway or proxy does not obtain requests from the remote server in Time

HTTP method

MDN: HTTP request method

• GET, requests a representation of the specified resource. Requests using GET should only be used to retrieve data

• HEAD: requests a response that is the same as the response of the GET request, but contains only the request header without a response body; Can be used to determine whether a resource exists (faster than GET)

• POST, which is used to commit an entity to a specified resource, usually results in a state change or side effect on the server.

• PUT, replaces all current representations of the target resource with the request payload.

• DELETE to DELETE the specified resource.

• OPTIONS: Obtains the communication OPTIONS supported by the destination resource. For example, get the methods supported by a url; More commonly, the options request is automatically sent by the browser in a cross-domain non-simple request to get the method and request header allowed by the server

What’s the difference between GET and POST?

The first and most intuitive difference is semantic.

Then there are these specific differences:

• From a caching perspective, GET requests are actively cached by the browser, leaving a history, while POST is not by default.
• From an encoding point of view, GET can only encode URLS and can only accept ASCII characters, while POST has no restrictions.
• From a parameter perspective, GET is generally placed in the URL and therefore insecure, while POST is placed in the body of the request and is more suitable for transmitting sensitive information.
• fromidempotenceThe point of view,GETisPower etc., andPOSTIt isn’t. (Power etc.Indicates that the same operation is performed and the result is the same.)

What’s the difference between PUT and POST?

Semantically, PUT is close to UPDATE and POST is close to CREATE

The essential difference is that PUT is idempotent and POST is not idempotent. Calling PUT once is equivalent to calling it multiple times (that is, without side effects), such as repeatedly submitting updates to a blog post; Calling the POST method multiple times in a row can have side effects, such as submitting an order multiple times.

The cache

Strong cache

Strong caching is the browser’s strategy of using caching instead of sending requests to the server

If a strong cache is hit, the browser does not send a request to the server, but instead creates a response with status code 200

Strong caching is controlled using the Expires and cache-control fields in the HTTP header, which indicate how long a resource will be cached

1. Expires:Is an HTTP1.0 specification whose value is a time string in GMT format with an absolute time. Like the webExpiresValues are:

Expires :Mar, 06 Apr 2020 10:47:02 GMT.Copy the code

This time represents the expiration time of the resource. As long as the request is sent before Expires, the local cache is always valid and the data is read from the cache. So this approach has an obvious disadvantage, because the time of failure is an absolute time, so when the server and client time deviation is large, it can cause cache chaos.

2. Cache-control: this field is used in Http1.1. It is usually determined by the max-age of this field. This value is a time of reference. Such as:

Cache-control :max-age=3600 // Indicates that the resource is valid for 3600 secondsCopy the code

There are several other commonly used values besides this field.

• No-cache: The local cache is not used. If there is an ETag in the previous response, then the request will be verified with the server. If the resource is not changed, then the download can be avoided.
• No-store: Disables the browser from caching data. Each time a user requests the resource, it sends a request to the server and downloads the complete resource each time.
• Public: can be cached by all users, including end users and intermediate proxy servers such as CDN.
• Private: It can only be cached by the browser of the end user and cannot be cached by the trunk cache server such as the CDN.

Cache-control and Expires priorities

Cache-control and Expires can be enabled on the server at the same time. Cache-control has a higher priority when both Settings are enabled. Such as:

cache-control:max-age=691200
expires:Fri, 06 Mar 2020 10:47:02 GMT
Copy the code

In this case, the maximum time that resources can be cached is 691,200 seconds, and max-age is preferred.

Negotiate the cache

If the browser does not hit the strong cache, it enters the negotiated cache

Negotiation caching is when the server determines whether cache resources are available. There are mainly two sets of header fields involved:

Etag 'and' if-none-match last-modified 'and' if-modified-since 'Copy the code

If the cache resource is available, the server returns a response with status code 304

Last-Modify/If-Modify-Since

When the browser requests a resource for the first time, the server returns the header with last-modify. Last-modify indicates the time when the resource was Last modified. For example, last-modify: Thu,31 Dec 2037 23:59:59 GMT.

When the browser requests the resource again, the request header of the request contains if-modify-since, which is the last-modify returned before caching. After receiving if-modify-since, the server determines whether the cache is hit based on the last modified time of the resource. If the cache is hit, 304 is returned, and the resource contents are not returned, and last-modify is not returned.

Etag/If-None-Match

First of all, Etag/ if-none-match is an abbreviation of Entity Tag. It is a unique identifier of a resource. Any change in resource will result in the change of Etag. The server determines whether the cache is hit based on the if-none-match value sent by the browser.

Etag was created to solve several last-modified problems:

• Some files may change periodically, but the contents of the file are not changed (only the modification time is changed). At this time, we do not want the client to think that the file has been changed and GET again.
• Some files are Modified very frequently, such as in seconds or less (for example, N changes in 1s), and if-modified-since can be checked at a granularity of S, which is impossible to determine (or the UNIX record MTIME is accurate only to seconds).
• Some servers do not have the exact last modification time of a file.

Last-modified and ETag can be used together. The server validates the ETag first. If the LAST-Modified is consistent, the server will continue to compare the last-Modified before deciding whether to return 304.

Cross domain

Description of cross-domain resource sharing CORS

Cross-domain conditions: different protocol, domain name, port,

Cross-domain requests are divided into simple requests and non-simple requests

(1) The request method is one of the following three methods:

• HEAD
• GET
• POST

(2) HTTP header information does not exceed the following fields:

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-type: only three values are allowedapplication/x-www-form-urlencoded,multipart/form-data,text/plain

A simple request

Three fields need to be set on the server

Such as

Access-control-allow-origin: http://api.bob.com Domain name. * indicates that any domain name is accepted. Access-control-allow-credentials: True Allows cookie access-control-exposure-headers: FooBar to carry additional fields specifiedCopy the code

withCredentials

A necessary condition for

• The access-control-allow-Credentials field is set to true

• The developer must open the withCredentials property in the AJAX request.

  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;
  Copy the code

• Access-control-allow-origin cannot be set to *

Cookies still follow the same-origin policy, only the cookies set by the server domain name will be uploaded, the cookies of other domain names will not be uploaded, and (cross-source) the document. Cookie in the original web code can not read the cookies under the server domain name.

Non-simple request

Non-simple requests are requests that have specific requirements for the server, such as the request method being PUT or DELETE, or the content-type field being application/ JSON.

For CORS requests that are not simple requests, an HTTP query request is added before the formal communication, called a “preflight” request.

The precheck request uses a request method of OPTIONS, which indicates that the request is intended to be asked. In the header, the key field is Origin, which indicates the source from which the request came.

In addition to the Origin field, the precheck request header contains two special fields.

(1) Access – Control – Request – Method

This field is required to list which HTTP methods are used for the browser’s CORS requests.

(2) Access – Control – Request – Headers

This field is a comma-delimited string that specifies the additional header field that the browser CORS request will send.

The response

(1) Access – Control – Allow – the Methods

This field is required, and its value is a comma-separated string indicating all cross-domain request methods supported by the server. Note that all supported methods are returned, not just the one requested by the browser. This is to avoid multiple precheck requests.

(2) Access – Control – Allow – Headers

The Access-control-allow-headers field is required if the browser Request includes the Access-control-Request-headers field. It is also a comma-separated string indicating all header fields supported by the server, not limited to fields requested by the browser in precheck.

(3) the Access – Control – Allow – Credentials

This field has the same meaning as a simple request.

(4) the Access – Control – Max – Age

This field is optional and specifies the validity period of the precheck request. The unit is second. In the above result, the validity period is 20 days (1,728,000 seconds), which allows the response to be cached for 1,728,000 seconds (20 days) without another precheck request being issued.

To solve the cross domain

CORS

Common cross-domain request: set access-control-allow-Origin only on the server. There is no need to set the front end. If cookie request is required, set the front and back ends.

axios.defaults.withCredentials = true
Copy the code

// Allow cross-domain access to the domain name: if there is a port, write it all (protocol + domain name + port). If there is no port, do not add '/' at the end of the port.
response.setHeader("Access-Control-Allow-Origin"."http://www.domain1.com"); 

// Allow cookies with authentication on the front end: After this function is enabled, the domain name on the front end cannot be '*' and a specific domain name must be specified. Otherwise, the browser will prompt you
response.setHeader("Access-Control-Allow-Credentials"."true"); 

// Indicates two commonly used custom headers that need to be set on the backend during OPTIONS precheck
response.setHeader("Access-Control-Allow-Headers"."Content-Type,X-Requested-With");
Copy the code

JSONP

Using script tags without cross-domain restrictions, with the server interface with parameters (for global function variable names), dynamically generated script code returned to the front end and run in the script tag

• Script code content: Calls a global function (the function that is called is taken as an argument) and passes an object as an argument

1.) Native implementation:

 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // Pass a callback function name to the back end to make it easier for the back end to execute the callback function defined in the front end when it returns
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
    document.head.appendChild(script);

    // Callback to the execution function
    function handleCallback(res) {
        alert(JSON.stringify(res));
    }
 </script>
Copy the code

The server returns the following (when returned, the global function is executed) :

handleCallback({"status": true."user": "admin"})
Copy the code

Webpack reverse proxy

Figure the difference between a forward and reverse proxy

Development environments can use reverse proxies to quickly resolve cross-domain problems

Principle:

• Cross-domain is a limitation of the browser, and the local server proxy destination server response can bypass the cross-domain limitation
• Webpack starts the local server, which is also the proxy server after the proxy is set. When sending a request to the local server, the same-origin policy is complied with.

Reverse proxy and forward proxy

• Reverse proxy, proxy server Proxy server responds; Forward proxy, proxy server proxy client request

• Reverse proxy: the client thinks that the proxy server is the destination server and does not know what the proxy server is acting for.

  In forward proxy, the server considers the proxy server to be the original sender. The proxy server determines whether to inform the server of the information about the client being represented.

Reverse proxy: users visit http://www.test.com/readme, www.test.com does not exist the readme page, he is secretly back from another server, and then as a return user content, but the user does not know. Here mentioned www.test.com this domain name corresponding to the server is set up the reverse proxy function.

Forward proxies: VPN, accelerators, and so on

The Cookie and Session

What are cookies and sessions? What’s their connection? What’s the difference between them?

Cookies are used on the client sideSession stateA storage mechanism. It is a small piece of text or a piece of data in memory stored by the server on the local machine and sent to the same server with every request.

Session is a server-side information management mechanism. It stores the file information in the form of files on the server’s hard disk space. (This is the default, and you can use memcache to store this data in memory).

When a client sends a request to the server to generate a session, the server first checks whether there is a session_id in the cookie of the client and whether it has expired. If sESSION_id is specified, the server will retrieve the session from the cookie. If there is no such session_id, the server will create one again. PHPSESSID is a string of cipher, which is generated according to certain rules. If the second session starts on the same client, the session_ID is different.

Differences: Cookies are stored in the client browser, while sessions are stored on the server. Whereas the Cookie mechanism identifies the client by checking the “pass” on the client, the Session mechanism identifies the client by checking the “client list” on the server. Session is equivalent to a client profile established by the program on the server. When the client visits, it only needs to query the client profile table.

Set-cookie and Cookie headers

attribute	instructions
NAME=VALUE	The name and value assigned to the Cookie (required)
expires=DATE	The validity period of the Cookie (default until the browser closes if not specified)
path=PATH	Set the file directory on the server as the applicable object for cookies (default is the file directory where the document resides if not specified)
Domin = domain name	The domain name to which the Cookie is to be applied (default is the domain name of the server that created the Cookie if not specified)
Secure	Cookies are only sent for HTTPS secure communication
HttpOnly	Restrict cookies from being accessed by JavaScript scripts
SameSite	Optional values: Strict, Lax, None;

• If you don’t set Expires, the cookie is a session cookie, which is stored in memory and deleted when the client closes.

• Path and domin are used to set the scope of the cookie;

  Cookies are also included in subdomains such as Domain=mozilla.org, developer.mozilla.org and the lowest level domain to the left of the domain name.

  Cookies are also included in subpaths such as Path=/docs and /docs/Web/HTTP

• HttpOnly prevents JavaScript from reading cookies, preventing cookie theft and cross-site scripting attacks (XSS)

• Setting up SameSite prevents cross-site forgery requests (XSRF)

  Strict completely prohibits third-party portability of cookies; Lax only allows links, preloaded requests, GET forms to be carried by third parties; None is not restricted, but takes effect only after Secure is set. The Samesite property of the Cookie

Https

What is Https?

HTTPS is the SSL layer added to HTTP. It establishes a secure information transmission channel and encrypts information to ensure the authenticity and integrity of data

How the Https protocol works

When the client communicates with the Web server in HTTPS mode, the following steps are performed.

1. If the client accesses the server using HTTPS URLS, the Web server must establish SSL links.
2. Upon receiving the client’s request, the Web server returns, or transmits, the site’s certificate, which contains the public key, to the client.
3. The client and the Web server begin to negotiate the security level, that is, the encryption level, of the SSL link.
4. The client browser establishes the session key based on the security level agreed upon by both parties, encrypts the session key using the public key of the website, and sends the session key to the website.
5. The Web server decrypts the session key using its private key.
6. The Web server encrypts the communication with the client through the session key.

More details:

Http-tls handshake protocol

Client Hello: The Client sends a Hello message to initiate a handshake. The Hello message contains the TLS protocol version, Client Random, Cipher Suite, and other information required by the Client

Server Hello: After receiving the Hello message from the client, the Server determines the final handshake type based on the encryption suite list provided in the message. Finally, a Server Hello message is returned to the client. The message contains the Server’s random number, the final list of encryption suites to be used, and the Server’s certificate (such as HTTPS certificate, which contains the public key generated by RSA and the Server’s domain name).

The client validates the certificate and generates a pre-master key: After the certificate sent by Server Hello is verified to be credible and the site belongs to the correct site, the Client will combine Client Random with Server Random. Pseudorandom Function is used to generate a pre-master secret, and the public key in the certificate is used to encrypt the pre-master secret, and the pre-master secret is sent to the server

The server uses the private key to decrypt and obtain the pre-master secret: After receiving the encrypted pre-master secret, the server uses the private key generated by RSA and paired with the public key to decrypt and obtain the same pre-master secret as the client

Generate Session key: At this time, the Client and Server get the same Client Random, Server Random and pre-master secret through the key exchange process, and the Client and Server can derive the same Session key respectively. Subsequent communications will use this Session key as the key of the AES_128_GCM for encryption and decryption

The client and server exchange encrypted handshake end messages and perform HMAC authentication: After the Session key is generated, the client and server use the Session key to encrypt the message body. The Finish message is exchanged once, indicating that the handshake is complete and both parties can normally use the Session key to transmit encrypted data. Also verify the integrity of the handshake phase with digital signature validation using HMAC in the Finish message

How does the browser verify the certificate?

The certificate chain

The certificates issued by a CA to a website are a chain of certificates, that is, one layer at a time. The certificates start from the root certificate and go to the subordinate CA. The last layer is the website certificate.

Why certificate chains? A website certificate is issued by a lower-level CA, and a lower-level CA’s certificate is issued by a regional CA. In this way, each layer leads to the root certificate.

To verify certificates, the browser needs to verify the authenticity of certificates at each level. The authenticity of a certificate at a certain level is guaranteed by the certificate at the next level.

Content of the certificate

The format of the certificate is specified, generally X509v3 protocol, can be divided into roughly three parts,

• Certificate signing
• The CA’s public key
• Other information to ensure the validity of the certificate

X.509v3 certificate consists of three parts:

TbsCertificate (to be signed certificate) indicates the certificate to be signed. SignatureAlgorithm, the SignatureAlgorithm. SignatureValue: indicates the SignatureValue. TbsCertificate contains 10 more items that are transmitted in plain text during the HTTPS handshake:

Version Number: Version Number. Serial Number: indicates the Serial Number. Signature Algorithm ID: INDICATES the ID of the Signature Algorithm. Issuer Name: indicates the Issuer Name. Validity period. Subject Name: indicates the name of the certificate principal. Subject Public Key Info: indicates the Public Key information of the certificate principal, including the Public Key algorithm and value. Issuer Unique Identifier (Optional) : indicates the Unique ID of the Issuer. Subject Unique Identifier (optional) : Indicates the Unique ID of the Subject. Extensions (optional).

Signature and verification

Signature dependent public key cryptography; A public key password has a key and a key, and only the key can be decrypted.

In the above SSL setup, we know that the client uses the public key in the certificate returned by the server to encrypt the session key, and then sends the encrypted ciphertext to the server, and the server decrypts it with the private key. In this case, the add key is the public key, and the solution key is the private key.

When signing, the issuer encrypts the certificate information by adding a key to generate the ciphertext. The ciphertext is the signature, and the certificate contains the signature, certificate information, and key. In this case, the add key is the private key, and the decrypt key is the public key.

After receiving the certificate, the browser uses the public key to decrypt the signature. Only the signature encrypted with the private key can be decrypted with the public key. Therefore, the browser can ensure the authenticity of the certificate. At the same time, verify the validity information, such as whether the certificate has expired, whether the issued information is consistent, and whether the authority has been revoked

In this way, the browser verifies the certificate layer by layer from the public key above, finally to the root certificate.

How is the highest level root certificate validated?

First, the top-level root certificate is self-signed, that is, issued to itself, so its public key is used not only to decrypt the underlying signature but also to decrypt its own.

Second, the root certificate is the last link in the verification certificate chain, but it is not stored in the certificate chain; The root certificate is stored in the trusted root certificate built in the operating system or browser. Because the root certificate is stored internally, its authenticity is endorsed by the browser and operating system.

HTTP2

Read about HTTP/2 features

Binary framing

Frame: the smallest unit of HTTP/2 data communication. Message: Refers to the logical HTTP message in HTTP/2. A message, such as a request and a response, consists of one or more frames.

Flow: A virtual channel that exists in a connection. Streams can carry bidirectional messages, and each stream has a unique integer ID.

Instead of the text format of HTTP 1.x, HTTP/2 transmits data in binary format, which is more efficient to parse. HTTP / 1 request and response packets are composed of the start line, header, and body (optional). Each part is separated by a newline character. HTTP/2 splits the request and response data into smaller frames, and they are encoded in binary.

In HTTP/2, all communication with a domain name is done on a single connection, which can host any number of bidirectional data streams. Each data stream is sent as a message, which in turn consists of one or more frames. Multiple frames can be sent out of order and reassembled according to the stream identifier at the beginning of the frame.

multiplexing

In HTTP/2, with binary framing, HTTP/2 no longer relies on TCP links for multi-stream parallelism. In HTTP/2:

• All communication with the domain name is done on a single connection.
• A single connection can carry any number of bidirectional data streams.
• The data stream is sent as a message, which in turn consists of one or more frames that can be sent out of order because they can be reassembled based on the stream identifier at the beginning of the frame.

This feature provides a significant performance boost:

• The same domain name only needs to occupy one TCP connection, eliminating the delay and memory consumption caused by multiple TCP connections.
• Requests and responses can be interleaved in parallel on a single connection without interfering with each other.
• In HTTP/2, each request can have a priority value of 31 bits, with 0 being the highest priority and larger numbers having lower priority. With this priority value, the client and server can adopt different policies when processing different streams to send streams, messages, and frames in an optimal manner.

The head of compression

HTTP 1.1 requests grow in size, sometimes even larger than the initial size of the TCP window, because they wait for the response to return with an ACK before they can continue to be sent. HTTP/2 uses HPACK (a compression format designed for HTTP/2 headers) to compress and transmit messages, which can save traffic on the network occupied by the headers. Each HTTP/1.x request carries a large amount of redundant header information, which wastes a lot of bandwidth resources.

• HTTP/2 uses a “header table” on both the client and server to track and store previously sent key-value pairs. The same data is no longer sent on each request and response.
• The header table exists throughout the lifetime of the HTTP/2 connection and is updated incrementally by both the client and the server.
• Each new header key-value pair is either appended to the end of the current table or replaces the previous value in the table.

Server push

The server can proactively push other resources when sending the HTML of the page, instead of waiting for the browser to parse to the appropriate location, make a request and then respond. For example, the server can proactively push JS and CSS files to the client without requiring the client to parse the HTML to send these requests.

The server can actively push, and the client has the right to choose whether to receive. If the server pushes a resource that has already been cached by the browser, the browser can reject it by sending an RST_STREAM frame. Active push also complies with the same-origin policy. The server does not push third-party resources to the client.

DNS Resolution Process

Explain the whole process of DNS domain name resolution

Browser cache -> system hosts -> LDS -> Root DNS-> gTLD -> Name Server

When a user enters www.taobao.com in the address bar, there are roughly ten processes for DNS resolution, as follows:

1. The browser first checks whether the IP address corresponding to the domain name has been resolved in its cache. If yes, the resolution is complete. The time for the domain name to be cached can also be set using the TTL attribute.

2. If it is not in the browser cache, the browser checks the operating system cache for a parsed result. The operating system also has a domain name resolution process. In Windows, you can use a file called hosts in drive C. If you specify an IP address for a domain name, the browser will use that IP address first. However, this operating system-level domain name resolution protocol has also been exploited by hackers to modify the contents of your hosts file to resolve specific domain names to their specified IP addresses, causing so-called domain name hijacking. Therefore, set the hosts file to readonly in windows7 to prevent malicious tampering.

   

3. If so far has not hit the domain name, will be the real request local domain name server (LDNS) to resolve the domain name, this server in your corner of the city, not far away from you, and this server performance is very good, generally caching DNS results, about 80% of the DNS here is done.

4. If the LDNS does not match the LDNS, the DNS Server directly jumps to the Root Server to request resolution

5. The root DNS Server returns the address of the primary DNS Server (gTLD Server, such as.com.cn. Org) of the queried domain to the LDNS

6. Then the LDNS sends a request to the gTLD returned in the previous step

7. The gTLD that accepts the request looks up and returns the address of the Name Server corresponding to this domain Name, which is the Name Server on which the website is registered

8. The Name Server finds the target IP address based on the mapping table and returns it to the LDNS

9. LDNS caches this domain name and its corresponding IP address

10. The LDNS returns the resolution result to the user, and the user caches the result in the local system cache according to the TTL value. The domain name resolution process is complete

The query from the client to the local DNS server is a recursive query, and the interactive query between DNS servers is an iterative query.

In recursive query, host 1 entrusts the query task to the delegating host 2, and host 2 entrusts the task to host 3, delegating layer by layer, and finally returning the same query result layer by layer; In iterative query, host 1 queries host 2. If host 2 does not have the cache, the next available host is returned. Host 1 then queries the next available host.

Analogy: suppose you are looking for a company you’ve never been there, you will have two solutions, one is to find a person to ask the way for you, it could be your assistant, 2 is to ask the way, through each intersection, ask a person, it’s like a recursive query and iterative queries, recursive query here represents your 1 kind of solution, and the iteration is 2 kinds of solutions.

CND

What is the CDN

A CDN is a content delivery network that uses the caching mechanism of HTTP to proxy requests from the corresponding clients of the source site.

• Content storage and distribution technology
• Load balancing
• Get content nearby

The principle of CDN

When the interviewer asks you to realize the principle of CDN how to answer, see this article thoroughly understand

On the CDN, back to the source and other issues

• dns
• Load balancing
• The cache

1. After the local DNS is resolved, the server to which the Cname refers is requestedDNS server dedicated to the CDN.
2. The DNS server returns the IP address of the GLOBAL load balancing server to the user
3. User requestGlobal load balancing server, the server returns the IP address of the load balancing server in the region to the user based on the IP address
4. User requestRegional load balancing server.Based on the user IP address, the load balancing server selects an IP address of a cache server that is close to the user, has the content required by the user, and has a suitable load for the user. When there is no corresponding content, it will go to the upper-level cache server, until the source server where the resource is located, and cached in the cache server, this process is calledBack to the source. The next time the user requests the resource, the cache is nearby.

The front security

XSS (Cross Site Scripting)

An XSS attack is when a malicious script is executed in a browser (whether across domains or in the same domain) to take the user’s information and act on it. Three types: storage, reflection, and document

Storage type

The server stores the malicious code on the server and executes it on the client.

Classic scene: comment area submit a script code, before and after the end of no escape, comment content saved to the database, in the page rendering process of direct execution, equivalent to the execution of an unknown logic JS code. This JS code logic unknown, may steal cookies, pop-up ads or more serious attacks.

reflective

Reflective XSS refers to malicious scripts as part of a network request. The attacker observes the request and finds a return value for an interface that will be inserted into the DOM and

Parameters, such as

http://juejin.com?q=<script>alert("game over")</script>
Copy the code

If the browser does not process the q parameter when it is inserted into the DOM, the browser will execute it directly.

Unlike the storage type, the server does not store these malicious scripts.

The document type

The document TYPE XSS attack does not pass through the server, but acts as a middleman, hijacking the network packet during the data transmission and modifying the HTML document inside.

Such hijackings can include WIFI router hijacking or local malware

To guard against

• User input cannot be trusted, and both the client and server must escape characters uploaded by the user

• Enable the Cookie httpOnly attribute to prevent js from reading cookies

• CSP browser content security policy

  Content Security Policy(CSP) Usage of browser Content policies

  CSP stands for content security policy, which essentially creates a whitelist that tells browsers what external resources can be loaded and executed. We just need to configure the rules, and it’s up to the browser to do that.

CSRF(Cross-site Request Forgery)

The attacker induces the user to open his or her web page and uses the fact that the user is already logged in to the site to send cross-site requests to the site

Such as < img SRC = “https://xxx.com/info?user=hhh&count=100” >

The cross-domain policy does not block requests for IMG, form, script tags. The request will automatically contain cookie information about xxx.com (assuming you are already logged in to XXx.com).

If the server side does not have the corresponding authentication mechanism, it may think that the request is a normal user, because of the corresponding cookie, may perform a variety of malicious operations.

To guard against

• If the SameSite value of Cookie is Strict, the request from a third party to a site is completely prohibited from carrying the site’s Cookie

• CSRF token

  When the browser sends a request to the server, the server generates a string that is embedded in the returned page.

  Then the browser must send a request with this string, and the server will verify that it is valid, and not respond if it is not. So this string right here is going to beCSRF TokenUsually, the third-party site cannot get the token and is therefore denied by the server.

The browser

Parsing the page

• Rendering Flow (part 1) : How do HTML, CSS, and JavaScript become pages
• Rendering Process (PART 2) : How do HTML, CSS, and JavaScript become pages
• Layering and Composition Mechanisms: Why CSS animations are more efficient than JavaScript

HTML parsing

Inside the rendering engine, there is a module called THE HTMLParser, which is responsible for converting HTML byte streams into DOM structures.

The analysis is divided into three stages

• Byte flow is token

  The token is the token of the tag, just like the parenthesis match, different tokens of the opening tag are similar to different types of open parenthesis

  

• matching

• add

  As the tag token matches successfully, more nodes are added to the DOM tree

CSS analytical

CSS source:

• External CSS files referenced by link<style>
• The style of the CSS element inside the tag
• Property embedded CSS

CSS content is also not understood by browsers and needs to be translated into structures – styleSheets – that browsers can understand

Style calculation

After styleSheets are generated, you need to compute the specific style of each element in the DOM node.

• Transform the attribute values in the style sheet to standardize them

  There are many synonyms in CSS, such as blue and rgba(0,0,255); Standardization is the conversion of all values into standardized computed values that are easily understood by the rendering engine

  

• Calculate the specific style of each node in the DOM tree

  • Inheritance rules

  • Cascading rules

    

The final output of this phase is the style of each DOM node and is stored inComputedStyleWithin the structure of.

Creating a layout tree

After finishing the style calculation, you need to calculate the geometric positions of the visible elements in the DOM tree, a process called layout.

• Walk through all the visible nodes in the DOM tree and add them to the layout tree.
• Invisible nodes are ignored by the layout tree, such as everything below the head tag, and the element body.p.pan, which has a dispaly: None attribute, is not included in the layout tree

Layout calculation

With the layout tree created, it’s time to calculate the layout.

• Create layer Tree
• Generate a draw list for each layer

RenderLayer Tree

For more details on render layers, compositing layers, etc

• High Performance Web Animation and Rendering Principles Series (2) – Rendering pipeline and CPU rendering
• High Performance Web Animation and Rendering Principles (3) — Why Transform and Opacity are High performance
• Principles of High Performance Web Animation and Rendering series (5) Synthesis layer generation conditions and pitfalls
• Browser rendering process &Composite (rendering layer combination) simple summary

The creation of a rendering layer?

• Have a cascading context
• Elements that need to be clipped

Cascading context

Cascading context [MDN]

Elements that have a cascading context are singled out as a single layer. This is only valid if z-index is set on the cascading context

The BFC definitely creates a cascading context

The conditions are as follows (only common CSS properties are listed) :

• The document root element (<html>);
• position 为 absolute relative.z-indexValues are not forautoThe element;
• positionA value offixedorsticky(viscous positioning) of elements
• Flex container child element, andz-indexValues are not forauto; grid (grid), andz-indexValues are not forauto;
• opacityAttribute value less than1The element;
• The transform, filter,Elements that are not None

In a cascading context, child elements are also cascaded according to the rules explained above. Importantly, the z-index value of the child cascading context is only meaningful in the parent. The child cascading context is automatically treated as a separate unit of the parent cascading context.

Conclusion:

• Cascading contexts can be contained within other cascading contexts and together create a hierarchy of cascading contexts.
• Each cascading context is completely independent of its siblings: only child elements are considered when dealing with cascading.
• Each cascading context is self-contained: when the contents of an element are cascading, that element as a whole is cascading in order within the parent cascading context.

tailoring

<style>
      div {
            width: 200;
            height: 200;
            overflow:auto;
            background: gray;
        } 
</style>
<body>
    <div >
        <p>So elements that have attributes of cascading context or need to be clipped are promoted to a single layer, as you can see below:</p>
        <p>As you can see from the image above, there are A and B layers on top of the document layer, and two layers above the B layer. These layers are organized together in a tree structure.</p>
        <p>The LayerTree is created based on the layout tree. To find out which elements need to be in which layers, the rendering engine updates the LayerTree by traversing the layout tree.</p> 
    </div>
</body>
Copy the code

When this cropping occurs, the rendering engine creates a separate layer for the text section, and if the scrollbar is present, the scrollbar is also promoted to a separate layer.

Composite layer

The composition layer is promoted from the rendering layer, and the processing of the composition layer is dependent on hardware acceleration (i.e. GPU).

A render layer that is not promoted to a compositing layer belongs to the same compositing layer as its nearest ancestor.

It is divided into explicit promotion and implicit promotion

According to ascend

The following conditions are met to be promoted to the synthesis layer

• withCSS3DAttributes, orCSSPerspective effect
• Using theCSSTransparent effect orCSSDeformation of the animation
• It uses hardware accelerationCSS Filterstechnology
• Clipping is usedClipOr reflectionReflectionAnd its descendants contain a synthesis layer
• It has a sibling node whose Z coordinate is smaller than its own, and that node is a composition layer.

Implicit ascension

The RenderLayer is promoted to a CompositingLayer when certain conditions are met, which is more manageable for developers. However, in addition to this, there is the condition of implicit compositation in the browser’s compositation phase, where the compositation layer is present in certain scenarios that are not intended by the developer.

Implicit synthesis mainly in element overlap, lower level elements if layer was promoted to synthesis, the final synthesis results may appear in the original is higher than oneself level elements, thus there is an error stack relationship, in order to correct this kind of relationship, can only let originally high level (but not promoted to synthesis of layer element) happen ascension also become a composite layer.

This implicit synthetic actually hides a huge risk, if in a large application, when a z – index lower element was promoted to separate layer after layer on it all elements will be promoted as a separate layer, may add thousands of layer and greatly increases the pressure of the memory, even collapse directly to the page. That’s how a layer explosion works.

View the layer-related results in the Layers function of Chrome’s debug panel to see which Layers have been improved and why, so as to avoid layer improvements that are against your intent:

Draw instruction list

Each layer generates a list of draw instructions that the compositing thread does

Synthesis of the thread

• The compositing thread divides the layer into blocks and converts the blocks into bitmaps in the rasterization thread pool.

  Generally, the page is larger than the viewport, the composition thread will not draw the whole page, but the page is divided into blocks, preferentially select the viewport near the drawing block; The block size is not very large, usually 256 * 256 or 512 * 512.

  A rasterization thread pool is maintained in the rendering process to convert blocks into bitmaps.

  The composite thread selects the block near the viewport and gives it to the rasterized thread pool to generate the bitmap.

  The bitmap generation process is accelerated using the GPU, and the bitmap is sent to the compositing thread.

• The compositing thread sends the DrawQuad command to the browser process.

• The browser process generates the page from the DrawQuad message and displays it on the monitor.

Reflux, redraw, and layout?

A frame is generated in three ways: rearrangement, redrawing and synthesis. The former of these three implies the latter: rearrangement must redraw, redraw must synthesis.

• Rearrangement: Changes to element width, height, positioning, etc., resulting in the need to regenerate the layout tree
• Redraw: Changes element color, background color, etc., resulting in the need to regenerate the draw list
• Synthesis: CSS3transform,opacity,filterProperties, which do not need to be rearranged or redrawn, perform well

How does CSS and Javascript affect parsing

Since parsing is single-threaded, when a script tag is encountered during parsing, it executes the contents of js. If the JS is imported, it waits for the download to complete before executing. Because the JS execution may manipulate the previous CSS styles, if there is a previous CSS download to be downloaded, it will wait for the CSS download to be parsed

What’s the difference between async and defer in the script property?

When two properties are not written: Building the DOM to execute to the script tag blocks until the script content is downloaded and finished executing.

Async: asynchronous download. After the download is complete, script content is executed immediately

Defer: Download asynchronously and wait until the DOM is built before executing the script’s contents

The following picture illustrates the three differences

So the difference is in the timing after the load is complete

Note that if there are multiple script tags containing async, the sequence of script execution is unpredictable

A memory leak

Js memory leak scenarios, monitoring, and analysis

What is a memory leak?

Memory leak simple understanding: useless memory is still occupied, can not be released and returned. In severe cases, unused memory will continue to increase, causing the entire system to stall or even crash.

How to prevent memory leaks?

• Prevent unexpected global variables

  // Define in global scope
  function count(number) {
    // basicCount = window.basicCount = 2;
    basicCount = 2;
    return basicCount + number;
  }
  Copy the code

• Forgotten timer/event listener

  For example, setInterval/ addEventListener in vue will remain in memory for execution/listening if it is not cleared before the component is destroyed, and the memory involved will not be reclaimed

• Closures: Don’t use closures when you don’t need them because they take up relatively more memory, and because they keep free variables when not in use and can’t be reclaimed

• There are no Dom elements that are referenced in JS

  var button = document.querySelector('#button'),
  document.body.removeChild(button)
  // button = null
  Copy the code

  In the example above, the button element is removed from the page, but the memory point is changed to button, so the memory footprint is still there. Button = null to manually free the memory.

How do I monitor and troubleshoot memory leaks?

• In the browser debugger performce option, turn on the monitor memory, the ladder rise is a memory leak

  

• Analyze the snapshot to find the memory leak

  

The garbage collection

Garbage collection: How is garbage data automatically collected

Stack recovery

When a function finishes executing, ESP moves down to reclaim the execution context, because the new context will directly override it

Pile of recycling

Intergenerational hypothesis

• Most objects live in memory for a very short time. Simply put, many objects become inaccessible very quickly once memory is allocated
• Objects that do not die live for a long time, such as window, document, and global objects under window

So the hypothesis divides the heap into two regions: Cenozoic and old. The new generation stores objects with a short lifespan, and the old generation stores objects with a long lifespan.

The Cenozoic volume is small (1-8m) and the old generation is large.

The garbage collector is divided into the main garbage collector and the deputy garbage collector, the main garbage collector is responsible for the old generation of recycling, the deputy garbage collector is responsible for the new generation of recycling

Garbage collection process

Generally, garbage collection is divided into three stages

1. The tag. Distinguish between live objects and inanimate objects, which are objects that can be garbage collected.
2. Cleared. The object marked as reclaimable is cleared from memory after the tag
3. Memory sorting. In general, after the frequent reclamation of objects, there will be a large number of discontinuous memory space, these memory space is called memory fragmentation. The garbage collector needs to organize the memory to ensure that it can allocate a large enough contiguous memory space.

Secondary garbage collector

• Mainly responsible for garbage collection in freshmen area.

• New objects are stored in the object area. When the object area is nearly full, a garbage cleaning operation is required.

• Scavenge algorithm is adopted

  New generation can be divided into object area and leisure area, the new object will be added into the object area, when the object area to full a garbage clean-up operation: first of all to mark of garbage, tag vice garbage collector will survive after the completion of the object according to the natural order of copy into the leisure area (there is no memory fragments), after the final object area and the idle role reversal. The role reversal operation can make the two areas used indefinitely

• Object promotion strategy: Objects that survived two garbage collection operations will be placed in the old zone

Main garbage collector

The objects in the old area have two characteristics, one is that the object occupies a large space, the other is that the object lives for a long time. Due to the large size of the objects in the old zone, if you want to use the Scavenge algorithm to recycle these large objects in the old zone, it will take more time to copy these large objects, resulting in low efficiency of recycling execution, and half of the space will be wasted.

Therefore, the main garbage collector uses the mark-sweep algorithm for garbage collection.

Multiple execution of the mark-clean algorithm on a piece of memory can result in a large number of discontinuous memory fragments. However, too much fragmentation will lead to insufficient contiguous memory allocation for large objects, so another algorithm, mark-compact, is developed. The marking process is still the same as that in the mark-clean algorithm, but the next step is not to clean up the recyclable objects directly. Instead, all the living objects are moved to one end, and the memory outside the end boundary is cleaned up.

Mark-sweep

The first is the tag process phase. The marking phase starts from a set of root elements and recursively traverses the set of root elements. During the traversal process, the elements that can be reached are called active objects, and the elements that cannot be reached can be judged as garbage data. Such as

function foo(){ 
    var a = 1 
    var b = {name:"Geek State"} 
    function showName(){  
        var c = 2  
        var d = {name:"Geek Time"} 
    } 
    showName()
    }
foo()
Copy the code

When the showName() function exits, the call stack and heap space for this code look like this: As you can see from the figure above, when the showName function finishes, ESP moves down and points to the context of foo. If you walk through the call stack, you won’t find a variable that refers to address 1003. This means that 1003 is junk data and is marked red. Since the 1050 block is referenced by the variable b, it is marked as an active object. So that’s the rough marking process.

Incremental tag

The js garbage collection also runs on the main thread, which suspends js execution until a collection is complete. A js pause caused by a complete garbage collection is called a full pause.

If the data in the heap is large and the full pause time is long, the performance and responsiveness of the application can deteriorate.

In order to reduce the lag caused by the old generation of garbage collection (the new generation is smaller and less affected by total pauses), V8 divides the tagging process into sub-tagging processes, alternating garbage collection tags with JavaScript application logic until the tagging phase is complete. We call this the Incremental Marking algorithm.

The subtasks of garbage collection are interspersed in the execution of JS, so that the user will not feel the page freezes due to garbage collection.

storage

SessionStorage

• Synchronization, which blocks execution of the main thread.
• Generally used to store temporary small amounts of data.
• SessionStorage is tag level, follows the lifetime of the tag, and clears data as the tag is destroyed.
• It can only store strings and has a size limit of about 5MB.

LocalStorage

• Synchronization, which blocks execution of the main thread.

• localStorageAs long as the same protocol, the same host name, the same port, you can read/modify to the same localStorage data.

  Because of the security policy of the browser, the localstorage is not cross-domain, nor can the child domain name inherit the localstorage data of the parent domain name, which is very different from the cookie.

• localStorageIn theory, it is permanent, meaning it will not disappear unless it is actively emptied

• It can only store strings and has a size limit of about 5MB.

IndexedDB

The operation of Indexed DB is asynchronous and does not block the execution of the main thread. It can be used in Windows, Web Workers, and Service Workers environments.

IndexedDB is based on file storage, and the API is complex, including v1 and V2 differences. It is recommended to use the library, such as dexie.js.

The framework

Vue

Vue source learning

What is MVVM?

Model-view-viewmodel. Model represents the data Model layer. The ViewModel is the bridge between the View and Model layers. Data is bound to the ViewModel layer and automatically rendered to the page. The ViewModel layer is notified to update data when the view changes.

Life cycle of Vue

When is it called?

• BeforeCreate: Called after instance initialization and before data observation
• Created: called after the instance is created. Instance completion: data observation, operation of attributes and methods,watch/eventEvent callback. There is no$el .
• BeforeMount: called before mounting, relatedrenderFunction is called for the first time
• Mounted: Was newly createdvm.$elReplace, and call the change hook after mounting the instance.
• BeforeUpdate: Called before data update, which occurs after the virtual DOM is rerendered and patched, and after which the change hook is called.
• Updated: The virtual DOM is rerendered and patched due to a data change, after which the change hook is called.
• BeforeDestroy: Called before the instance is destroyed, the instance is still available.
• All event listeners and all child instances will be removed from the Vue instance. You will see that the Vue instance is destroyed and all the event listeners will be removed from the Vue instance

Update order of parent and child components

Parent beforeCreate -> parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> Child Mounted -> parent

Child component update process:

Affects the parent component: parent beforeUpdate-> child beforeUpdate-> child Updated -> parent updated

Does not affect the parent component: child beforeUpdate -> child updated

Vue communicates across components

• props
• Use of parent and child components$parent, $children
• Use $ref to specify a component
• vuex
• Inject, you can inject data into deeper components
• Bus Event Bus, using the $on interface of a Vue instance

How does VUE implement responsive data? (Responsive data principle)

Vue2: object.definProperty redefines all attributes in data. Object. DefinProperty can make data acquisition and setting add a intercepting function, intercepting the acquisition of attributes, and collecting dependencies. Intercepts updates to properties for notification. Specific process: First Vue uses initData to initialize the parameters passed in by the user. Then it uses a new Observer to observe the data. If the data is of an object type, it calls this.walk (value) to process the object. DefineReactive loop Object attributes are used internally to define responsive changes. The core is to redefine data using object.definProperty.

How does vUE detect array changes

• Each item in the array is defined responsively by the Oberserver class.

• Replace the stereotype with another stereotype that overrides methods that can change the array in order to listen for changes (function hijacking)

Bidirectional binding and related principles

What is two-way binding to answer? I have always had questions in my mind, and the answers on the Internet are uneven: some only answer the response part, some only answer the process of notification and update, and some answer the whole process of VUE with nearly 1,000 words in length.

What is two-way binding? Bidirectional binding means that views and data are updated synchronously. Specifically, v-Model, which is the syntactically sugar of vUE, is essentially the syntactically sugar of value’s unidirectional binding and onInput/OnChange event listening.

So in fact, we still need to clarify the one-way binding, and add the point to listen for events.

One-way binding

Mainly: data hijacking and template compilation

• When the Vue file is exported, the template is compiled into the render function. The return value of the render function is the virtual DOM of the corresponding template.

• In the CREATE phase, Vue converts data into responsive data. Reactive data has a Dep instance for each attribute (including the deep attribute) and is set to get and set to hijack the data.

  When a watcher accesses a property for the first time, the get function is called and the watcher is collected into an array of watcher inside the Dep instance. When the data changes, the set function is called, corresponding to the Dep instance, to notify all watcher in the watcher array

• In the moute phase, Vue new a Watcher that listens to the VM instance and calls render’s functions internally; During the process of calling Render to generate VDOM, watcher accesses the data bound on the template for the first time, and is added to the watcher array of Dep corresponding to each data

• When data changes, set is called, and the corresponding Dep instance tells all watcher in its array to update their views

That should be enough for one-way binding. The process is to update the view details

• NextTick collect watcher
• Watcher calls Update to generate a new VDOM
• Diff algorithm compares the old and new VDOMS
• The real DOM is updated during patch

Plus the v-model principle

Parent v-model listens for onInput/onChange,

The subcomponent fires the onInput/OnChange event and sends the value out,

The parent triggers a callback to assign the incoming value to the bound data

The bidirectional binding between the view and the data synchronization update is implemented.

A more comprehensive answer

• Reactive: recursive traversal of the data object to be observed, including the attributes of the sub-attribute object, set and get property methods; When a value is assigned to this object, the binding’s set property method is triggered to listen for changes in the data.
• Template compiling bound data: parse template instructions with compile, replace variables in the template with data, and then initialize the render page view, bind the corresponding node of each instruction to update functions, add subscribers to listen for data, once the data changes, will be notified, and update the view.
• Notification update process: Watcher subscribers bridge the communication between Observer and Compile: add themselves to the attribute subscriber DEP when they instantiate themselves; It must have an update() method; When dep.notice() publishes a notification, it can call its own update() method and trigger the callback function bound in Compile.
• MVVM and bidirectional binding: MVVM is the entry point of data binding. It integrates Observer, Compile and Wathcher. It listens to its own model data changes through Observer, and parse template instructions through Compile. Finally, Watcher is used to build a communication bridge between Observer and Compile to achieve the effect of notifying view update of data changes. View interaction is used to change and update the bidirectional binding effect of model data.

Principles of Slot and slot-scope

We know the vue template will be compiled into render function finally understand the vue render function (a) -_ – | | |

{...props: ['message'].render: function (createElement) {
  // The original vue template '
      

       
', below is the compile of the render function
  return createElement('div'[// An object is passed in. That's why the document says you can use destructuring
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}
...
}
Copy the code

Slot is an array of VNodes that the parent component mounted to the child component. For example: ‘v−slot:foo’ the contents of ‘VNode. Slot is an array of Vnodes that the parent component mounted to the child component, for example: The contents of ‘v-slot:foo’ will be found in ‘VNode. Slot is an array of vnodes that the parent component mounted to the child component. For example:’ v−slot:foo ‘will be found in’ vm.slots.foo ‘

$scopedSlots is mounted from a parent component to a child component. The difference between $scopedSlots and $scopedSlots is that it is a function that returns an array of VNodes. The data passed in is the argument passed by the child component when it calls the scope slot.

What is a Virtual Dom? What are the advantages?

A Virtual Dom is a JS object that simulates the Dom. It has a one-to-one mapping relationship with the Dom.

• The virtual DOM does not perform typesetting and redrawing operations immediately

• The virtual DOM is frequently modified, and then the parts that need to be modified in the real DOM are compared and modified at one time. Finally, typesetting and redrawing are carried out in the real DOM to reduce the loss of excessive DOM node typesetting and redrawing

• Virtual DOM can effectively reduce the redrawing and typesetting of a large area of the real DOM, because the final difference with the real DOM can only render part.

• Virtual DOM provides cross-platform capabilities, such as UniApp, Taro, react Native, etc. Virtaul DOM can internally process components of different platforms. For example, Vue provides interfaces for custom adapters

  Render Vue to an embedded LCD screen

How does nextTick work?

NextTick: MutationObserver is just a cloud, microTask is the core!

In a macro task round, the Watcher is collected in a Watcher array after being notified of changes, and other external nextTick callbacks are collected in the nextTick callback queue.

At the end of a round of macro tasks, Vue pushes the function that executes the nextTick callback queue into the microtask (using promise.then or mutationObserver), The first callback performs a function that iterates over the Watcher array to update the corresponding DOM, followed by the nextTick callback from the external collection, so it guarantees that the nextTick callback from the external collection must be executed after the DOM update.

Principle of diff algorithm

Update Dren needs to be illustrated to understand. Please see vue’s DIff algorithm in detail. It is recommended to write the following examples by hand.

patch

Enter the old and new root nodes of a component (patch) and compare them for the same (sameNode).

If the new node is the same as the new node, the patchNode will continue to compare their child nodes. If not, create a new DOM node to replace the old DOM.

patchVnode

• Old and new only text, replace the text

• If oldVnode has children and Vnode does not, delete the children of EL

• If oldVnode does not have children and Vnode does, the children of Vnode are added to el after they are actualized

  Text replacement, old new no delete, old no new add

• If both have child nodes, executeupdateChildrenFunction to compare child nodes

UpdateChildren (main algorithm)

This function is the most central function in the Diff algorithm. The purpose is to reuse existing nodes as much as possible

• willVnodeThe child nodes of theVchandoldVnodeThe child nodes of theoldChextracted
• oldChandvChWe have two heads and two tailsStartIdxandEndIdx, their two variables are compared with each other, and there are four ways to compare. If none of the 4 comparisons match, if setkey, you will usekeyWe compare, and in the process of comparing, the variable will move to the middle, onceStartIdx>EndIdxShow thatoldChandvChIf at least one of them has been traversed, the comparison will end.

OldS, oldE, S and E do sameVnode comparison in pairs, and there are four comparison methods. When two of them can match, the corresponding node in the real DOM will be moved to the corresponding position of Vnode

• If oldS and E match, then oldS ‘real DOM will be moved to the end

• If oldE and S match, the last node in oldE’s real DOM is moved to the top

  And the cursors on both sides are going to go in

• If none of the four matches is successful, then the oldChild is traversed and S matches them one by one. If the match succeeds, the successful node will be moved to the first place in the real DOM. If the match still fails, the node corresponding to S will be inserted into the corresponding oldS position in the DOM. The oldS and S Pointers move toward the center.

Vuex

Scenarios using Actions

Mutation The only way to change the state in Vuex’s Store is to submit the Mutation. Mutations in Vuex are very similar to events: each mutation has an event type (type) of a string and a callback function (handler). This callback function is where we actually make the state change, and it takes state as the first argument

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // Change the status
      state.count++
    }
  }
})
Copy the code

Action Action is similar to mutation, except that:

• The Action commits the mutation instead of directly changing the state.
• An Action can contain any asynchronous operation. .

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')}}})Copy the code

• An asynchronous COMMIT is not required in actions
• An asynchronous commit does not necessarily need to be placed in actions. You can commit a component after asynchronous logic

The main purpose of actions is to encapsulate logic.

For example, if a logon state change logic is used by different components, placing the logon state request into actions along with the change state is a good option

const actions = {
  async login({ commit }, userInfo) {
    const loginResult = await login({
      userName: userInfo.username,
      pwd: userInfo.password,
      verifyCode: userInfo.verifyCode
    })
    if (loginResult.code === 1) {
      commit('SET_LOGIN_STATUS'.true)}return loginResult
  }
}  
Copy the code

Vue Router

The difference between hash mode and History mode

• Hash mode by changing the hash#After the path string, combine the browser to provideonhashchangeListen for route changes; In addition, after the hash mode is refreshed, the requested page is still in the root path. After the return, the front end redirects the page through the path string
• The History mode is removed#, takes advantage of the new pushState() and replaceState() methods in the HTML5 History Interface, which do not immediately send requests to the back end when the user moves forward or back on the page;But when the page is refreshed, the browser requests the server at the current URL, which results in a 404 if the server is not configured. The solution is for the server to redirect to index.html by default if the path cannot be matched

What are router and route respectively?

A router is an instance of VueRouter. It is a global routing object, including route hop methods and hook functions. Route is routing information object | | jump route objects, each object of a route is a route, is a local object that contains the path, params hash, query, fullPath, matched, routing information parameters such as the name

How to pass parameters?

• Params

  Only name can be used, but path cannot be used. The parameter will not be displayed in the path, and the parameter will be cleared when the browser forcibly refreshes.

• Query:

  The parameter will be displayed on the path, the refresh will not be cleared, the name can use path path.

What is a navigation hook? What are its parameters?

Parameters: Have to (outgoing route), FROM (outgoing route), next (can change or interrupt navigation in beforeEach)

• Global hooks:

  • Router.beforeeach (to,from,next),next must be called function: judge interception before jump.
  • Router-.afereach (to,from) has no next hook and does not change the navigation itself

• Hooks within a component

  • BeforeEnter when configuring routes, the parameters are the same as the global hook

• Separate routes to exclusive components

  const Home = {
    template: `<div></div>`.beforeRouteEnter(to, from, next){
      // Called before the rendering component's corresponding route is confirmed
      // Cannot get the component instance 'this' because the component instance was not created before the guard executed
    },
    beforeRouteUpdate(to, from, next){
      // called when the current route has changed but the component is being reused
      // For example: for a dynamic parameter path /home/:id, jump between /home/1 and /home/2
      // Since the same Home component will be rendered, the component instance will be reused and this hook will be called in this case.
      // Can access component instance 'this'
    },
    beforeRouteLeave(to, from, next){
      // called when navigating away from the corresponding route of the component
      // Can access component instance 'this'}}Copy the code

Keep alive – components

Keep-alive is an abstract component: it does not render a DOM element itself, nor does it appear in the parent component chain; When dynamic components are wrapped with keep-alive, inactive component instances are cached rather than destroyed.

Include defines a cache whitelist. Keep-alive caches the components that are hit. Exclude defines the cache blacklist. The component that is hit will not be cached. Max defines the upper limit of the cache component, beyond which the cached data is replaced with a policy of LRU (longest unused content).

Keep-alive a scenario is used in conjunction with router-view

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
    <Footer />
  </section>
</template>
Copy the code

Keep alive – principle

Implementation principle of keep-alive

• Cache list

  Step 1: Get the first child component object wrapped by keep-Alive and its component name;

  Step 2: Match the conditions according to the set blacklist and whitelist (if any), and decide whether to cache. If no, return the VNode instance. Otherwise, go to step 3.

  Step 3: Generate the cache Key based on the component ID and tag, and look in the cache object to see if the component instance has been cached. If so, retrieve the cached value and update the position of the key in this.keys (updating the position of the key is key to implementing the LRU replacement policy), otherwise go to Step 4.

  Step 4: Store the component instance in this. Cache object and the key value. Then check whether the number of instances in the cache exceeds the Max value.

  Step 5: Last but not least, set the keepAlive property of this component instance to true.

• Patch phase

  • When the wrapped component is first loaded bykeep-alive.jsIn therenderSo the function,vnode.componentInstanceThe value isundefined.keepAliveThe value istrueBecause the keep-alive component acts as the parent component, itsrenderFunctions are executed before the wrapped component; So just execute toi(vnode, false /* hydrating */), the logic behind is no longer executed;
  • When the wrapped component is accessed again,vnode.componentInstanceThe value of is the cached component instance, and the execution is performedinsert(parentElm, vnode.elm, refElm)This inserts the last DOM directly into the parent element.

Vue and React

The similarities between Vue and React

• The virtual DOM + Diff algorithm is used to implement the virtual DOM + Diff algorithm
• It’s all about componentization
• Both are responsive, advocating one-way data flow
• Both support server-side rendering

Vue template/ React JSX -> render function -> generate VNode -> compare the new and old VNode diff -> diff algorithm, and really update the real DOM.

The difference between Vue and React

In my experience

• The difference in hook writing thinking is that the code is written around the state (though Vue3 does this too)

• Vue automatically notifies the UI of changes when data changes. React needs to manually declare changes

• Vue is mixins, whereas React, because components are functions, can be passed to other components to achieve a higher-order component HOC effect

• Vue is a template and React is JSX. JSX can be treated as a variable, which makes templates in React more reusable

• Listen for differences in data

  • Vue can use getters, setters, and other functions to hijack the data accurately, without special optimization to achieve good performance

  • React works by default by comparing references, which can result in a lot of unnecessary VDOM rerendering if not optimized

• Vue uses variable data, whereas React emphasizes immutable data

• .

engineering

Front end modularization

Front-end Modular detail (full version)

• Immediate Invoke function Expression (IIFE) Executes functions immediately

• CommonJS server modularity specification

  • The basic function of the require command is to read in and execute a JavaScript file, and then return the module’s exports object.

    module.exports.x = x;
    module.exports.addX = addX;
    
    var example = require('./example.js');// If the parameter string starts with a period (./), a relative path is loaded
    console.log(example.x); / / 5
    console.log(example.addX(1)); / / 6
    Copy the code

  • The input returns the same value as the function, just a copy of the value

• AMD browser specification for asynchronous loading modules

• The CMD browser specification combines AMD and CommonJS, implemented by sea-.js

• ES6 modular

  • ES6 modules are designed to be as static as possible, so that the dependencies of the module and the variables in and out of the module can be determined at compile time. Both CommonJS and AMD modules can only determine these things at run time. For example, the CommonJS module is an object, and you must look for object properties when you input.

• The CommonJS module outputs a copy of the value, and the ES6 module outputs a reference to the value.

  • The CommonJS module is a runtime load, and the ES6 module is a compile-time output interface.

• An ES6 module is not an object; its external interface is a static definition that is generated during the static code parsing phase.

webpack

What is Webpack?

Webpack is a static module packaging tool. In Webpack’s view, all resources in a project are modules, and resource dependencies are used to correlate modules. Simply put: WebPack packages multiple module files that have dependencies to produce resources that the browser can run directly and efficiently. Start with the entry file, use recursion to find all modules directly or indirectly dependent, build an internal dependency graph that maps all modules required by the project, and do WebPack packaging to generate one or more bundle files.

Loader and the plugin

Loader: A module converter. Webpack treats all files as modules, but WebPack can only parse JavaScript files. Loader gives WebPack the ability to load and parse non-javascript files.

Plugin: Inject extension logic at specific times in the WebPack build process to give it more flexibility. During the life of WebPack, a number of events are broadcast, and the Plugin can listen for these events and change the output when appropriate using the apis provided by WebPack.

What are bundle, chunk, module?

Bundle: a file packaged from webpack. Chunk: a block of code. A chunk is a combination of modules used to merge and split code. Module: a single module under development. In the world of WebPack, everything is a module. A module is a file.

Commonly used loader

• Styler-loader: Injects CSS code into JavaScript and loads the CSS using DOM operations.
• Css-loader: loads the CSS and supports features such as modularization, compression, and file import
• sass-loader
• Postcss-loader Completes the CSS compatibility prefix
• Babel-loader: converts ES6 to ES5
• vue-loader
• Source-map-loader: Loads additional source-map files for breakpoint debugging
• ts-loader

The plugin is commonly used

• clean-webpack-plugin: Deletes the package file
• html-webpack-plugin: simplifies HTML file creation (depends on HTml-loader)
• CompressionWebpackPlugin: Enable gZIP compression during packaging
• SplitChunksPlugin: Extract common code and split code
• HotModuleReplacementPlugin: Hot replacement module
• happypack: to achieve multithreaded accelerated compilation

How WebPack’s hot update works

Thoroughly understand and implement the webPack hot update principle

Hot update, also known as Hot Module Replacement (HMR), is based on Webpack-dev-server.

The web page of the browser establishes a long connection with the server through the Websocket protocol and listens for the changes of local files.

When the CSS/JS/HTML of the server is modified, the server will send an update message to the forward end. If the CSS or HTML is changed, the web page performs JS to directly operate the DOM and partially refresh. If the JS is changed, only the whole page can be refreshed.

Webpack optimizes performance

Optimizing front end performance with WebPack means optimizing the output of WebPack so that the packaged end result runs quickly and efficiently in the browser.

• Gzip compression will – webpack – the plugin

  new CompressionWebpackPlugin({
              filename: '[path].gz[query]'.algorithm: 'gzip'.test: new RegExp(
                '\ \. (' + productionGzipExtensions.join('|') + '$'
              ),
              threshold: 10240.// Only resources larger than this value will be processed
              minRatio: 0.8.// Only resources whose compression ratio is less than this value will be processed
              deleteOriginalAssets: false // Delete the original file
            })
  Copy the code

• Route lazy loading import(/*webpackChunkName: ‘xx’* ‘yourpath’/) Dynamically introduces syntax

  const Foo = () = > import(/* webpackChunkName: "group-foo" */ './Foo.vue')
  const Bar = () = > import(/* webpackChunkName: "group-foo" */ './Bar.vue')
  const Baz = () = > import(/* webpackChunkName: "group-foo" */ './Baz.vue')
  Copy the code

• Split the code and extract the common module SplitChunksPlugin

  config.optimization.splitChunks({
          chunks: 'all'.cacheGroups: {
            libs: {
              name: 'chunk-libs'.test: /[\\/]node_modules[\\/]/,
              priority: 10.chunks: 'initial' // only package third parties that are initially dependent
            },
            elementUI: {
              name: 'chunk-elementUI'.// split elementUI into a single package
              priority: 20.// the weight needs to be larger than libs and app or it will be packaged into libs or app
              test: /[\\/]node_modules[\\/]_? element-ui(.*)/ // in order to adapt to cnpm
            },
            commons: {
              name: 'chunk-commons'.test: resolve('src/components'), // can customize your rules
              minChunks: 3.// minimum common number
              priority: 5.reuseExistingChunk: true}}})Copy the code

• Compress the code. Removing redundant code, comments, simplifying the way code is written, and so on. You can use WebPack’s UglifyJsPlugin and ParallelUglifyPlugin to compress JS files, using csSNano (csS-Loader? Minimize) to compress CSS

• Use CDN acceleration. During the build process, change the referenced static resource path to the corresponding path on the CDN. You can modify the resource path using WebPack for the output parameter and the publicPath parameter for each loader

• Remove useless code (Tree Shaking). Remove unused snippets from your code. You can do this by appending the argument optimize-minimizer when you start WebPack

Tree shake

The tree shaking,

The goal is to eliminate useless code

Uglify eliminates Code that is not likely to be executed (DCE Dead Code Elimination)

Es6-dependent module features that are runtime independent and can be statically analyzed

The WebPack build process

The running process of WebPack is a serial process. From start to finish, the following processes are executed in sequence:

1. Initialization parameters: from the configuration file andShellStatement to read and merge parameters, get the final parameters;
2. Start compiling: The parameters obtained in the previous step initialize the Compiler object, load all configured plug-ins, and execute the object’srunMethod to perform compilation;
3. Determine the entry: according to the configurationentryFind all entry files;
4. Compile module: calls all configured modules from the entry fileLoaderTranslate the module, find out the module that the module depends on, and then recurse this step until all the files that the entry depends on have been processed by this step; Complete module compilation: used in step 4LoaderAfter all modules are translated, the final content of each module is obtained and the dependencies between them are obtained.
5. Output resources: assemblies of multiple modules based on the dependencies between the entry and modulesChunkAnd then take eachChunkConvert to a separate file and add it to the output list. This is the last chance to modify the output;
6. Output completion: After the output content is determined, the output path and file name are determined according to the configuration, and the file content is written to the file system. In the process above,webpackSpecific events are broadcast at specific points in time, and the plug-in executes specific logic after listening to the event of interest, and the plug-in can invokewebpackTo provide theAPIchangewebpackRun the result of.

Performance optimization

Two performance indicators

• Perceived performance: Subjective perceived performance from the user’s perspective.
• Objective performance: Objectively measurable performance from a developer’s perspective.

Optimization of type

Build optimization

How WebPack Optimizes Performance

Network optimization

• The request cache

  Set control-cache: max-age set strong cache (200 status code)

  Set e-tag, if-Modified-since, etc. Set negotiation cache (304 status code)

• Open http2

• The CDN speeds up the acquisition of static resources and common code

other

Sprite graphs, lazy load, preload, throttling functions

Perception of optimization

• Animated transitions

• Skeleton screen

Reduce white screen time

• Speed up or reduce HTTP request wear: Use CDN to load the public library, use strong cache and negotiated cache, use domain name convergence, replace small images with Base64, replace Post requests with Get requests, set access-control-max-age to reduce precheck requests, The browser prefetch is used to redirect the page to other domain names or request resources from other domain names.
• Lazy loading: non-important libraries, non-first screen images are lazy loading, SPA components are lazy loading, etc.
• Reduce the volume of the requested content: enable Gzip compression of the server, compress and merge JS and CSS files, reduce the size of cookies, SSR directly output rendered HTML, etc.
• Browser rendering principle: optimize the key rendering path, as much as possible to reduce blocking JS, CSS rendering;
• Optimize user waiting experience: white screen is replaced by loading progress bar, loading diagram, skeleton screen, etc.
• Server-side render SSR

Lazy loading implementation

The initial SRC of the image is set as a loading image. Set the address of the real image on the custom attribute data-src. Listen for changes in the viewport, and set the SRC to the real address when the image enters the viewport or will enter the viewport

There are two main ways to listen

• onscroll

  The rollback callback needs to calculate the distance from the image to the viewport. Because events are fired frequently and need to be calculated per image, the throttling function should be set

  

• IntersectionObserver is used to monitor DOM entering and leaving the viewport

  Tutorial on using the IntersectionObserver API