Ile prędkości uzyskuje się z RequireJS/AMD w JS? [zamknięte]

Question

Ile prędkości uzyskuje się z RequireJS/AMD w JS? [zamknięte]

O ile szybciej jest requirjs na dużej stronie internetowej?

Czy ktoś zrobił jakieś testy szybkości dużych stron, które używają asynchronicznego ładowania vs Nie?

Na przykład, używając szkieletu z wieloma widokami (>100), czy lepiej mieć obiekt views, który zostanie załadowany wszystkimi widokami naraz i będzie zawsze dostępny, czy też wszystkie powinny być ładowane asynchronicznie w razie potrzeby?

Również, czy są jakieś różnice w tych rozważaniach dla mobile vs pulpit? Słyszałem, że chcesz ograniczyć liczbę zapytań na telefon komórkowy zamiast rozmiaru.

26

javascript performance asynchronous requirejs amd

Author: Varun Singh, 2012-07-18

Source

2 answers

To pytanie jest już trochę stare, ale pomyślałem, że dodam swoje przemyślenia.

Całkowicie zgadzam się z rharper w używaniu r.js do łączenia całego kodu do produkcji, ale jest też przypadek dzielenia funkcjonalności.

W przypadku aplikacji jednostronicowych myślę, że posiadanie wszystkiego razem ma sens. W przypadku bardziej tradycyjnych stron internetowych opartych na dużej skali, które mają interakcje ze Stronami, może to być dość uciążliwe i skutkować ładowaniem dużo niepotrzebnego kodu dla wielu użytkowników.

Podejście, z którego korzystałem kilka razy to

zdefiniuj podstawowe moduły (potrzebne na wszystkich stronach, aby działały poprawnie), to zostanie połączone w jeden plik.
tworzenie modułu ładującego, który rozumie zależności DOM i ścieżki do modułów
na doc.gotowa Pętla przez moduły loader i asynchroniczne Ładowanie potrzebne do zwiększenia funkcjonalności zgodnie z potrzebami konkretnych stron.

Zaletą jest to, że zachowujesz początkową wagę strony w dół, a ponieważ Dodatkowe skrypty są ładowane asynchronicznie po załadowaniu strony, postrzegana wydajność powinna być szybsza. To powiedziawszy, wszystkie funkcjonalności ładowane w ten sposób powinny być traktowane jako progresywne ulepszenie (np. ajax na formularzach) tak, aby w przypadku powolnego ładowania lub błędów podstawowa funkcjonalność była nadal dostępna.

9

Author: andy t,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:53:38

score 68 · Accepted Answer

Nie wierzę, że intencja wymaga.js {[2] } jest ładowanie wszystkich skryptów asynchronicznie w produkcji . W development asynchroniczne ładowanie każdego skryptu jest wygodne, ponieważ można wprowadzać zmiany w projekcie i przeładowywać bez kroku "kompilacji". Jednak w production powinieneś połączyć wszystkie swoje pliki źródłowe W jeden lub więcej większych modułów za pomocą R.js optimizer . Jeśli twój duży webapp może odroczyć Ładowanie podzbiór Twoich modułów do późniejszego czasu (np. po konkretnej akcji użytkownika) moduły te mogą być optymalizowane oddzielnie i ładowane asynchronicznie w produkcji.

Jeśli chodzi o szybkość ładowania jednego dużego pliku JS vs wielu mniejszych plików, ogólnie:

"zmniejsz żądania HTTP" stało się ogólną maksymą przyspieszającą wydajność frontend, a to jest problem, który jest jeszcze bardziej istotny w dzisiejszym świecie przeglądarek mobilnych (często działających w sieciach, które są rząd wielkości wolniej niż połączenia szerokopasmowe). [odniesienie]

Ale są inne względy, takie jak:

Mobile Caches: iPhone ' y ograniczają rozmiar plików, które buforują , więc duże pliki mogą wymagać pobrania za każdym razem, dzięki czemu wiele małych plików jest lepszych.
Użycie CDN: Jeśli używasz wspólnej biblioteki 3rd party, takiej jak jQuery, prawdopodobnie najlepiej nie umieszczać jej w dużym pojedynczym pliku JS i zamiast tego ładować to z CDN, ponieważ użytkownik witryny może już mieć go w pamięci podręcznej z innej witryny (odniesienie ). aby uzyskać więcej informacji, zobacz aktualizację poniżej
Lazy Eval : moduły AMD mogą być leniwie analizowane i ewaluowane, umożliwiając pobieranie przy ładowaniu aplikacji, odkładając koszt parse+eval do momentu, gdy moduł będzie potrzebny. Zobacz ten artykuł i serię innych starszych artykułów, do których się odwołuje.
Target Browser : przeglądarki ograniczają liczba jednoczesnych pobrań na nazwę hosta. Na przykład IE 7 pobierze tylko dwa pliki z danego hosta jednocześnie. Inne ograniczają się do 4, a inne do 6. [odniesienie]

Wreszcie, oto dobry artykuł Steve ' a Soudersa , który podsumowuje kilka technik ładowania skryptów.

Update: Re wykorzystanie CDN: Steve Souders opublikował szczegółową analizę korzystania z CDN dla bibliotek stron trzecich (np. rozważania, za i przeciw.