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

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?

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ęć /

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ę.

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.

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.)

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