Home Home Prefetching DNS using rel=”dns-prefetch”

Prefetching DNS using rel=”dns-prefetch”

pre-feteching

In this article I will show you how to resolve DNS before a webpage is actually requested by the browser. Before you continue with this article please read my article on preloading resources and prerendering recourses. In that article I explained critical time, caching requirement and many other basic concepts which will be used in this article.

What is DNS Resolution?

Dns resolution is a process of converting a domain/hostname to an ip address required to access a resource (this process is what converts a user friendly url like: http://qnimate.com to http://85.72.179.121 ); this requires a certain time and adds to the page loading process. Dns resolution takes very less time and bandwidth therefore pre-fetching large number of domain names will not harm user experience.

How to pre-fetch DNS?

We can pre-fetch DNS by using the rel=”dns-prefetch” attribute on the link tag.

<!-- Here DNS resolution for qscutter.com domain will be done before the page is requested. -->
<link rel='dns-prefetch' href='http://qscutter.com'>

A content provided(HTTP response) can force the browser not to DNS prefetch for the domain by using the x-dns-prefetch-control: HTTP header assigned to “off”.

This response domain name will not be pre-fetched.

x-dns-prefetch-control: off

You can again enable by setting the same response to “on”.

Narayan Prusty
Pre-rendering In Browser using rel="prerender"Managing HTML Element Classes Using classList API
Comments: 1
  1. 1 year ago

    The parents and grandparents of these Amr-cianeborn Latinos were often hard-working people It really is shocking to watch the inexorably pernicious effect which the Welfare State has on the minorities.

    ReplyCancel

Leave a Reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image3 years ago 1 Comment Web Development
Share this
Related Articles