Jak mogę obniżyć koszty ładowania dużych bibliotek JS?

23

Jeśli korzystam z dużej biblioteki JavaScript dla mojej strony, jak mogę się upewnić, że nie wpłynie to negatywnie na korzystanie z witryny przez użytkownika?

javascript performance Macha
źródło

Odpowiedzi:

25

Możesz zrobić 4 rzeczy.

  1. Zminimalizuj swój plik JS. Spowoduje to usunięcie wszystkich komentarzy i białych znaków, aby zmniejszyć jego rozmiar.
  2. Połącz pliki JS na każdej stronie, aby był tylko jeden plik.
  3. Skorzystaj z pakietu, aby skompresować pliki podczas wysyłania. To sprawi, że będą jeszcze mniejsze
  4. Umieść Javascript, który nie jest wymagany od razu na dole strony, aby ładował się na końcu. Umożliwi to użytkownikowi przeglądanie i korzystanie ze strony nawet przed całkowitym załadowaniem JS.

A niektórzy inni sugerowali:

  • Apache automatycznie obsługuje kompresję (i buforowanie skompresowanej zawartości), co znacznie upraszcza zarządzanie plikami
  • Prawidłowe buforowanie JavaScript zapewni duże korzyści.
  • Domeny z symbolami wieloznacznymi (z wieloma identyfikatorami URI) umożliwią większą liczbę jednoczesnych połączeń. Pobieranie wstępne dotyczy nie tylko zdjęć /
Ben Hoffman
źródło
Jest więcej rzeczy, które możesz zrobić i lepsze sposoby na ich wykonanie. Apache automatycznie obsługuje kompresję (i buforowanie skompresowanej zawartości), co znacznie upraszcza zarządzanie plikami. Prawidłowe buforowanie javascript przyniesie duże korzyści. Domeny z symbolami wieloznacznymi (z wieloma identyfikatorami URI) umożliwią większą liczbę jednoczesnych połączeń.
Pobieranie
21

Jeśli korzystasz ze zwykłych bibliotek (takich jak jQuery, Prototype lub Dojo), możesz przenieść plik do Google i zmusić go do obsługi , daje to kilka korzyści:

  • Nie musisz się martwić o minimalizowanie i kompresowanie plików itp
  • To nie twoja przepustowość
  • Pliki te pochodzą z innej domeny, więc możesz (przynajmniej częściowo) obejść limit 2 równoległych żądań na nazwę hosta
  • Jeśli masz szczęście, użytkownik odwiedził już inną witrynę, która korzystała z tej samej biblioteki od tego samego dostawcy, więc ma ją już w pamięci podręcznej przeglądarki.

Uwaga: Wersja, o którą prosisz, może mieć duży wpływ na charakterystykę buforowania: zapytanie o jQuery 1.4.2 da ci plik, który może być buforowany przez rok, ale 1.4 może być buforowany tylko przez godzinę.

Cebjyre
źródło
1
+ 1 dla CDN i scriptsrc.net, aby było jeszcze łatwiej;)
Agos
1
Czy możesz rozwinąć swoją „notatkę”? Dlaczego istnieje różnica w czasie buforowania?
theycallmemorty,
2
@theycallmemorty: Chociaż nie sprawdziłem dokumentów, zakładam, że dzieje się tak, ponieważ określając 1.4.2, jesteś bardzo konkretny w kwestii wersji, którą chcesz, a pytając o 1.4, mówisz w zasadzie „daj mi najwięcej najnowsza wersja poniżej 1.4 ", więc nie buforują jej tak mocno.
Zhaph - Ben Duguid
Warto również zauważyć, że Microsoft udostępnia niektóre biblioteki JS (jQuery i niektóre specyficzne dla MS) w swojej sieci CDN, która obsługuje również protokół https (który nie obsługuje wielu innych skryptowych sieci CDN) asp.net/ajaxlibrary/cdn.ashx
Bert Lamb
6

Możesz umieścić całą bibliotekę w jednym pliku js i skompresować plik. Jednak tak naprawdę ma to znaczenie tylko przy pierwszym ładowaniu strony. Następnie plik js będzie buforowany w przeglądarce, w szczególności jeśli ustawisz wygasanie pamięci podręcznej wystarczająco długo. Dlatego każde kolejne trafienie nie będzie już ładować pliku js.

txwikinger
źródło
+1 za to, że możesz umieścić całą bibliotekę w jednym pliku i skompresować ją. Nie myślałem o tym.
Gordon Gustafson,
4

Oprócz powyższych odpowiedzi możesz użyć kompilatora Google Closure do automatycznego kompresowania i optymalizacji JS podczas integracji z innymi bibliotekami stron trzecich (jQuery, YUI, mootools itp.)

theycallmemorty
źródło
0

Jeśli masz wiele elementów strony i dostęp do oddzielnej domeny, możesz rozważyć hostowanie wszystkich plików statycznych, w tym dużego pliku JS w drugiej domenie.

Jak zauważa Steve Souders w swoim blogu o witrynach o wysokiej wydajności -

... w niektórych sytuacjach warto wziąć garść zasobów pobieranych z jednej domeny i podzielić je na wiele domen. Nazywam to dzieleniem domen. Pozwala to równolegle pobierać więcej zasobów, co skraca całkowity czas ładowania strony.

gdzie indziej pisze ...

Przeglądarki otwierają ograniczoną liczbę połączeń na domenę ... Dzielenie lub dzielenie żądań na dwie domeny, w przeciwieństwie do jednej domeny, powoduje szybszą stronę, szczególnie w IE 6 i 7

mvark
źródło