preface

Most network communication is based on TCP/IP, and TCP/IP is based on IP addresses. Therefore, computers can only identify IP addresses such as “202.96.134.133” when communicating on the network, but not domain names.

Marking websites with IP addresses is hard for us to remember. So when we visit a website, we type a more semantic domain name into the browser’s address bar to get the page we want. This is because a domain name system (DNS) “translates” our domain name into the corresponding IP address and then calls up the corresponding page.

DNS is defined

  • The Domain Name System (DNS) is a Domain Name and IP addressMutual mappingOne of theDistributed database. For example, it’s likeThe phone bookThe domain name is the user name and the IP address is the phone number

The DNS

  • The DNSIs toThe process of converting domain names to IP addresses
  • 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 step by step in the order of browser cache, system cache, router cache, ISP(carrier)DNS cache, root DNS server, TOP-LEVEL DNS server, and master DNS server.Until we get an IP address

DNS Prefetch DNS prefetch

define

Resolve domain names that may be used later in advance, so that the resolution results are cached in the system cache, shorten the DNS resolution time, and improve the access speed of websites

Note: only shorten DNS resolution time, does not advance resource downloadCopy the code

classification

Implicit DNS preresolution: Preloads links or resources that have foreign domains on a page

  • HTTP web page

Automatically preparse (outdomain image),

  • HTTPS web page

No automatic pre-resolution: For security reasons – preventing eavesdroppers from inferring the hostname of the hyperlink displayed in HTTPS pages based on DNS pre-resolution

Explicit DNS preresolution: Preloads domains that do not appear on the page

This is typically set in the REL property of the tag

Add the following to the tag at the top of the document:

expand

Preliminary connection rel = “preconnect”

Similar to DNS preresolution, Preconnect not only performs DNS preresolution, but also performs TCP handshakes and establishes transport layer protocols

<link rel="preconnect" href="http://example.com">

Perfecting rel = “prefetch”

If we are certain that a resource (image/script/CSS file) will definitely be used in the future, we can have the browser pre-request the resource and put it in the browser cache. Unlike DNS preresolution, prefetch actually requests and downloads the resource and stores it in the cache

<link rel="prefetch" href="image.png / test.js / test.css">

Pre-rendered rel = “prerender”

For a TAB page that a user will definitely open in the future: download all the resources, create the DOM structure, complete the page layout, apply CSS styles, execute JavaScript scripts, etc. When the user actually visits the link, the hidden page switches to visible, making the page appear to load instantaneously

<link rel="prerender" href="http://example.com">

The premise is that the user must open the TAB page in the future; otherwise, unnecessary resources will be wasted