Czy JavaScript, do którego odwołuje się sekcja główna, powinien być obsługiwany z tej samej nazwy hosta co dokument główny?

12

Miałem wrażenie, że w celu uzyskania najlepszej wydajności JavaScript należy traktować jako treść statyczną i podawać z domeny bez plików cookie wraz z plikami CSS, obrazami itp.

Ale Google mówi tutaj: nie obsługuj wcześniej załadowanych zewnętrznych plików JS z domeny bez plików cookie

W przypadku JavaScript wymienionego w nagłówku dokumentu i wymaganego do uruchomienia strony, powinien on być obsługiwany z tej samej nazwy hosta co główny dokument. Ponieważ większość przeglądarek blokuje inne pobieranie i renderowanie, dopóki wszystkie pliki JavaScript nie zostaną pobrane, przeanalizowane i wykonane, lepiej jest uniknąć ryzyka dodatkowego wyszukiwania DNS w tym punkcie przetwarzania.

Więc teraz jestem w konflikcie. Nie jestem pewien, co oznacza „potrzebne do uruchomienia strony”.

Zwykle mam dwa odwołania JavaScript, JQuery obsługiwane z ajax.googleapis.com i plik master.js, który głównie zawiera procedury obsługi zdarzeń w funkcji $ (document) .ready (). Czy jest to potrzebne do uruchomienia strony?

Biorąc pod uwagę dostępne opcje (ajax.googleapis.com, statyczna domena bez plików cookie, oryginalna nazwa hosta), gdzie powinien być obsługiwany mój JavaScript?

James Lawruk
źródło

Odpowiedzi:

5

Więc teraz jestem w konflikcie. Nie jestem pewien, co oznacza „potrzebne do uruchomienia strony”.

To bardzo zależy od tego, jak działa Twoja strona. Zasadniczo to JavaScript musi zostać uruchomiony, zanim ktoś będzie mógł skorzystać ze strony internetowej.

Na przykład, jeśli wejdziesz na stronę http://www.weather.com/ , zobaczysz, że świetni ludzie postanowili użyć magii JavaScript, aby podpowiedzieć formularz wyszukiwania pogody. Czyli słowa Enter Zip, City or Place (e.g. Disney World)pojawiają się w polu wprowadzania tekstu. Niestety, ładowanie strony jest niewielkie, przynajmniej po mojej stronie. Tak więc, jeśli strona jest wystarczająco wolna, aby się załadować, a ty jesteś wystarczająco szybki, aby rozpocząć wpisywanie tekstu przed uruchomieniem JavaScript - co nie jest rozciągnięciem - twoje wejście może zostać zepsute przez JavaScript, który ślepo umieszcza podpowiedź tekst w polu wprowadzania.

To prawda, że ​​można tego uniknąć, sprawdzając najpierw dane wejściowe użytkownika w polu tekstowym lub po prostu rezygnując z tej anachronicznej techniki. Jednak nie byłby to bardzo dobry przykład.

Biorąc pod uwagę dostępne opcje (ajax.googleapis.com, statyczna domena bez plików cookie, oryginalna nazwa hosta), gdzie powinien być obsługiwany mój JavaScript?

Naprawdę nie można na nie odpowiedzieć, nie wiedząc, co robi Twój JavaScript. Ponadto, jak wspomina bpeterson76, zależy to od konkretnej sytuacji Twojej witryny. Czyli jak duża jest strona? jak dobrze jest zapotrzebowanie na spotkanie z gospodarzem? ile plików CSS, obrazów itp. ładuje? ile zasobów zewnętrznych ładuje?

W zależności od konkretnej sytuacji może to być przedwczesna optymalizacja.

George Marian
źródło
4

Reguła „wszystko, co wymagane przed rozpoczęciem renderowania strony, powinno pochodzić z tego samego serwera”, ogólnie dotyczy twojegoserwery lub inne mniejsze zasoby - sytuacje, w których wyszukiwanie DNS może zająć zauważalną ułamek sekundy (co może się szybko zsumować, jeśli obiekty są rozrzucone po wielu domenach). Przy powszechnych zasobach publicznych, takich jak pamięć podręczna Google jQuery i inne biblioteki, istnieje duża szansa, że ​​przeglądarka odwiedzającego już wykonała to wyszukiwanie DNS (ponieważ inne witryny odwołują się do treści z tej usługi) i prawdopodobnie ma też plik w pamięci podręcznej, więc nie należy wykonać transfer (lub jeśli zostanie wysłane żądanie, może po prostu otrzymać krótką odpowiedź „304 - niezmodyfikowana”). Nawet jeśli obiekt wymaga pełnego pobrania, sieć dostarczania treści Google będzie szybsza dla większości użytkowników niż operacja na mniejszą skalę.

Jedna pokrewna reguła: do obiektów, które nie są wymagane do poprawnego działania strony (tak, jak ją widzi użytkownik), należy odwoływać się jak najszybciej w głównej odpowiedzi HTTP. Na przykład, takie jak skrypty wymagane dla usług reklamowych / statystycznych (tj. Google Analytics i podobne) - przekaż użytkownikowi swoje treści tak szybko, jak to możliwe, a następnie załaduj elementy tła, które naprawdę Cię interesują. Zablokowałem kilka usług reklam / statystyk (mapując je na 127.0.0.1 w pliku hostów), ponieważ często są one zbyt wolne, a witryny, które odsyłają do nich wcześniej, po prostu dają mi pustą stronę, podczas gdy skrypty są oczekiwane odwoływania się do nich późno, abym mógł przeczytać treść, dla której jestem, podczas gdy inne rzeczy krążą w tle.

Przydatność domeny bez plików cookie do treści statycznych jest kwestią skali. Jeśli wszystko, co masz, to jeden 10-bajtowy identyfikator sesji w plikach cookie i dziesięć tysięcy odwiedzających dziennie żądających ~ 20 obiektów statycznych na wizytę, oszczędzasz tylko ~ 118 MB przepustowości na miesiąc (20 * 20 * 10000 * 31/1024/1024). Z drugiej strony, jeśli Twoja strona przechowuje w plikach cookie pliki o wartości jednego lub dwóch kilobajtów, różnica może być znacznie bardziej znacząca, zwłaszcza jeśli którykolwiek z twoich użytkowników uzyskuje dostęp do witryny za pośrednictwem wolnych połączeń (np. GPRS przez tethering do telefonu komórkowego lub - zatłoczone łącze Wi-Fi w obszarze o wysokich zakłóceniach) lub jeśli otrzymujesz miliony odwiedzin dziennie.

Podsumowując, w przypadku skryptów, które należy załadować, zanim strona będzie mogła renderować, moje preferencje to:

  1. ajax.googleapis.com lub podobny
  2. oryginalna nazwa hosta strony wywołującej
  3. statyczna domena bez plików cookie

W przypadku zasobów, które nie są niezbędne do początkowego renderowania strony, odwołaj się do nich jak najwcześniej i odwróć powyższą listę preferencji (chociaż różnica między oryginalną nazwą hosta a domeną bez plików cookie najprawdopodobniej nie jest znacząca, chyba że działasz na dużą skalę ).

David Spillett
źródło
With common public resources ... there is a good chance that your visitor's browser has already done that DNS lookup today Osobiście nie czułbym się dobrze, polegając na tym w mojej witrynie. Chciałbym, aby było tak szybko, jak to możliwe, w jak największej liczbie sytuacji. Niezależnie od tego, robisz dobre punkty. +1
George Marian
1

Google zarządza ogromną siecią treści rozproszoną na całym świecie, która przybliża treść bliżej użytkownika niż jakiemukolwiek pojedynczemu serwerowi, na którym prawdopodobnie działasz (myślę, że jest to firma Akami, ale należąca do Google). Google dostarczy twój plik do użytkownika szybciej niż twój lokalny serwer ... chyba że będą w bardzo bliskiej odległości od twojego osobistego serwera.

To pytanie krążyło w Stackoverflow, a powyższa odpowiedź wydaje się zawsze zgodna. Ale z realistycznego punktu widzenia zyski wynikające z hostingu jeden na drugim będą na dłuższą metę dość minimalne. O wiele lepsze korzyści uzyskasz dzięki zmniejszeniu, optymalizacji i zmniejszeniu ogólnej liczby żądań HTTP niż analizowanie, gdzie rzeczy są fizycznie zlokalizowane. W sytuacjach, w których zaczyna to mieć znaczenie (wykonałem zadanie, w którym strona ładowała się ponad 1,5 miliona razy dziennie, więc poprawa o 5 tys. Oznacza 5 gigabajtów oszczędności w przepustowości) zwykle jest zespół decydentów, którzy mają za zadanie zbadanie tych decyzji.

Osobiście hostuję w Google wyłącznie z tego powodu, że dostarczy mi najbardziej aktualną kopię tego, czego szukam.

bpeterson76
źródło
Gdzie hostujesz swój własny JavaScript? Statyczna domena bez plików cookie lub oryginalna nazwa hosta?
James Lawruk
Szczerze mówiąc, poza (głównie) Jquery w linii, naprawdę nie ma wiele rzeczy, które nie mogą być dynamicznie powiązane. Staram się ograniczać voodoo do minimum, używając (przede wszystkim) podstawowego interfejsu Jquery i Jquery, z możliwym wyjątkiem wtyczki Datatables. Jestem wielkim zwolennikiem koncepcji Keep it simple (głupie) i nie wydam kodu, jeśli nie jest on kompatybilny wstecz, co wyklucza wiele opcji. Jak powiedziałem powyżej, umieszczenie jednego pliku w domenie bez plików cookie nie jest aż tak wielkim problemem.
bpeterson76,
1

Należy pamiętać, że przeglądarki mają ograniczenia dotyczące liczby zasobów, które będą pobierane jednocześnie z tej samej domeny, zwykle od 2 do 6, w zależności od przeglądarki. Użycie innej domeny pozwala przeglądarce pobierać więcej rzeczy jednocześnie z Twojej domeny.

Najlepszym rozwiązaniem jest więc korzystanie z popularnej sieci CDN, takiej jak ajax.googleapis.com, ponieważ w ten sposób nie ma plików cookie. Użytkownik prawdopodobnie już przeprowadził wyszukiwanie DNS i mógł nawet buforować zasób. Sieci CDN są zoptymalizowane pod kątem szybkości i prawdopodobnie mają serwer blisko użytkownika.

Jeśli CDN nie jest opcją, jeśli masz dużo plików cookie lub masz dużo zasobów do pobrania (obrazy itp.), Użyj domeny wolnej od plików cookie (wystarczy zrezygnować z wyszukiwania DNS).

Jeśli masz niewiele zasobów (tylko jeden niestandardowy plik javascript) i kilka plików cookie (tylko niewielki identyfikator sesji) hosta z tej samej domeny.

Dobre zasoby:

http://www.phpied.com/free-falling-waterfalls/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

http://developer.yahoo.com/performance/rules.html

Adam
źródło
1

Chociaż powyższe odpowiedzi szczegółowo opisały większość twoich pytań, przyczynię się do „potrzebnych do uruchomienia strony”. Tłumaczę to na: czy ten skrypt jest niezbędny do korzystania z witryny? Z doświadczenia wynika, że ​​zazwyczaj odpowiedź brzmi „nie”. Jednak przypadki, gdybym:

  • Walidacja formularza
  • Nawigacja oparta na JavaScript (i tak nie jest idealna)
  • Jeśli układ zależy od JavaScript
  • Jeśli JavaScript lub biblioteka (jak jQuery) jest używana do krytycznych modyfikacji DOM

I wytyczne Yahlow dotyczące wydajności Yahoo w celach informacyjnych.

Taylor Edmiston
źródło