"An interview question" enter the URL to render a comprehensive comb under - summary

Want to know

This article is an interview question, and not only an interview question, you will find that this question no matter big factory small factory, will ask, why

Because it is enough, continuous wrote three post, each has tens of thousands of words, still feel not enough fine, point really test coverage of a person’s knowledge, or various test, if let me to interview, I think this question can completely through digging out the interviewer’s basic knowledge reserves, ductility is super

It will make the interviewer’s eyes shine and set you apart

This article is a summary, have not read the first two small friends suggest first read, and then summarize their own summary, and then look at this article, because the first two articles is to be able to understand this article was written

“An interview question” enter the URL to render the full comb – Network Communications section

“An interview question” enter the URL into the render overview – page render page

If you have seen it, then come to a summary, first of all, please also for my crazy code word point a praise to see oh, recently typing speed is much faster 😄

review?

Originally, I would simply review the knowledge points of the first two articles and then summarize them. There is also a mind map, which was almost written, about 10,000 words, but I deleted most of it and rewrote it later

Because one day whim, want to change the whole article into an interview question and answer post, write post, I prefer to be serious and follow one’s inclination.i deleted it again, so this article will be slower

Below will be in a process of the interviewer and interviewee q&a to describe these problems, the main body question answer after there will be some of the more common subject divergence problem, recently about finished watching TV Temples to side is not Chinese flowering crabapple red, see and speak a bit by belt running deviation, using the old Beijing cavity is too, you look good! 😄, good, ridicule finished, began to serious, dry ten thousand words to the text, ready to oh

First of all, please bring yourself into the interview, you are an interviewer, carefully look at each question, meditate for a moment, and then answer in your heart, and finally look at the summary of the answer (this answer is not necessarily correct, personal feelings, only for your reference, also hope you give your complement or correction).

Q (subject) : What happens when you enter a URL into a page rendering?

Personal think, don’t rush to answer, first think about 30 seconds, form the outline of a general steps in the heart, summarized first, and then, slowly, pay attention to the rhythm, can also be a brief pause between thinking, the interviewer will not because you thought for a moment, you will pass away, on the contrary, you can blurt out a pile of content directly, will make the interviewer feel you like to recite the text

As for the main question, I have written two answers, and I think two points should be paid attention to to answer selectively, at least I think so

The status of the interviewer

Approximately determining the interviewer is a what kind of people, pay attention to the interviewer that person’s status, this is very important, by the state to the interviewer’s judgment to decide concise answer answer or bombing type, the bombing type answer here is not to say that the more the better, is when we were in response to helping to pull out some knowledge points to prove that we learned, But no matter what the answer should be answered on the point, don’t think the more the better to pull some of the nonsense, this is probably reading people’s opinions, right

Your state

You state it is easier to understand, if you have some knowledge to master the unreliable or nervous, this time will not die hold still for answer ing (before the interviewer don’t know much about hard pretend what all understand, easy to cause a little disgusted), as far as possible concise, the place you cooked and speak a little more, it can be a hint for the interviewer to guide, Then wait to let the interviewer divergent ask you, usually where you say much, the interviewer will go in which direction divergent, if you are confident enough, then say good, don’t care about his divergent, as long as don’t say useless 👌, the vast majority of the interviewer for this kind of situation should be like

A serious bombard answer

Interviewer: hello, this is a classic problem, I also have spare time to read some books, do some summary, because involves a lot of knowledge, so it may take some time, if you have any problem or my answer is not correct, please feel free to interrupt at any time, also pointed out the mistake for me, thank you

I think the process from URL input to page rendering can be roughly divided into two stages: network communication and page rendering

The first is the network communication stage. In the Internet, the communication between network devices follows the TCP/IP four-layer protocol, and they communicate with each other through the TCP/IP network in the order of layers from high to low: Application layer, transmission layer, network layer, data link layer, we browser input URL, the sender will go down from the application layer, the receiver is the server will go up from the data link layer, usually we use five layer protocol to explain, the data link layer is divided into physical layer and data link layer two layers

Browser input URL

When you enter the URL and press Enter, you enter the application layer and start down. The browser will start a thread to process the URL. It will parse the URL, usually including (protocol header, host domain name or IP address, port number, request path, query parameters, hash, etc.), and then open the network thread to issue a complete request

The application-layer DNS resolves domain names

DNS resolution, domain name resolution or IP resolution is because the URL that we input is usually a domain name, the computer doesn’t know the domain name, it only knows the IP, so you need DNS resolution to get the corresponding IP through the domain name query, for DNS resolution

The browser DNS cache is first looked at
If not, query the computer’s local DNS cache
I haven’t asked the recursive DNS server yet (that is, the network provider, usually this server has its own cache, so most IP queries are done here)
If there is still no cache, the root DNS server and TLD DNS server are used to find the records on the corresponding authoritative DNS server, and the records are cached to the recursive server, which then returns the records to the local server

The application layer client sends an HTTP request

With the IP address, the application layer client will send an HTTP request to see the page. The HTTP request is divided into request header and request body. The request body is the content that the client sends to the server or the server returns to the client. The communication methods include request methods (POST/GET/INPUT/DELETE, etc.), URI, protocol version number, and request header methods (Accept, cache-control…).

Transport layer TCP transmits packets

After the application layer sends a request, in order to convenient transport, in the transport layer from the application layer receives data (that is the HTTP request message); and number for each packet and then forwarded to the network layer number is convenient when the server receives can accurately restore message information, USES TCP protocol we used to say here

TCP ensures secure transmission through a three-way handshake. In other words, the client establishes a TCP/IP connection with the server through a three-way handshake at the transport layer

In a three-way handshake, the sending end sends a packet with SYN (Synchronize) flag to the receiving end and waits for a response from the receiving end for a certain time. After receiving the packet, the receiving end sends back a packet with SYN/ACK flag for confirmation. After receiving the packet, the receiver sends a packet with ACK flag to the receiver to indicate that the handshake is successful. During this process, if the sender does not receive a reply within the specified delay time, the receiver does not receive the request by default and sends the packet again until the reply is received

That’s what I said in the last article

Xiao Li (client) : Hello, are you the interviewer of XX?
Interviewer (server) : Uh-huh, yes. Are you Xiao Li who sent in your resume yesterday?
Xiao Li (client) : Yeah, yes, I am

Network layer IP Protocol Query the MAC address

After the connection is established, the NETwork-layer IP protocol queries the MAC address and transmits data packets

Generally speaking, THE IP protocol is responsible for transmitting various packets to the receiver. To ensure that the packets can be transmitted to the other party, it is necessary to determine the MAC address of the receiver, which is called the physical address. The IP address can be paired with the MAC address one by one through the mapping table. However, MAC addresses are usually fixed, and THE RESOLUTION process from IP to MAC depends on THE ARP protocol. It can find out the CORRESPONDING MAC address according to the IP address of the communication party

Because the two parties cannot communicate directly (except in the same LAN), they will pass through multiple computers or routers for transfer, so ARP is needed to confirm the next transfer station all the way to assist the transmission of packets

Data arrives at the data link layer

After the MAC address of the peer is found, the data is sent to the data link layer for transmission, and the request sending phase ends at this client

Server receives data

The server at the receiving end then receives the data packet at the data link layer and reverts the data back to the application layer layer by layer. This process involves recomposing the segmned data packet into the original HTTP request packet through TCP at the transport layer

When the request is received by the background server, there is generally unified authentication, such as security authentication and cross-domain authentication. If the authentication fails, the corresponding HTTP packet is directly returned. After the authentication succeeds, the background code is entered

If the browser has accessed the cache and there is a corresponding resource in the cache, it compares the last modification time with the server, and returns 304, telling the browser that the local cache is available

The server responds to requests

After receiving the HTTP request from the client, the server searches for the requested resource and returns a response packet

In addition, many websites now have a redirection function, such as requesting a domain name without the WWW., it will give you a redirection to add on, which means that the first HTML request we need to make two requests

The reason for this is that search engines will consider www.xxx.com and xxx.com to be two different sites, resulting in a lower ranking of the site, and a (double) browser cache if both sites are open

The server returns the corresponding file

After the request succeeds, the server returns the corresponding web page, and the browser starts to download the web page after receiving the successful response packet. At this point, the network communication ends

Parsing HTML to build a DOM Tree

After retrieving the returned web page from the server, the page is first parsed according to the DTD type defined at the top, and the page parsing is handed over to the internal GUI rendering thread

The HTML interpreter in the rendering thread converts HTML pages and resources from byte stream interpretation into character stream, which is then interpreted into words by a lexical analyzer, which is then constructed into nodes based on words by a parser, and finally a DOM tree is formed by these nodes

In this process, if the node encountered is JS code, the JS engine will be called to interpret and execute the JS code. At this time, because the JS engine and GUI rendering thread are mutually exclusive, the GUI rendering thread will be suspended, and the rendering process will stop. If the DOM tree is modified during the operation of THE JS code, Then DOM building needs to start from scratch

If nodes need to rely on other resources, images /CSS, etc., the network module’s resource loader is called to load them, which are asynchronous and do not block the current DOM tree build

If you encounter a JS resource URL (no asynchrony tag), you need to stop building the CURRENT DOM until the JS resource is loaded and executed by the JS engine

Parse the CSS to build the CSSOM Tree

The CSS interpreter interprets the CSS file into an internal representation structure and generates a CSS rule tree. This process is similar to DOM parsing. CSS bytes are converted into characters, followed by lexical parsing and parsing, and finally the tree structure of the CSS object model (CSSOM) is formed

During the build process, the browser has to recurse the DOM tree to determine the style of the element. For the sake of CSSOM integrity, it can’t move to the next stage until the DOM is built. So even if the DOM is built, it has to wait for CSSOM before it can move to the next stage

Build a Render Tree

The CSSOM tree and DOM tree are then merged into a render tree, also known as a render tree, which contains only the nodes needed to render a web page. The render tree is then used to calculate the layout of each visible element and output to the rendering process to render the pixels onto the screen

Layout (Layout)

Render tree Also contains all the content and style information visible on the screen, with the render tree, then, would be the layout (layout) stage, so far, the browser calculates which nodes should be visible and their style, but they haven’t calculate the equipment within the viewport’s exact location and size, This is the Layout stage, also known as automatic rearrangement or Reflow

This phase typically means that the content, structure, position, or size of an element has changed, requiring recalculation of styles and rendering trees

Drawing (Painting)

Through the first steps we know which nodes are visible, their computational style, and geometric information, and convert this information and each node in the render tree into an actual pixel on the screen, commonly known as the draw or rasterization stage

Synthesis (Composite)

The final step is composite, where the browser sends each layer of information to the GPU, which then composes the layers and displays them on the screen

So far the above content is my understanding of the life of a URL from parsing to rendering

Give a clean, concise summary answer

PS: I think the general point here is still to answer, can be based on their own understanding of some aspects of the expansion, at least I think it is so, but also personal understanding, welcome to discuss

Hello interview, URL input to page rendering, this is a classic topic, involving a lot of knowledge points, I will give you a brief summary according to my personal understanding, if there is something wrong, please point out

First, the client browser enters the URL, and since it is a domain name, the application-layer DNS starts resolving the domain name

Then, the application layer client sends an HTTP request and divides the data into numbers. To facilitate secure transmission, the transport layer establishes a TCP/IP connection through the TCP three-way handshake

After the connection is established, the NETwork-layer IP protocol queries the MAC address of the server, that is, the physical address, and transmits data packets

After finding the MAC address of the peer, the client sends the data to the data link layer for transmission

The server on the receiving end receives data packets at the data link layer and reverts the data to the application layer layer by layer

After receiving the HTTP request from the client, the server searches for the requested resource and returns a response packet

When the browser gets the web file, it first parses it according to the DTD type defined at the top, and the page parsing is handed over to the internal GUI rendering thread

Then DOM tree and CSSOM tree are constructed. In the process, if the node is JS, the JS engine will be called to interpret and execute the JS code. At this time, because the JS engine and GUI rendering thread are mutually exclusive, the GUI rendering thread will be suspended and the rendering process will stop. If changes are made to the DOM tree during the JS code run, the DOM build starts from scratch, and then the DOM tree and CSSOM tree are built as rendered trees

Then enter the layout phase, calculating the exact position and size of the render tree nodes within the device viewport

This is followed by converting each node in the render tree into an actual pixel on the screen, which is the draw phase

In the final synthesis stage, the browser will send each layer of information to GPU, and GPU will synthesize each layer and display it on the screen

Q: what is the difference between TCP/IP layer 4 and 5 and OSI layer 7?

The network layer can be divided into four layers of Internet protocol stack and seven layers of Internet protocol stack. At first, the network layer is the standard seven layer, which is also known as the OSI seven layer model. The reference model is a standard system developed by the International Organization for Standardization (ISO) for interconnection between computers or communication systems. It is commonly referred to as the OSI reference model or the seven-tier model

The so-called TCP/IP four-layer model and TCP/IP five-layer model are optimized from the OSI seven-layer, combining some layers, essentially the same, OSI seven-layer model is too detailed, has certain reference significance, but the implementation is more cumbersome, compared to TCP/IP model is simpler, It has strong practical application value

TCP/IP computer network is divided into four layers, general materials or tutorials are combined with OSI7-layer model and TCP/ IP4-layer model, the computer network according to the 5-layer model, 5-layer model is only designed to facilitate the introduction of computer network principles, but in the actual application or TCP/IP four-layer model

The corresponding relationship of each layer is as follows

Q: Can DNS resolution be optimized, why and how?

Whether or not

Can be optimized

why

DNS resolution is the first step in the whole process of opening the website. After the user enters the domain name and hits Enter, the system invokes the DNS client and finds the DNS IP address configured or automatically assigned by the user. The DNS server completes the resolution of the digital IP server with the domain name. Typically it takes 20 to 120 milliseconds to return the IP address for a given domain name, and the browser doesn’t do anything until the DNS query is complete. Okay

Once the resolution is complete, the connection is established and maintained, that is, after a smooth access, the subsequent download speed of the web page is independent of DNS until the next resolution and access request is made

For many small websites, the DNS resolution time is close to 0.5s, and some even need about 1s to resolve the result. Users of general websites will give up visiting if the waiting time exceeds 8s, while for e-commerce websites, 4S is the limit of users’ patience, and generally optimized small websites, DNS resolution time can be controlled in about 200ms, and the bandwidth of about 100M websites, after optimization, DNS resolution time can be controlled in 50~100ms, so DNS optimization is very necessary

How to

DNS resolution optimization – Make good use of cached TTL

DNS has multiple levels of cache, every time to find such levels, it will take a long time, we should try to let users directly from the carrier’s DNS cache to get the resolution records, so that there is no need to go through the root DNS server below these processes, naturally save some time

When purchasing a domain name for domain name resolution, there is a TTL value, which refers to the lifetime of the domain name resolution (in seconds). In simple terms, it represents the cache time recorded on the DNS server when the DNS server resolves the domain name. This value is also very learned. We want to be able to switch as quickly as possible when the server fails

We must know if we have multiple servers or backup. If we don’t have backup, we can only generate anti-ddos when the server is down. So,TTLThe longer the better for you, becauseTTLShort purpose is the server problems, can be switched in time, this for no backup site basic use, so at this time yourTTLAs long as possible, of course, not too long, general SettingsTTL 3600Can be
If there are backup servers or multiple servers, switchover may occur due to server breakdown.TTLThe shorter the time, the more timely the switch, butTTLThe shorter the time, it means that the carrier DNS cache often fails, common users, set toTTL 600Can, if the timely switch, especially demanding site, setTTL 120just

DNS resolution optimization – Load balancing

Configure multiple IP addresses for the same host name on the DNS server. When answering DNS queries, the DNS server returns different resolution results for each query using the IP address recorded in the DNS file, directing clients to different machines so that different clients can access different servers. In order to achieve the purpose of load balancing, can be based on the load of each machine or the machine from the geographical location of the user to start

As we use the CDN manufacturer do DNS, it is also using the DNS redirect, DNS server returns a with the IP address of the user the closest point to the user, the CDN node server is responsible for the response to the user’s request, provide the required content, CDN vendor’s DNS server the number of users access more and more, The A records of the DNS server will basically be cached by the DNS of various operators, so the service effect is the best

Q: What are the advantages and disadvantages of TCP/IP and UDP?

First of all, notice that the problem itself is a pit

TCP/IP is a protocol cluster, which includes many protocols. UDP is just one of them. It is named TCP/IP because TCP and IP are two important protocols, SO it is named after them. The correct question is about the advantages and disadvantages of TCP and UDP

You might say has an interviewer asked that? Don’t say this stingy word title, still really someone because of ignoring this was arranged 😄

Q: What are the advantages and disadvantages of TCP and UDP?

The advantages and disadvantages

TCP has the advantages of stability and reliability, which is reflected in the three-way handshake to establish a connection before data transmission. In addition, during data transmission, there are confirmation, window, retransmission, and congestion control mechanisms. After data transmission, the connection is disconnected to save some system resources

TCP’s weakness: take up system resources is high, the slow and inefficient, TCP, before passing data to build connection, consumes time, at the time of data transmission, confirming mechanism, retransmission mechanism, consumes a lot of time to congestion control mechanism, and to maintain all on each device transport connections, each connection can occupy system hardware resources such as CPU, memory

UDP advantages: Fast, UDP is a stateless transport protocol, so it is very fast when transferring data

Disadvantages of UDP: unreliable, unstable, because UDP does not have the reliable mechanism of TCP, in the data transfer, if the network quality is not good, it is easy to lose packets

Generally, when we have requirements on the quality of network communication, we should use TCP to transmit the whole data accurately to the other party, such as HTTP, HTTPS, FTP and other protocols. When the quality of network communication is not high, the network communication speed is required to be as fast as possible, then we can use UDP, such as voice, video and so on

The difference between

TCP Connection-based UDP connection-free
TCP is byte stream oriented. Simply speaking, TCP treats data as a series of unstructured byte streams while UDP is packet oriented
TCP protocol transmission data, no error, no loss, no repetition, and in order to arrive, UDP does not ensure reliable delivery and order, may lose packets
The TCP header costs 20 bytes, while the UDP header costs less, only 8 bytes
TCP connections can only be point-to-point, while UDP supports one-to-one, one-to-many, many-to-one, and many-to-many interactions

Q: A brief introduction to TCP three-way handshake and four-way wave?

Three-way handshake

PS: Please read the picture carefully and understand with the following words

At the beginning, both ends are in the CLOSE state. To provide services, the server will actively LISTEN to a port and enter the LISTEN state.

The client actively sends the connected SYN packet and then enters syn-sent state.

After receiving a SYN packet from the client, the server replies with a SYN/ACK packet and enters the SYN-RCVD state.

After receiving the SYN/ACK packet from the server, the client confirms the ACK packet and replies with the ACK packet, and enters the ESTABLISHED state.

After receiving the confirmation from the client, the server also enters the ESTABLISHED state. After that, the two sides can communicate

Four waves of the hand

PS: Please read the picture carefully and understand with the following words

At the beginning, both ends are in ESTABLISHED state and transmit data. One end initiates a FIN packet to disconnect the connection. In the figure above, the client initiates a FIN request and enters fin-WaIT-1 (terminates WAIT state 1).

After receiving the FIN message, the server replies with ACK indicating that it knows the connection and enters the closed-wait state from ESTABLISHED to perform preparations before the connection is disconnected

After receiving the ACK message from the FIN, the client enters fin-WaIT-2 (terminating WAIT state 2). After the server completes preparations before disconnection, it sends a FIN/ACK message to the client, indicating that I am well and requesting disconnection. After sending the message, The server enters the last-ACK state.

After receiving a FIN/ACK message, the client replies with an ACK message indicating that it knows the packet and enters the TIME_WAIT state. For stability and security, the client waits in time-wait state for 2MSL (maximum lifetime of a packet segment). Finally go to the CLOSED state

After receiving the ACK message from the client, the server directly enters the CLOSED state from the last-ACK state.

After four waves, both ends enter the CLOSED state, after which the two ends are officially disconnected

PS: Maximum Segment Lifetime (MSL) : indicates the Maximum Segment Lifetime of a packet. After the Maximum Segment Lifetime, the packet is discarded. TCP allows different implementations to set different MSL values

Q: why is it three handshakes to establish a connection, but four waves to close a connection?

When establishing a connection, the server listens. After receiving a SYN packet, the server sends the ACK and SYN packets to the client

And close connection, the server receives the other side of the FIN message, only on behalf of the other party no longer send data but also can receive data, but not all data are sent to each other, so they can immediately shut down, also can send some data to each other, then send the FIN message now agreed to close the connection to the other side, therefore, The ACK and FIN are usually sent separately, resulting in an extra ACK

Q: Why three handshakes to create a link, and is the last confirmation necessary?

This prevents invalid connection request packets from being sent to the server and causing errors

If two handshakes are used to establish a connection, if the client sends the first connection request and does not lose the connection, it only stays in the network node for a long time. Because the TCP client does not receive the confirmation packet, it thinks that the server has not received it, and then sends the packet to the server again. Then the client and the server after two handshake complete connection, close the connection after data transmission, the request connection at a time, at the moment before the stranded network unobstructed to the server, the message was supposed to be failure, however, two handshake mechanism will let the client and the server connection is established, again will lead to unnecessary mistakes and waste of resources

If the three-way handshake is adopted, even if the invalid packet is sent, the server receives the invalid packet and replies with an acknowledgement message, but the client does not send an acknowledgement again. Because the server does not receive the acknowledgement, it knows that the client has not requested a connection

Why is it easier not to use four handshakes, three to create a secure connection why four? Isn’t that a waste of resources

Q: Can data be carried during the three-way handshake?

The first and second handshakes cannot carry data because the connection has not been established during the first and second handshakes, leaving the server vulnerable to attack

For the third handshake, the client is already in the ESTABLISHED state. For the client, the connection has been ESTABLISHED, and the receiving and sending capabilities of the server are known to be normal. Therefore, it is no problem to carry data

Q: Why does the client end up waiting for 2MSL after four waves?

First, ensure that the last ACK packet sent by the client can reach the server, because the ACK packet may be lost. From the perspective of the server, I have sent a FIN+ACK packet requesting a break, and the client has not responded to me. It should be that the client has not received the break packet SENT by me. The server then sends the message again, and the client receives the retransmitted message within the 2MSL period, gives a response message, and restarts the 2MSL timer

Second, such as the above mentioned have failed connection request message segment in connection of this situation, the client sends out a final confirmation message after, in this 2 MSL time, can make the connection of the duration of all segments are disappearing from the network, so that a new connection will not appear in the old connection request message

Q: What if the connection has been established, but the client suddenly fails?

TCP also has a keepalive timer. If the client fails, the server cannot wait forever. The timer is reset every time the server receives a request from the client, usually for two hours

If no data is received from the client within two hours, the server sends a probe segment, and then again every 75 seconds. If there is no response after 10 probes, the server assumes that the client is faulty and closes the connection

Q: HTTP request method?

HTTP1.0 defines three request methods: GET, POST, and HEAD

HTTP1.1 adds six new request methods: OPTIONS, PUT, PATCH, DELETE, TRACE, and CONNECT

The serial number	methods	describe
1	GET	Requests the specified page information and returns the entity body
2	HEAD	Similar to a GET request, except that there is no concrete content in the response returned, which is used to retrieve the header
3	POST	Submit data to a specified resource to process a request (such as submitting a form or uploading a file). The data is contained in the request body. POST requests may result in the creation of new resources and/or the modification of existing resources
4	PUT	Data transferred from the client to the server replaces the contents of the specified document
5	DELETE	Asks the server to delete the specified page
6	CONNECT	Reserved in HTTP/1.1 for proxy servers that can pipe connections
7	OPTIONS	Allows clients to view server performance
8	TRACE	The command output displays the requests received by the server for testing or diagnosis
9	PATCH	Is a complement to the PUT method and is used to perform local updates on known resources

Q: What do HTTP status codes stand for?

There are five types of status codes

1xx: indicates that the protocol is being processed. Follow-up operations are required
2xx: Succeeded
3xx: Indicates the redirection status. The location of resources changes and a request needs to be made again
4xx: The request packet is incorrect
5xx: Server side error

Detailed status code is not wordy, directly copy a rookie tutorial, take a look, there is an impression in the heart

Status code	English names	describe
100	Continue	To continue. The client should continue with its request
101	Switching Protocols	Switch protocol. The server switches protocols based on client requests. You can only switch to a more advanced protocol, for example, the new version of HTTP

200	OK	The request succeeded. Typically used for GET and POST requests
201	Created	Has been created. The new resource was successfully requested and created
202	Accepted	Has been accepted. The request has been accepted, but processing is not complete
203	Non-Authoritative Information	Unauthorized information. The request succeeded. The meta information returned is not the original server, but a copy
204	No Content	No content. The server processed successfully, but did not return content. You can ensure that the browser continues to display the current document without updating the web page
205	Reset Content	Reset the content. The server is successful, and the user end (for example, browser) should reset the document view. Use this return code to clear the browser’s form field
206	Partial Content	Part of the content. The server successfully processed some of the GET requests

300	Multiple Choices	A variety of options. The requested resource can include multiple locations, and a list of resource characteristics and addresses can be returned for user terminal (e.g., browser) selection
301	Moved Permanently	Permanently move. The requested resource has been permanently moved to the new URI, the return message will include the new URI, and the browser will automatically redirect to the new URI. Any future new requests should be replaced with a new URI
302	Found	Temporary move. Similar to 301. But resources are moved only temporarily. The client should continue to use the original URI
303	See Other	Look at other addresses. Similar to 301. Use GET and POST requests to view
304	Not Modified	Unmodified. The requested resource is not modified, and the server does not return any resources when it returns this status code. Clients typically cache accessed resources by providing a header indicating that the client wants to return only resources that have been modified after a specified date
305	Use Proxy	Use a proxy. The requested resource must be accessed through a proxy
306	Unused	An invalid HTTP status code
307	Temporary Redirect	Temporary redirect. Similar to 302. Use GET to request redirection

400	Bad Request	Client request syntax error, server cannot understand
401	Unauthorized	The request requires user authentication
402	Payment Required	Reserved for future use
403	Forbidden	The server understands the request from the requesting client, but refuses to execute the request
404	Not Found	The server could not find the resource (web page) based on the client’s request. With this code, a web designer can set up a personalized page that says “the resource you requested could not be found.
405	Method Not Allowed	The method in the client request is disabled
406	Not Acceptable	The server could not complete the request based on the content nature of the client request
407	Proxy Authentication Required	The request requires the identity of the broker, similar to the 401, but the requester should use the broker for authorization
408	Request Time-out	The server waited for a request sent by the client for a long time and timed out. Procedure
409	Conflict	This code may be returned when the server completes a PUT request from the client, and a conflict occurred when the server processed the request
410	Gone	The resource requested by the client does not exist. 410 differs from 404 in that if a resource previously had a 410 code that is now permanently deleted, the site designer can specify a new location for the resource through the 301 code
411	Length Required	The server cannot process the content-length message sent by the client
412	Precondition Failed	A prerequisite error occurred when the client requested information
413	Request Entity Too Large	The request was rejected because the requested entity was too large for the server to process. To prevent continuous requests from clients, the server may close the connection. If the server is temporarily unable to process it, a retry-after response is included
414	Request-URI Too Large	The request URI is too long (usually a url) for the server to process
415	Unsupported Media Type	The server could not process the media format attached to the request
416	Requested range not satisfiable	The scope requested by the client is invalid
417	Expectation Failed	The server cannot satisfy Expect’s request headers

500	Internal Server Error	The server had an internal error and could not complete the request
501	Not Implemented	The server did not support the requested functionality and could not complete the request
502	Bad Gateway	The server working as a gateway or proxy received an invalid response from the remote server when attempting to execute the request
503	Service Unavailable	The server is temporarily unable to process client requests due to overloading or system maintenance. The length of the delay can be included in the server’s retry-after header
504	Gateway Time-out	The server acting as a gateway or proxy did not get the request from the remote server in time
505	HTTP Version not supported	The server did not support the HTTP version of the request and could not complete the processing

Q: What is the difference between HTTP and HTTPS?

Data transmitted through HTTP is unencrypted, that is, plaintext, so it is very insecure to use HTTP to transmit private information. To ensure that private data can be encrypted, Netscape designed Secure Sockets Layer (SSL) to encrypt data transmitted through HTTP. HTTPS was born

To put it simply, HTTPS is a network protocol constructed by SSL and HTTP for encrypted transmission and identity authentication. It is more secure than HTTP. For more information about HTTP and HTTPS, see Baidu

So there’s a difference

HTTPS requires you to apply for a certificate from a CA. Generally, there are few free certificates, so a certain cost is required
HTTP is a hypertext transmission protocol, and information is transmitted in plain text. HTTPS is a secure SSL encryption transmission protocol
HTTP and HTTPS use completely different connections and use different ports, the former 80 and the latter 443
HTTP connections are simple and stateless. HTTPS is a network protocol constructed using SSL and HTTP to encrypt transmission and authenticate identity. HTTPS is more secure than HTTP

Q: What are simple and non-simple requests?

CORS (cross-origin Resource Sharing), cross-source resource sharing, is the majority of front-end students said cross-domain, presumably we all understand, do not understand this is not introduced, do not understand can see HTTP access control (CORS) – MDN portal 😄

CORS defines two types of requests

A simple request
Non-simple request

So what is a simple request and what is a non-simple request? It’s actually pretty simple, we just need to know what a simple request is, and the rest is non-simple, and what does a simple request have to satisfy

The request mode can only be GET, POST, or HEAD
HTTP header information does not exceed the following fields
- No custom header field
- Accept, accept-language, Content-language, last-event-ID
- Content-type has only three values application/ X-www-form-urlencoded, multipart/form-data, text/plain

Simple request needs to meet the above conditions, in fact, is usually the traditional form request, look at the above simple request conditions, then the non-simple request is not ready to come out, such as the following as long as meet a non-simple request

The request mode is PUT or DELETE
Custom header fields
Send jSON-formatted data and so on

For CORS requests that are not simple requests, an HTTP query request will be added before formal communication. The request mode is OPTIONS, which is called preflight request.

The browser asks the server if the domain name of the current web page is on the server’s approved list, and what HTTP methods and header fields are available. The browser then issues an official XMLHttpRequest request, otherwise an error is reported, to prevent these new requests. The pressure on traditional servers without CORS support gives the server a chance to reject early, preventing the server from receiving a large number of DELETE and PUT requests that traditional forms would not be able to make across domains

Q: How to optimize CSS resource loading blocking rendering?

Optimize the DOM tree to make the DOM as small as possible

CSS uses ids and classes rather than tags, because tag node styles can be inherited, so during construction the browser has to recurse to the DOM tree to determine what style elements are

Inline CSS for the CSS code used for the first screen rendering

For CSS that is not needed for the first screen rendering, you can use the file format and load it after the page content is rendered

Q: What is reflow and redraw and the difference?

Want to know, when generating a DOM tree is including display: none of the nodes, the DOM tree and CSSOM tree according to the set of nodes on the basis of attribute margin/padding/width/height to generate the render tree (render), The rendering tree does not include nodes such as display: None and head, but does include nodes that visibility:hidden

Reflow The process of reconstructing render tree nodes when they change due to size and margins, etc.

When the change only affects the appearance of the element (e.g. background color, border color, text color, etc.), you can simply paint the element with a new style. This is called Repaint.

Backflow will certainly cause redrawing, and redrawing will not necessarily cause backflow, obviously the cost of backflow is higher

Q: What causes reflux?

Page render initialization
DOM structure changes, such as deleting a node
Render tree changes, such as reduced padding
When the window resize event is triggered
Some JS attributes cause backflow, and many browsers will optimize backflow until there is enough of them to do a batch backflow, but in addition to direct changes to the Render tree, when fetching some attributes, the browser will also trigger backflow in order to get the correct value, rendering the browser optimization ineffective
- offset ( Top/Left/Width/Height )
- scroll ( Top/Left/Width/Height )
- cilent ( Top/Left/Width/Height )
- width, height
- Call thegetComputedStyle()Or IEcurrentStyle

Q: How to reduce and avoid reflux repainting?

Instead of changing styles item by item, it’s better to change the style once, or define the style as class and update it once

Avoid looping around the DOM and keep it offline before modifying it

To create adocumentFragmentApply all DOM operations to it, and finally add it towindow.document
Let’s start with the DOM nodedisplay:none(Will trigger oncereflow), then make changes and display it again
Clone a DOM node in memory, modify it, and replace it with the online node

Avoid reading properties such as offset multiple times and cache them into variables if you cannot avoid it

Locate complex elements absolutely or fixedly out of the document flow, otherwise backflow would be costly

Changing the font size can also trigger backflow, so minimize this

Table layout, a small change will cause the entire table layout, so use less

Q: What do you know about regular and compound layers?

The layers rendered by the browser generally fall into two categories: normal layers and composite layers

The normal document flow can be considered as a compound layer, we call it the default compound layer, because no matter how many elements are added to it, they are in the same compound layer. Absolute layout and Fixed are the same, although they can be separated from the normal document flow, they still belong to the default compound layer

Compound layer, can be independent of ordinary document flow, changes can avoid the whole page redraw, thereby improving performance, but also do not use a lot of compound layer, otherwise due to excessive resource consumption, the page will become more difficult, penny wise and pound foolish

GPU, the compound layer is drawn separately, so each other, through the way of hardware acceleration, to declare a new composite layer, it will allocate resources alone, of course, will flow out of the ordinary document, so that no matter how changes in the compound layer, also won’t affect the default reflux redrawn in the composite layer

PS: Hardware acceleration technology refers to the use of the GPU’s hardware capabilities to help render web pages

Q: Browser page rendering optimization?

The HTML document structure should have as few layers as possible, preferably no more than six
Put the JS script as late as possible
Keep the style hierarchy as simple as possible
A small number of front-screen styles are placed inline in the TAB
Minimize DOM manipulation and access to offline DOM style information in scripts to avoid over-triggering backflow
Reduce the use of JS code to modify element styles and try to modify class names to manipulate styles or animations
Minimize browser rearrangements and redraws
For 2020 years! Don’t use the table layout
Only transform and opacity should be used in CSS animations, without rearrangement or redrawing
Hide out of the screen, or try to stop the animation while the page is scrolling
If possible, use ONLY CSS for animation. CSS animation is definitely better than JS animation
Avoid browser implicit composition
Change the size of the composite layer

The last

If it is helpful to you, please move your little hands and give a thumb-up to encourage it. Of course, I understand that this article is busy and takes a long time to write. It is written intermittently, so there may be some bad connections, not smooth or wrong places

Oh, there are, can add a friend add group communication together, the public number [not serious front end] also welcome to pay attention to yo 😄

“An interview question” enter the URL to render a comprehensive comb under – summary