DNS optimization

Before introducing dnS-prefetch, let’s first mention the current mainstream approach to DNS optimization.

Generally, a DNS resolution takes 20-120ms, so to optimize DNS, we can consider two directions:

  1. Reduce the number of DNS requests
  2. Shorten DNS resolution timedns-prefetch

What is dnS-prefetch?

Dns-prefetch (DNS prefetch) is a measure to optimize front-end network performance. According to the rules defined by the browser, it resolves the domain names that may be used later in advance, so that the resolution results are cached in the system cache, which shortens the DNS resolution time and improves the access speed of websites.

Why dnS-prefetch?

Every time a browser sends a request from a (third-party) server, it resolves the cross-domain name to an IP address through DNS resolution before the browser can send the request.

If multiple requests are sent to the same server at any one time, DNS resolution is triggered multiple times and repeatedly. This will cause the overall page load to be delayed.

As we know, DNS resolution doesn’t take much bandwidth, but it can cause high latency, especially on mobile networks.

Therefore, in order to reduce the delay caused by DNS resolution, we can effectively shorten the DNS resolution time by dnS-Prefetch preresolution technology.

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

Principles behind dns-prefetch

When the browser accesses a domain name, it resolves the DNS to obtain the IP address of the domain name. In the parsing process, follow:

  • Browser cache
  • System cache
  • Router cache
  • ISP DNS cache
  • Root DNS server
  • Top-level domain name server
  • Master domain name server

Read the cache step by step until you get the IP address.

Dns-prefetch is to cache the parsed IP address in the system.

In this way, dnS-prefetch effectively reduces DNS resolution time. The DNS cache is performed on the local operating system. As a result, the DNS finds the corresponding IP address in the system cache during the resolution process.

In this way, subsequent parsing steps are not required, thus shortening DNS parsing time.

If the browser first resolves a domain name to an IP address and caches it to the operating system, the next DNS resolution time can be as low as 0-1ms.

If the result is not cached in the system, then the router’s cache needs to be read, and the subsequent parsing time is about 15ms minimum.

If the router cache also does not exist, you need to read the ISP (carrier) DNS cache. Generally, it takes 80-120ms to read the ISP (carrier) DNS cache for common domain names such as Taobao.com and Baidu.com. For uncommon domain names, it takes 200-300ms on average.

Generally speaking, most websites to the operator can find IP.

That is to say, DNS-prefetch can improve the DNS resolution process by 15-300ms, especially for websites that reference a lot of other domain names

Browser DNS cache with DNS-prefetch

Modern browsers also have a browser DNS cache to optimize DNS resolution.

The IP address is cached after the first DNS resolution. As for the cache duration, each browser is different. For example, Chrome has an expiration time of 1 minute, during which DNS requests are not made again.

Every time Chrome starts up, it automatically and quickly resolves the top 10 domain names recorded during the browser’s most recent startup. So frequently visited urls have no DELAY in DNS resolution and open faster.

Dns-prefetch is equivalent to making DNS cache in the local operating system after the browser cache. Personally, IT is to ensure the browser cache and try to resolve DNS locally, so as to make another layer of DNS resolution optimization.

In general, the DNS cache time on the system is longer than that on the browser.

Browser and system DNS cache time

TTL(time-to-live) is the duration of a domain name resolution record in the DNS server

  • The DNS cache time of the browser is independent of the TTL value returned by the DNS server. The cache time depends on the Settings of the browser.

  • The system cache will refer to the TTL value of the DNS server response, but not exactly the TTL value.

Many domestic and international platforms have TTL values in seconds. Many default values are 3600, which is the default cache for 1 hour.

dns-prefetchdisadvantages

The biggest drawback of DNS-Prefetch is that it is used too much.

Excessive prefetch will cause excessive DNS resolution, which is a burden to the network.

Best practices

Keep these three points in mind:

  1. Dns-prefetch is only valid for DNS lookups on cross-domain domains, so avoid using it to point to the same domain. This is because by the time the browser sees the prompt, the IP behind your site domain has already been resolved.

  2. In addition to link, dnS-prefetch (and other resource hints) can be specified as HTTP headers by using HTTP link fields:

Link: <https://fonts.gstatic.com/>; rel=dns-prefetch
Copy the code
  1. considerdns-prefetch 与 preconnect(Preliminary connection)Cue pairing.

Because dnS-Prefetch only performs DNS lookups, unlike PreConnect, which establishes a connection to the server.

If the site is serviced over HTTPS, the combination covers DNS resolution, establishing a TCP connection, and performing a TLS handshake. Combining the two provides an opportunity to further reduce perceived latency for cross-domain requests. As follows:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="dns-prefetch" href="https://fonts.gstatic.com/">
Copy the code

Note: If your page needs to establish connections to many third party domains, pre-wiring them is counterproductive. Preconnect prompts are best used only for the most critical connections. For the rest, simply use to save the first step of the DNS lookup.

Refer to the link

  • Prefetching
  • dns-prefetch MDN
  • DNS Prefetch principle
  • Front-end optimization :DNS pre-resolution improves page speed
  • Browser DNS cache and DNS preresolution
  • DNS cache time of the browser and operating system