There are many small techniques and practices that speed up a web application. Most reduce a few milliseconds here and there. Collectively they add up to real, human perceivable performance improvements. Each time the browser needs to connect to a new domain DNS resolution must occur. This is where the browser goes through the process of querying domain name servers to find the domain's IP address or location on the Internet.
There are many factors that affect how fast DNS resolution happens. I have been watching DNS resolution times this year. Some DNS services are finely tuned and distributed and offer resolution as fast as 10ms. Poorly configured name servers take between 200-400ms to resolve. A typical time is around 50-70ms. These are just observations, I have not been logging the data. Domain resolution time can also vary each time, there is no absolute resolution time for a domain.
According to HTTPArchive.org the average URL makes requests across 17 domains. My personal observations routinely see as many as 40 or 50 domains. The first call to each domain requires DNS resolution. All requests on each domain is delayed by the number of ms require to resolve the address. The delay negates domain sharding performance gains.
A new feature supported by modern browsers is dns-prefetch. This is a drective you can add to your page's HEAD telling the browser what domains the URL might use to fetch content. In my book's example movie application I use this technique to perform early DNS resolution on the Flixster CDN domains.
<link rel="dns-prefetch" href="//content1.flixster.com/"><link rel="dns-prefetch" href="//content2.flixster.com/"><link rel="dns-prefetch" href="//content3.flixster.com/"><link rel="dns-prefetch" href="//content4.flixster.com/"><link rel="dns-prefetch" href="//content5.flixster.com/"><link rel="dns-prefetch" href="//content6.flixster.com/"><link rel="dns-prefetch" href="//content7.flixster.com/"><link rel="dns-prefetch" href="//content8.flixster.com/"><link rel="dns-prefetch" href="//content9.flixster.com/"><link rel="dns-prefetch" href="//content10.flixster.com/">If you have had a chance to read my book High Performance Single Page Web Applications you know the example application uses the Rotten Tomatoes API to retrieve movie details. Each movie has a set of movie poster images. Those images are hosted by the Flixster CDN across 10 sub-domains, content1-10.flixster.com. Since the application cannot predict which domain the data uses you cannot select which domain needs to be resolved, thus I added dns-prefetch for each possible domain.
This is a simple web performance optimization technique. Knowing what domains your application might use and pre-fetching the domain can shave some milliseconds per domain from your loading experience.
