1. On the client and server

  • Client: can send a request to the server, and receive the returned content for processing
  • Server: can receive client requests and return related resource information to the client

=> The current computer can act as both a server and a client. So, how do you distinguish between a server and a client: not machine-specific, but functional-specific, needs-specific

2. What happened after entering the URL in the address bar?

  • The request phase
    • URL Address Resolution
    • DNS Domain name Resolution
    • The client establishes a TCP connection with the server (three-way handshake)
    • Passing client information to the server (sending HTTP requests)
    • The server receives and processes the request (HTTP response content)
  • The response phase
    • The client renders the content returned by the server
    • Disconnect the TCP connection from the server (wave four times)
Seven steps

2.1 URL/URI Address Resolution

2.1.1 the URL/URI/URN

  • Uniform Resource Identifiers (URIs) : Urls and UrNs are subsets of URIs
  • Uniform Resource Locator (URL) : a Uniform Resource Locator (URL). Resources can be found based on this URL
  • URN (Uniform Resource Name) : Specifies the Uniform Resource Name (URN). It is an international standard Name (for example, Uniform edition number) that is not in common use

2.2.2 What a complete URL contains

❝

http://www.baidu.com/s?wd=index&name=ll#hash

❞

Protocol (http://):) A transport protocol is a tool (similar to a Courier) that transmits information between a client and a server.

  • HTTP: Hypertext transfer protocol. In addition to text, it can also transfer media resource files (or stream files) and XML format data
  • HTTPS: HTTP is more secure. Generally, payment websites use HTTPS (Alipay, Taobao, Tmall, GitHub, Baidu, etc.). S is SSL and encrypted transmission
  • FTP: File upload protocol (large resource stuff), usually used to upload or download local resources to the server
    • Filezilla: FTP upload tool. You can upload local files to the server based on THE FTP transfer protocol

“Domain name (www.baidu.com):” a name that users can easily remember

  • Top-level domain qq.com buy domain name to buy is the top-level domain name – wan Net
  • Level 1 domain www.qq.com
  • The secondary domain name sports.qq.com
  • Level 3 domain name kbs.sports.qq.com
  • .com International domain name
  • .cn Chinese domain name
  • .com.cn
  • . Edu education
  • . Gov government
  • . IO blog
  • .org official organization
  • The.net class system

Port number (80): The port number ranges from 0 to 65535. The port number is used to distinguish different items on the same server

  • The default HTTP port number is 80
  • HTTPS The default port number is 443
  • The default FTP port number is 21
  • If the project uses the default port number, we do not need to add the port number when writing the address, the browser will add the port number for us when sending the request

“Request resource path name (/s) :“

  • The default path name or name (xxx.com/stu/ does not specify the resource name, the server will find the default resource, generally the default resource name is default.html/index.html… This can be configured on the server side. If you do not write it, it will not display 404.

  • Pay attention to the processing of pseudo URL address :(URL rewriting technology is to increase SEO search engine optimization, dynamic URL generally can not be included by the search engine, so we need to static URL, at this time the need is to rewrite the URL)

    Example: HTTP: / / https://item.jd.hk/23457607363.html= > it may rewrite the https://item.jd.hk/index.php? id=23457607363Copy the code

“Question mark parameter information (? wd=index&name=ll)“

  • There are many ways in which a client wants to pass information to the server
  • The question mark parameter of the URL address
  • Request message transmission (request header and request body)
  • You can also exchange information between different pages, for example, from lists to details

“HASH value # (HASH)“

  • It can also act as a means of information transmission
  • The anchor point positioning
  • HASH based route management and control (different HASH values show different components and modules)

2.2.3 CHARACTER encoding of URL

If the requested address contains non-valid Unicode encoding content, modern browsers will encode it by default

  • Based on encodeURI encoding, we can decode based on decodeURI, we usually use encodeURI encoding is the whole URL, so that the special characters in the whole URL will be compiled automatically
  • EncodeURIComponent/decodeURIComponent it relative to encodeURI, not for the whole URL encoding, but give the URL part information coding (typically question mark and the value of the code),

=> When information is transmitted between the client and the server, if the requested address and information need to be encoded, we will handle it based on the above two methods. These methods also exist on the server side, so that the unified encoding and decoding can be achieved

  • There is also an escape/unescape encoding method on the client side, which is usually only used for its own processing between client pages. For example: Jump from the list to the details, we can transfer the Chinese information based on this code, the details page to get the encoded information and then decode, for example, we kind of cookie information in the client, if the information is Chinese, we also code based on this method…

2.2 DNS Server Domain Name Resolution

DNS server: a domain name resolution server, on which records of the external IP addresses of the domain name <=> are stored. When we send a request, the so-called DNS resolution is actually to find the external IP address of the corresponding server on the DNS server according to the domain name

2.2.1 DNS optimization

  • DNS cache: Generally, the browser will set up the cache by default after the first resolution. The time is very short, only about one minute
  • Reduce DNS resolution times: We need to send requests to as few domains and servers on a site as possible
  • DNS prefetch: When the page is loaded, the DNS resolves the information that needs to access other domain names (servers) in advance. In the future, the DNS does not need to resolve the information when the page is loaded

      
<html>
<head>
    <meta charset="UTF-8">
    <! -- DNS prefetch -->
 <! -- <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//static.360buyimg.com">  <link rel="dns-prefetch" href="//misc.360buyimg.com"> < link rel = "DNS - prefetch" href = "/ / img10.360buyimg.com" >< link rel = "DNS - prefetch" href = "/ / img11.360buyimg.com" >< link rel = "DNS - prefetch" href = "/ / img12.360buyimg.com" > -- >  <title>AJAX</title>  <script>  // let link = document.getElementById('link');  // console.log(link);  </script> </head> Copy the code

2.3 Establishing a TCP Connection (Three-way Handshake)

For the three handshakes and the four waves below, see this blogger on the Nuggets: Three handshakes

Three-way handshake

2.4 Sending AN HTTP Request

HTTP transaction/HTTP request: Both refer to a complete HTTP request (request + response)

Against 2.4.1 HTTP message

Viewing HTTP Packets

Google Chrome F12 => network(all client and server interactions can be seen here) => Click on a message to see all HTTP on the right

  • Request message: The content that is transmitted from the client to the server over the transport protocol is called request message
    • The starting line
    • Request header: some of the front-end Settings are default Settings, can also be set by the front-end;
    • Request body
  • Response packet: All packets returned by the server to the client over a transport protocol are called response packets
    • The HTTP status code
    • Response header: is the background to the front end can not be modified
    • In response to the body
  • HTTP packet: request packet + response packet

2.4.2 Strong cache and Negotiated Cache

“Strong caching” is a request that does not reach the background; Get the resource directly from the local cache and respond to the request

  • Expires. Requests that expire after this time are directly fetched from the local cache.
  • Cache-control: Max – age = 3600; Max-age Specifies the validity period of the cache. 3600 seconds

Negotiation cache negotiation cache: If the strong cache is not matched, the negotiation cache may be passed.

  • He did go backstage to get something; But the background tells the front end that the request can use the cached content; (304).
  • Etag /if-none-match :etag is a string generated by the back end. The next time a request is made, the browser will add an if-none-match attribute to the request header
    • The value of this attribute is the value of the etag given in the background
  • last-modified/if-modified-since : Last-modified a time generated by the back end, which is the last time the current request was modified. The next request will have if-modified-since in the request header, which is last-modified;

2.5 The server receives and processes the request (HTTP response content)

2.5.1 HTTP status code

It is a three-digit number starting with 1 to 5. The number starting with 1 is very rare.

  • 200 OK: Succeeded
  • 201 CREATED: Status code returned by the server when a new file is CREATED
  • 204 NO CONTENT: For certain requests (such as PUT or DELETE) that the server does not want to process, the server can return empty CONTENT with 204 status code
  • 301 Moved Permanently: Permanently redirects.
  • Moved Temporarily: Temporarily transfers to the server. Previously, 302 was used, but now 307 is used. Temporary Redirect => Mainly used for load balancing on the server
  • 304 Not Modified: Sets the HTTP negotiation cache
  • 400 Bad Request: The parameter sent to the server is incorrect
  • 401 Unauthorized: Access is unavailable
  • 404 Not Found: The requested address is incorrect
  • 500 Internal Server Error: indicates an unknown Server Error
  • 503 Service Unavailable: The server is overloaded

2.6 The client renders the content returned by the server

Render tree

2.6.1 Synchronous and Asynchronous Loading

Link /img/audio/video is asynchronously loaded (the browser assigns a new thread to load, and the main thread continues rendering the page). If script or @import is encountered, the main thread loads the resource information (synchronous). After loading the information, the main thread continues rendering the page

2.6.2 Steps for rendering pages by browser

  • Process HTML tags and build DOM trees
  • Process CSS tags and build CSSOM trees
  • Merge the DOM tree and the CSSOM tree into a render tree
  • Based on the generated render tree, calculate their exact position and size within the device viewport. The stage of this calculation is the backflow => Layout or reflow.
  • According to the geometry information obtained by rendering tree and backflow, the absolute pixels of nodes can be obtained => Painting or Rasterizing.

2.6.3 DOM Redrawing and Reflux (rearrangement)

  • Redraw: Changes in element style (but not width, height, size, position, etc.)
  • Backflow: A change in the size or position of an element (when the page layout and geometry information changes) triggers a relayout, causing the render tree to recalculate the layout and render
  • Note: Backflow must trigger redraw, and redraw does not necessarily backflow

2.6.4 Front-end performance optimization: Avoid DOM backflow

  • Abandoning the era of traditional DOM manipulation, vUE/React started the data impact view mode
  • Separate read and write operations (modern browsers have a render queue mechanism)
    • If you find a line that you want to change the style of an element, instead of rendering it immediately, look at the next line, and if the next line also changes the style, put the style modification in the “render queue”… Render the whole thing once, causing a backflow, until the style is no longer modified
    • OffsetTop, offsetLeft, offsetWidth, offsetHeight, clientTop, clientLeft, clientWidth, clientHeightscrollTop, scrollLeft, scrollWi DTH, scrollHeight, getComputedStyle, currentStyle…. The render queue is refreshed
  • Style set changes
  • Cache layout information
  • Element batch modification
  • Animation applied to elements with position property absolute or fixed (out of document flow)
  • CSS3 Hardware acceleration (GPU acceleration)
  • Sacrifice smoothness for speed
  • Avoid table layouts and javascript expressions using CSS

2.7 Disconnecting the TCP Connection from the Server (Waving hands Four times)

  • First wave: initiated by the browser, sent to the server, I request message sent, you are ready to close it
  • Second wave: initiated by the server, tell the browser, I have received the request message, I am ready to close, you are ready;
  • Third wave: initiated by the server, tell the browser, I respond to the message sent, you are ready to close it;
  • Fourth wave: initiated by the browser, tell the server, I respond to the message received, I am ready to close, you are also ready;
Four times to wave