The DNS query

After obtaining the IP address of the server, the browser will query its own cache and then query the local HOSTS. If the query is not found, the browser will send a query request to the DNS server. Generally, the call cost is about 20ms to 120ms. The optimized strategy here is pre-query dnS-prefetch, which saves time in this part and directly obtains the corresponding IP when it is used

<link rel="dns-prefetch" href="https://cdn.bootcss.com">
Copy the code

Establishing an HTTP(TCP) connection

After obtaining the IP address of the server, the server performs a TCP three-way handshake and then an SSL handshake (HTTPS). The SSL handshake confirms the HTTP version to the server

  • HTTP1.0/HTTP1.1 era optimization

    1. Reduce HTTP requests. Because every HTTP request sends a full DNS lookup, TCP handshake, the browser sends the HTTP request, the server receives the request, the server processes the request and returns the response, and the browser receives the response.
    2. keep-alive. Due to the reliability of TCP, each independent TCP handshake takes up most of the time. So in order to solve this problem, we added the headerConnection:Keep-AliveThe keep-alive connection will remain open for a period of time. Subsequent requests will use this TCP connection. However, a TCP connection can only process one HTTP requestTeam head block.

  • HTTP2 era

    1. Multiplexing. By treating each request as a stream, multiple requests become multiple streams, and the request response data is divided into multiple frames, which are sent to each other interleaved from different streams.

      The concept of flow enables a single TCP connection to have multiple requests, and these requests are in parallel, which can solve the problem of queue head blocking caused by multiple requests

    2. Head compression. If both request headers are the same, this part is omitted and only different header fields need to be transferred, further reducing the size of the request.

      # nginx configure http2
server {
	listen 443 ssl http2;
	server_name domain.com;
}
Copy the code

Use server-side rendering

Take Vue SSR and SPA as an example

  • Client Side Rendering (SPA)

    1. Visit the client rendered website
    2. The server returns a statement containing the imported resource and<div id="#app"></div>The HTML file
    3. Execute when the necessary resources have been loadednew Vue()Start instantiating and rendering the page

    Benefits:

    1. Front end separation
    2. Good user experience
    3. Reduce server-side rendering stress

    Disadvantages:

    1. Bad for SEO search engine optimization
    2. The number of requests is large and the response is slow
    3. The first screen loads slowly

  • Server-side Rendering (SSR)

    1. Visit the server rendered web site
    2. The server returns the HTML page directly, rendering the page immediately
    3. Execute when the necessary resources have been loadednew Vue()Start instantiating and take over the page

    Benefits:

    1. Only one request is required
    2. Better SEO

    Disadvantages:

    1. Occupying Server Resources
    2. It is not conducive to the separation of front and rear ends, and the development efficiency is low

The cache

The significance of caching is to reduce requests and use more local resources, giving users a better experience and reducing the pressure on the server. The best practice is to use strong caching whenever possible and invalidate the client’s cache when the file changes.

There are two types of caches: strong caches are controlled by Headers and have a higher priority than negotiated caches

  • Strong cache
    • The server notifies the browser of a cache time during which the browser requests direct use of the cache rather than direct requests
    • Strong cache based on the request headerExpiresandCache-ControlTo control the
  • Negotiate the cache
    • Generally, when the strong cache expires, a confirmation is sent to the server whether the local cache needs to be updated. If not, 304 is returned, otherwise the entire file is returned

Photo source:Front-end cache summary -HTTP cache

Static resources use CDN

CDN is a group of Web servers distributed in different geographical locations. The closer the server is, the faster the speed is. When users access the CDN, they will take it from the nearest CDN server, which can disperse the pressure of the main server and improve the access speed and stability.

File compression

Proper file resource compression can effectively reduce transfer volume, reduce return time, and improve user experience.

Thanks to Webpack and Node

  • HTMLCompression:HtmlWebpackPlugin
  • CSSCompression:MiniCssExtractPlugin
  • HTMLCompression:HtmlWebpackPlugin

Using Gzip compression in a request can be enabled by adding the Gzip identifier to the accept-Encoding header in the HTTP request header, as well as by nginx configuration

  • NginxYou can refer to the enabling modeJuejin. Cn/post / 684490…

Code layer

1. Place the CSS at the top of the file and the Javascript file at the bottom

All CSS and JS placed in the head block rendering, but CSS does not block DOM parsing

If you want to put JS in the investment department, you can add the defer attribute to the script tag to download asynchronously and defer execution.

2. The icon

Use the font icon iconfont instead of image links

3. Image optimization

  • Image compression

    • Tools compression

    • Webpack compression

      For engineering projects, image-webpack-loader can be configured in Webpack for image compression

  • Using picture sprites

  • Use the font icon library

  • Use base64 format

  • Use CSS instead of images

  • Use CDN images

  • Lazy loading of images

  • Responsive image loading —– media query

  • Progressive images

  • Before using webP images, check whether your browser supports them

4. webpackThe subcontractsplitChunks

5. Removeconsole.log,SourceMap

Reference documentation

  • Yahoo! Catch
  • web-performance
  • Front-end cache summary -HTTP cache