Principles of DNS
DNS (Domain Name System), as a distributed database where domain names and IP addresses are mapped to each other. When the browser accesses a domain name, it needs to resolve DNS once to obtain the IP address of the corresponding domain name. During the resolution process, the cache is gradually read in the order of browser cache, system cache, router cache, ISP (operator) DNS cache, root domain name server, top-level domain name server, and primary domain name server , until an IP address is obtained.
DNS Prefetch principle
DNS Prefetch is a domain name that may be used after the early resolution according to the rules defined by the browser, so that the resolution result is cached in the system cache, shortening the DNS resolution time, and improving the speed of website access.
How to use DNS Prefetch
Automatic resolution Chromium uses the href attribute of the hyperlink to find the host name to be pre-resolved. When the a tag is encountered, Chromium will automatically resolve the domain name in href to an IP address. This resolution process is processed in parallel with the user browsing the web page. But to ensure security, in HTTPS
The page will not be automatically parsed. Manually parse the following markup on the page
<link rel="dns-prefetch" href="与当前不同域名的链接">The link tag above will cause Chromium to prefetch the "img.alicdn.com" parsing.
Automatic resolution control When we want to enable the automatic resolution function on the HTTPS page, add the following mark
<meta http-equiv="x-dns-prefetch-control" content="on">When we want to turn off the automatic parsing function on the HTTP page, add the following mark
<meta http-equiv="x-dns-prefetch-control" content="off">When do you not need to use DNS preload?
If all your resource files are under the same domain name. When the user requests the page, the browser has already resolved the domain name, and all the JS, CSS, and image files that need to be loaded are under the same domain name, so there is no need to preload your own domain name. If you have to force preloading, you will let the browser do another parsing, which increases the page load time and efficiency. (Note: dns-prefetch needs to be used with caution, repeated DNS pre-resolution on multiple pages will increase the number of repeated DNS queries)
When do I need to use DNS preload?
Now, if you have a large number of third-party plug-ins and resources, such as various advertising JS, front-end frameworks, etc. need to be loaded through a domain other than your own.
Based on the current popularity of front-end frameworks, loading a lot of third-party resources has gradually become the norm. At the same time, although the browser is parallel when loading third-party resources. The browser will first parse the resources under which domain name is not in the order in the code. Some resources that need to be loaded in advance may cause slow DNS resolution, which may cause the subsequent loading of the code to fail to execute or the style to be wrong.
Therefore, DNS preloading can effectively improve the page loading speed and make the page loading effect more in line with expectations.
