What is dns-prefetch? Front-end optimization: DNS pre-parsing improves page speed_HTML/Xhtml_Web page production

What is DNS Prefetch

DNS implements domain name to IP mapping. When accessing a site through a domain name, DNS resolution is required for each request. Currently, each DNS resolution usually takes less than 200ms. In response to the time-consuming problem of DNS resolution, some browsers use DNS Prefetch to improve the smoothness of access.
DNS Prefetch is a DNS pre-resolution technology. When browsing a web page, the browser will parse and cache the domain name in the web page when loading the web page, so that there is no need to perform DNS resolution when clicking a connection in the current web page. , reduce user waiting time and improve user experience.
The browsers that currently support DNS Prefetch include google chrome and firefox 3.5
If you want the browser to resolve a specific domain name, you can add the link tag to the page. For example:

If you want to control whether the browser side pre-resolves the domain name, you can use Http The x-dns-prefetch-control attribute of the header is controlled.
Unfortunately, only Google Chrome and Firefox 3.5 currently support the above tags

Generally speaking, the cause of this delay is not the bandwidth or load of the other party’s website, so what exactly causes this What's the situation? Zhan Lan tried to speculate, assuming that it was a DNS problem, because DNS resolution speed was probably the biggest cause of resource delay. So Zhanlan added the following code to the page header (for DNS pre-resolution):

< link rel="dns-prefetch" href="http://img.jb51.net" />

The effect is very good (the test browser is IE8), and the loading of Baidu share button is significantly improved when opening other pages!

Let’s take a brief look at dns-prefetch:

DNS is the basic protocol of the Internet, and its resolution speed seems to be easily ignored by website optimizers. Nowadays, most new browsers have been optimized for DNS resolution. A typical DNS resolution takes 20-120 milliseconds. Reducing the time and frequency of DNS resolution is a good optimization method. DNS Prefetching means that domain names with this attribute are parsed in the background without users clicking on links. Domain name resolution and content loading are serial network operations, so this method can reduce the user's waiting time and improve the user experience.
The browser’s first domain name DNS resolution search process for the website is as follows:

Browser Cache-System Cache-Router Cache-ISP DNS Cache-Recursive Search

Domain name DNS resolution and search process

Chrome has built-in DNS Prefetching technology, and Firefox 3.5 also introduced this feature. Since Chrome and Firefox 3.5 themselves have optimized settings for DNS prefetching, one of the adverse effects of setting up DNS prefetching is that it may reduce Google’s performance. User experience of Chrome browser and Firefox 3.5 browser.

Pre-parsing implementation:

1. Use meta information to inform the browser that the current page needs to be DNS pre-resolved:
2. Use the link tag in the page header to force DNS pre-resolution:

Note: dns-prefetch should be used with caution. Repeated DNS pre-resolution on multiple pages will increase the number of repeated DNS queries.
PS: DNS pre-resolution is mainly used for website front-end page optimization. Its role in SEO has not yet been verified. However, as part of enhancing user experience, rel="dns-prefetch" may be worth slowly discovering.