NFsec Logo

Web performance – DNS Prefetching

21/01/2013 w Techblog Brak komentarzy.  (artykuł nr 386, ilość słów: 318)

D

NS Prefetching polega na próbie rozwiązania innej nazwy domenowej przed kliknięciem użytkownika na link znajdujący się w tej domenie. Co to oznacza w praktyce? Na przykład strona nfsec.pl hostuje wszystkie swoje pliki graficzne za pomocą usługi CDN (ang. Content Delivery Network) w domenach img(1|2|3).nfsecstatic.pl oraz używa API pod adresem api.nfsec.pl. Jeśli na stronie głównej lub podstronach strony nfsec.pl będą znajdowały się aktywne linki lub zasoby wykorzystujące w/w nazwy domenowe – to dopiero w momencie kliknięcia użytkownika na wybrany link lub odwołanie się do konkretnego zasobu (np. wyświetleniu obrazka) – przeglądarka dokona rozwiązania DNS, czyli przetłumaczenia nazwy domenowej na konkretny adres IP.

Mechanizm DNS Prefetching zaimplementowany w przeglądarkach Chrome, czy Firefox (oraz innych: Safari 5+, IE9) pozwala na rozwiązanie nazw DNS jeszcze zanim użytkownik kliknie na wybrany link lub nastąpi odwołanie do konkretnego zasobu. W ten sposób jeśli nazwa domenowa została rozwiązana „w tle” z wyprzedzeniem, a użytkownik zdecyduje się użyć linku lub zasobów wykorzystujących inne domeny – nie doświadczy on opóźnienia spowodowanego czasem na rozwiązanie nazw domenowych na adresy IP. Cała praca w tym mechanizmie jest wykonywana równolegle wraz z wczytywaniem konkretnej strony (nie opóźniając jej wczytywania) przez przeglądarkę, wykorzystując przy tym minimalne zasoby procesora i łącza sieciowego. W momencie, gdy użytkownik spowoduje akcje na którejkolwiek z rozwiązanych już nazw domenowych – zaoszczędzi średnio od 50 – 200 milisekund przy nawigacji po tych zasobach (w zależności od wydajności serwerów DNS, z których korzysta użytkownik).

Dla powyższego przykładu – wystarczy, że na stronie nfsec.pl w sekcji HEAD dodamy informacje dla przeglądarek, jakie domeny mają być rozwiązane jeszcze przed ich wywołaniem przez użytkownika:

<link rel="dns-prefetch" href="http://api.nfsec.pl/">
<link rel="dns-prefetch" href="http://img1.nfsecstatic.pl/">
<link rel="dns-prefetch" href="http://img2.nfsecstatic.pl/">
<link rel="dns-prefetch" href="http://img3.nfsecstatic.pl/">

Więcej informacji: Improving Page Performance With HTML5 DNS Prefetch

Kategorie K a t e g o r i e : Techblog

Tagi T a g i : , , , , , , ,

Zostaw odpowiedź.

Musisz być zalogowany by móc komentować.