This is the 17th day of my participation in Gwen Challenge

As a user, when opening a web page, he is often concerned about the time needed from entering the web address to displaying the complete page at last. The shorter the time, the better the user experience.

So what happens when you type a URL into a browser?

The whole process is as follows:

  • Domain name resolution
  • To upload messages from your PC to the server. The 1P, ARP, and 0SPF protocols are required
  • Initiate a TCP three-way handshake
  • After a TCP connection is established, an HTTP request is sent
  • The server responds to the HTP request
  • The browser parses the HTM code and requests resources (such as JS, CSS, images, and so on) in the HTML code
  • Disconnecting TCP Connections
  • The browser renders the page to the user

More details are available

1. Reduce CPU computing and network requests

2. Load resource optimization

  • Static resource consolidation and compression.

1.js 2.js 3.js — 123.js

  • Static resource caching (browser caching policy).

When using a strong cache such as Cache-Control or Expires, no requests are sent to the server until the cache expires. When the strong cache expires, a request is sent to the server using a last-Modified or eTAG negotiated cache. If the resource has not changed, the server returns a 304 response and the browser continues loading the resource from the local cache. If the resource is updated, the server sends the updated resource to the browser with a 200 response

// Through the link name control, the link name is also changed after the content is modified.
<script src="abc_1.js" ></script> 
Copy the code

Use CDN to make static resources load faster.

3. Render optimization

Put the CSS in the head and the JS after the body

Lazy loading of images

Reduce DOM operations and cache DOM operations

Reduce DOM operations and try to combine multiple operations together

Event throttling

3. Use the font iconfont instead of the image icon

Font icon is to make the icon into a font, use the same as font, you can set properties, such as font size, color and so on, very convenient. And the font icon is a vector graph, not distortion. Another advantage is that the generated files are extremely small.

Redirect use

Avoid redirects as much as possible. When a page is redirected, it delays the transfer of the entire HTML document. Nothing is rendered on the page until the HTML document arrives, and no components are downloaded, degrading the user experience

If you must use redirects, such as HTTP to HTTPS, use 301 permanent redirects instead of 302 temporary redirects. If you use 302, you will be redirected to an HTTPS page every time you visit HTTP. Permanent redirects, after the first redirect from HTTP to HTTPS, return the PAGE directly to HTTPS each time you visit HTTP

5. Use DNS preresolution

When the browser accesses a domain name, it resolves the DNS to obtain the IP address of the domain name. During the resolution process, the cache is read by the browser cache, system cache, router cache, ISP(carrier)DNS cache, root DNS server, top-level DNS server, and primary DNS server until the IP address is obtained

DNS Prefetch refers to domain names that may be used after DNS Prefetch is resolved in advance according to rules defined by the browser, so that the resolution results are cached in the system cache, shortening the DNS resolution time and improving the access speed of websites

The method is to write several link tags inside the head tag


<link rel="dns-prefecth" href="https://www.google.com">
<link rel="dns-prefecth" href="https://www.google-analytics.com">
Copy the code

Resolving DNS for these sites ahead of time, because it is parallel, does not clog page rendering, which can shorten resource load time

6. Modules are loaded on demand

Webpack provides two similar techniques, with the preferred approach being the use of import() syntax that conforms to the ECMAScript proposal. The second is to use webpack-specific require.ensure

7, reduce redraw reflux

Reducing backflow and redrawing is reducing manipulation of the DOM

1. Change the className directly, or use cssText if changing the style dynamically (reduce the number of inline styles)

2. Allow the elements to be processed offline and then updated together

When a DocumentFragment is cached, a backflow and redraw are triggered

Using the display: None technique, only two reflows and redraws are raised

Use cloneNode(True or False) and replaceChild techniques to cause a backflow and redraw

3. Do not frequently access attributes that cause browser flush queues. If you do, use caching

4. Take elements out of the animation flow and reduce the size of the Render tree

Sacrifice smoothness for speed

6. Avoid table layout

7. Avoid javascript expressions in IE