The purpose of this article is to present the most boring basic knowledge in the most popular language

Interviewed the front-end brother know, for the front end, interviewers like to first ask some new elements in HTML 5 features, or the js closure prototype, or CSS vertical horizontal center how to realize basic problems, such as when you can fall back such as flow after answering these interviewers across a strange smile on her face, and then clear to overcast, What’s the process from the user entering the URL to the browser rendering the page? If you know, Blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah. If you do, and bala Bala answers a lot, he will continue to ask: What experience do you have in web page performance optimization? After you’ve answered a lot of questions, the interviewer will be ready to ask you some non-technical questions, and you should be happy that your offer is almost in hand.

So here’s the question, can you answer those questions well when it’s really your turn to go to the interview?

  1. What does the browser do when the user types in the URL and hits enter?
  2. What is the complete flow of page rendering?
  3. What is your experience in front end performance optimization?

If not, then let’s move on: (Some people wonder, not talking about the front end? Why do WE want to talk about TCP, DNS and these front-end irrelevant knowledge? Don’t panic, follow the article, learn more harmless!

Article outline:

  1. TCP
  2. UDP
  3. The socket socket
  4. The HTTP protocol
  5. The DNS
  6. HTTP request initiation and response
  7. Page rendering process
  8. Page performance optimization

A TCP connection

TCPTransmission Control Protocol is a connection-oriented, reliable, and byte stream-based transport layer communication Protocol.

What’s the use of being so professional?

Let’s start with chestnuts

Remember the paper cup phone we made when we were kids? The two cups are connected by a string. Each of them holds a paper cup to straighten the string. One speaks to the cup, and the other listens to the cup in his ear.

In fact, this is the simplest connection communication. Two people are connected by a line, and the sound is sent from the paper cup on this side and transmitted to the other paper cup through the line. Now, the same is true of the fixed telephone in every household, and the communication is based on the acceptance and trust of both parties.

  1. A picks up the phone, dials 0775-6532122 and starts calling B
  2. User B hears the phone ringing and picks up the phone. At this time, user A receives the sound that user B has picked up the phone
  3. The two sides began to speak.

Back to our TCP protocol, it is similar to the telephone protocol, except that the telephone protocol is for telephone communication, and TCP is for network communication. Similarly, there are three steps (handshake) required to establish a TCP connection.

  1. The client sends a SYN packet (SYN =j) to the server, enters the SYN_SEND state, and waits for confirmation from the server.
  2. After receiving a SYN packet, the server must acknowledge the client’s SYN (ACK =j+1) and send a SYN packet (ACK =k). Then the server enters the SYN_RECV state.
  3. After receiving the SYN+ACK packet from the server, the client sends an ACK packet (ACK =k+1) to the server. After the ACK packet is sent, the client and server enter the ESTABLISHED state and complete the three-way handshake.

You’d better memorize these status codes, which are often used in server connection count performance optimization.

SYN: Synchronous Establishing an online ACK: Acknowledgement SYN_SENT: Indicates a connection request. SYN_RECV: Indicates the status when the server receives the SYN from the client and sends an ACK after being passively opened. Any further ACK received from the client enters the ESTABLISHED state.

It’s important to note that TCP doesn’t carry data during the handshake (just like when you call a hotel to make a reservation, you wouldn’t immediately give your ID number to the person you’re calling before you’re sure they’re a hotel customer service agent). Instead, the data transfer takes place only after the three handshakes have been completed.

As for its application scenarios, it depends on its own characteristics. For example, when there are requirements for network communication quality and data accuracy, TCP protocol is needed, such as FILE transfer protocols such as HTTP and FTP, or some mail transfer protocols such as SMTP and POP.

UDP protocol.

(UDP is not the focus of this article, but TCP, as its complementary brother, will skip over here.)

UDP: Compared with TCP, which requires tedious steps of repeated confirmation, UDP is a unique and highly subjective non-connection-oriented Protocol. It is not necessary to establish a connection for frequent communication using UDP. It is simply responsible for sending the data out as quickly as possible. It is crude and unreliable. On the receiving end, UDP interrupts each message to a queue, and the receiving end program reads the data from the queue.

Some people say, well, UDP is so unreliable, why was it even built? After all, there are no useless people in the world, only people who don’t know how to use it. Although UDP is unreliable, its transmission speed and efficiency are high. In some scenarios where data accuracy is not required, UDP becomes very useful, such as QQ voice and QQ video.

The socket socket

Why do we say nested words? That’s because as said earlier, the TCP or UDP is an agreement, also is the computer network communication at the transport layer of an agreement, in a nutshell, is a kind of convention, like cooperation both sides of the contract, then the contract is dead, only to perform the contract is substantive action, therefore both TCP and UDP, There needs to be actual behavior to implement the agreements in order to make them work, so how do you make them work? This brings us to sockets.

Socket: Also called nested word, is a set of TCP/UDP communication interface API, that is, whether TCP or UDP, through the programming of socket, TCP/UCP communication, as a communication chain handle, it contains the five necessary information for network communication:

  1. Protocol used for connection
  2. IP address of the local host
  3. Protocol port of the local process
  4. IP address of the remote host
  5. Protocol port of the remote process

You can see that a socket contains the IP address and port used to communicate with the peer party and the protocol (TCP/UDP) used for connection. One party (tentatively: client) communicates with the other (tentatively: client) through a socket (nested word). The server initiates a connection request, and the server listens to the request on the network. When receiving the request from the client, it locates to the client according to the information carried in the socket, sends the socket description to the client on the corresponding request, and the connection is established after the two sides confirm. So there are three steps to connecting between sockets:

  1. Server listening: The server monitors the network status in real time and waits for connection requests from the client
  2. Client request: The client sends a connection request to the remote host server based on the IP address and protocol port
  3. Connection acknowledgement: After the server receives the socket connection request, it responds to the request by sending the description of the server socket to the client. Once the client receives the acknowledgement, the two sides establish the connection and exchange data.

Generally, a socket connection is a TCP connection. Therefore, once a socket connection is established, the two parties start to send data to each other until one or both parties disconnect.

Socket is widely used in instant messaging (QQ and other chat software) and other applications.

The HTTP protocol

Hypertext Transfer Protocol (HTTP) is a Protocol based on the TCP/IP stack at the presentation layer and the application layer (TCP at the transport layer).

  • TCP/IP is a protocol at the transport layer that transmits data across a network.
  • HTTP protocol is an application layer protocol, based on TCP protocol, used for packaging data, programs use it for communication, can be simple and efficient processing of data transmission and identification processing communication

The HTTP connection, which is widely used now, is based on the HTTP protocol and is a specific application in the application layer. Unlike SOCKET connections, which remain connected once established, HTTP connections are based on the TCP protocol. The client initiates a request, the server responds to the request, and the connection is automatically disconnected.

URL

We talked about TCP, UDP, HTTP… And so on are in order to talk about a specific question and do the knowledge point fofows, that is: we develop the Web application request initiation and response, is a kind of underlying principle. As we all know, the vast majority of Web applications make requests through HTTP, and URL is a concrete implementation of HTTP for connection establishment and data transmission, so here we will briefly talk about URL.

URL: Uniform Resource Locator. HTTP uses it to transmit data and establish connections. A URL has the following components:

  1. agreement
  2. Server address (domain name or IP+ port)
  3. The path
  4. The file name

For example: https://www.baidu.com/index.html

  1. Https:// is a protocol. Of course, HTTP is FTP.
  2. www.baidu.com is the server address, of course, you know baidu’S IP can also be used, for example, IF I use ping command to get Baidu’s IP 14.215.177.39, then I can use http://14.215.177.39 to open Baidu
  3. The index. HTML contains the path and file name, but usually you can omit the index. HTML, so when you open Baidu, you won’t see this.

DNS

DNS:Domain Name Server. It is a server that translates domain names into corresponding IP addresses. DNS holds a table of domain names and their corresponding IP addresses to resolve the domain name of the message. In normal times when we are developing, the interface address provided by the back end is usually an IP address plus a port number (8080 whatever), but when we publish the website, we usually need to change the IP address to a domain name. Why is that? Think about it, for example, Google’s address is 89.12.21.221:9090, Baidu’s address is 132.21.33.221:8766… At this point you have no desire to remember the numbers, do you? But the domain name is not the same, such as Google’s Google.com, Baidu.com is not a time to remember it? Therefore, in order to deal with this problem, it is necessary to use the domain name to map the IP address, to achieve easy to remember and use the purpose.

So, when the user types https://www.baidu.com and hits enter in the browser, it goes through the following steps:

  1. If yes, the browser returns the IP address. Otherwise, the browser searches the operating system (hosts file) for the DNS resolution records of the domain name. If yes, the browser returns the IP address.
  2. If the DNS resolution record of the domain name is not displayed in the browser cache or the OPERATING system hosts or has expired, the system sends a request to the DNS server to resolve the domain name.
  3. The request goes to the LDNS (local Domain name server) to try to resolve the domain name. If LDNS fails to resolve the domain name, the request goes directly to the root domain name resolver
  4. The root DNS server returns the IP address of the queried remaining primary DNS server (gTLDServer) to the LDNS.
  5. Then the LDNS sends a resolution request to the returned gTLD server.
  6. After receiving the resolution request, the gTLD Server looks up and returns the address of the Name Server corresponding to the domain Name. This Name Server is usually the domain Name Server you registered (such as Ali DNS, Tencent DNS, etc.).
  7. Name Server The DNS Server queries the mapping table of stored domain names and IP addresses. Normally, the DNS Server obtains the destination IP address record based on the domain Name and returns it with a TTL value
  8. Returns the IP address and TTL value corresponding to the domain name. The Local DNS Server caches the mapping between the domain name and IP address. The cache time is controlled by the TTL value.
  9. The domain name resolution result is returned to the user, and the user caches it in the local system cache according to the TTL value. The domain name resolution process is complete.

HTTP request initiation and response

If the topic of this article was network communication, this would be the end of the article, but today we are going to cover the principles of request initiation and response and page rendering in Web applications, so this is just the beginning. In a Web program development, there are generally front-end and back-end. The front-end is responsible for requesting data and displaying pages from the back-end, and the back-end is responsible for receiving requests and responding back to the front-end. What is the bridge of collaboration between them? It’s an API. What is an API? Isn’t it just a URL? What’s the URL? The above said is a specific carrier of HTTP connections Therefore, whether in front or back end, understand HTTP, both for their own understanding of programming, collaboration, or and colleagues are all benefit greatly, the following, according to the above all understanding of knowledge points, we have to organize and solve the above mentioned the first question: What happens from the time the user enters the URL to the time the browser renders the page to the user

  1. The user enters the URL, and the browser gets the URL
  2. The browser (application layer) performs DNS resolution (this step is omitted if an IP address is entered).
  3. According to the resolved IP address + port, the browser (application layer) initiates an HTTP request, which contains the request header (also can be subdivided into request line and request header) and the request body.

The header contains:

  1. The requested method (GET, POST, PUT..)
  2. Protocols (HTTP, HTTPS, FTP, SFTP…)
  3. Destination URL (specific request path with file name)
  4. Some necessary information (caches, cookies, etc.)

The body contains:

  1. Content of request
  1. When the request arrives at the transport layer, TCP protocol provides reliable byte stream transmission service for the transmitted packet. It ensures the security and reliability in the transmission process by means of three-way handshake. It is provided for portable transmission of large amounts of data by means of splitting large amounts of data into message segments.
  2. To the network layer, the network layer through ARP addressing to get the Mac address of the receiver, IP protocol at the transport layer is divided into packets sent to the receiver.
  3. The data reaches the data link layer and the request phase is complete
  4. After the receiver receives the data packet at the data link layer, the data packet is passed to the application layer, and the application program of the receiver gets the request packet.
  5. After receiving the HTTP request from the sender, the receiver searches for the request file resources (such as HTML pages) and responds to the packet
  6. After receiving the response packet, if the status code in the packet indicates that the request succeeds, the sender accepts the returned resources (such as HTML files) and renders the page.

Page rendering

When a request has been initiated and responded to, the browser receives the response content, but what the browser receives is a string of code or URL links, and how to translate this code into the user can understand the interface is the browser’s job. At present, there are more than 100 browsers on the market, and each browser can be divided into several categories according to the kernel. Each type of browser has different principles and processes for rendering pages.

In general, however, each browser rendered the page following the following process:

There are some English words in the picture that may not be easy to understand, but let’s explain them first:

  1. The HTML parser is an HTML parser that interprets HTML text into a DOM tree.
  2. CSS Parser: The CSS parser is a tool that adds style information to each element object in the DOM
  3. JavaScript engine: a virtual machine specialized in handling JavaScript scripts. Its essence is to parse JS code and apply logic (HTML and CSS operations) to layouts to render the desired results
  4. DOM Tree: Document object model tree, which is the HTML tree structure and corresponding interface generated by the browser parsing HTML pages using HTMLparser.
  5. Render tree: A render Tree is a Tree built by the browser engine from the DOM Tree and CSS Rule Tree. Unlike the DOM Tree, it only has the final content to be rendered. Nodes like or with display: None do not exist in the Render Tree.
  6. Layout: Also called reflow, an action in rendering. Render Tree rearranges when the geometry of any node in renderTree changes.
  7. Repaint: Repaint, the act of rendering. Render Tree will redraw any element style attribute that has changed, such as font color, background, etc.

Therefore, according to the interpretation of the key words and the flow of the flowchart, it can be concluded that the browser parsing and rendering of the page mainly includes the following processes:

  1. HTMLParser is used by browsers to parse HTML into DOM trees based on the principle of depth traversal.
  2. Parse the CSS into a CSS Rule Tree (CSSOM Tree).
  3. The Render Tree is constructed from the DOM Tree and the CSSOM Tree.
  4. Layout: Calculate the position of all nodes on the screen according to the obtained Render tree.
  5. Paint: Walk through the Render tree and call the hardware graphics API to draw each node.

Front-end performance optimization

For page rendering is basically a process, after watching, do you have any feelings in the actual coding can be optimized point? Didn’t you? Since many of the details are not covered, here are a few key steps of the page rendering process in order to find out what can be optimized:

1. 1.

As mentioned above, HTML parsing is when the browser’s HTML parser parses HTML into a DOM tree. During parsing, the browser parses HTML from top to bottom based on the structure of the HTML file. HTML elements are parsed in a depth-first manner. The script, link, and style tags will block the parsing process. The blocking cases are:

  1. The external style blocks the execution of the internal script.
  2. The external style loads in parallel with the external script, but the external style blocks the external script execution.
  3. If the external script has the async property, the loading and execution of the external script is unaffected by the external style
  4. If the link tag is dynamically created (js generated), it does not block the loading and execution of the external script, regardless of the async attribute.
2. CSS:

The CSS Parser function combines styles from multiple CSS files and parses them into a tree structure called Style Rules. The default CSS selector parses styles from right to left. As for why it goes from right to left and not left to right and not left to left… Here’s an example: Suppose there is a pattern like this:

1#parent .ch1 .dh1 {}

2.fh1 .ch1 .dh1{}

3.ah1 .ch1 .eh1 {}

4#parent .fh1 {}

5.ch1 .dh1{}

Copy the code

Let’s compare the results from left to right and right to left:


Several points can be seen from the comparison of the two figures:

  1. The tree on the right is less complex than the tree on the left
  2. The tree on the right has less common style overlap than the tree on the left
  3. The tree on the right has fewer nodes from the root than the tree on the left

May light to see what time did not see this problem, but you should know: the browser CSS parser responsible for the interpretation of CSS, and calculated for each node, so while CSS parser don’t have much to do, but to each node traverse to find calculation, great amount of calculation, so the analytic way is the key point of determine its performance. as

1#parant .a{}

2and

3.a{}

Copy the code

# paran. a{} means that the CSS parser has to find the #parent node before it finds the. A node below it.

3. Script execution:

When the browser parses the HTML, it immediately parses the script when it encounters a <script> tag, and blocks the parsing document until the script is executed. When <script> is importing an external JS file, it blocks until the JS file is downloaded and executed (unless either the defer or async property is added). During the parsing process, the script parses the operations on the DOM or CSS and adds them to the DOM Tree and CSSOM.

Performance optimization

After these degrees, for the point of performance optimization, I believe you have a little X number in mind, the following is a simple summary of the daily development process of commonly used performance optimization place:

1. For CSS:
  1. Optimized selector path: While robust CSS selectors make development look cleaner, they are a big performance problem for CSS parsing, so it’s more likely to be written.c{} than.A.B.c {}.
  2. Compress files: Compress your CSS files as much as possible to reduce the burden of resource downloads.
  3. Selectors merge: Grouping together a series of selectors with common property content can compress space and resource overhead
  4. Precision style: Minimize unnecessary property Settings. For example, if you only want to set the value of {padding-left:10px}, avoid {padding-0 0 10px}
  5. Sprite Image: Combine some small ICONS into one image in a reasonable place, so that all the images only need to be requested once, and then obtain the corresponding icon by positioning, so as to avoid the waste of resources for one icon request.
  6. Avoid wildcards:.a.b *{} Selectors such as.a.b *{} will iterate through the dom if they encounter wildcards (*) during parsing, based on the right-to-left parsing order.
  7. Use Float sparingly :Float is computation-based when rendering, so use it sparingly.
  8. 0 value to remove units: For the value of 0, try not to add units to increase compatibility
2. For JavaScript:
  1. Put the script tag behind the body as much as possible, so that the page does not have to wait for javascript to complete before the DOM can continue to execute, and ensure that the page is displayed as quickly as possible.
  2. Merge script code whenever possible,
  3. Try not to do things with JavaScript that CSS can do. After all, JavaScript’s parsing execution is too straightforward and rough, whereas CSS is more efficient.
  4. Compress JS files as much as possible to reduce the burden of resource download
  5. Avoid manipulating the DOM styles in js as much as possible. Pre-define the CSS styles as much as possible, and then change the DOM styles by changing the style name. This centralized operation can reduce reflow or repaint.
  6. Create the DOM in JS as little as possible. Instead, bury it in HTML and use display: None to hide it. Call it as needed in JS to reduce js violence to the DOM.
3. For HTML:
  1. Avoid writing CSS code directly into HTML.
  2. Use Viewport to speed up page rendering.
  3. Use semantic tags to reduce CSS code and increase readability and SEO.
  4. Reduce the use of tags. Dom parsing is a large traversal process. Reducing unnecessary tags will reduce traversal times.
  5. Avoid empty values such as SRC and href.
  6. Reduce the number of DNS queries.

Above is the all content of the article, in general, introductory articles are brought people portal, advanced articles people brought into order, as there will be a tutorial and prestige tutorial Java books, this article written inside knowledge in order to make the most of the readers of page requests and present a bedding and overall cognitive, because involves knowledge too much, Every knowledge point can be singled out to write a book, so we take this paper as a guide, need to in-depth research on a certain knowledge point to find relevant books research, do not spray.

Find this article helpful to you? Please share with more people to pay attention to “programming without boundaries”, improve the skills of loading force