2011-11-13 6 views
7

W bieżącym projekcie internetowym używam kilku wtyczek jQuery i inicjuję je tuż przed zamykającym znacznikiem body. Moje pytanie brzmi, czy z punktu widzenia czasu ładowania/wydajności najlepiej byłoby, gdyby wszystkie takie inicjalizacje zostały skopiowane i skopiowane do jednego, zewnętrznego pliku js? wtyczki są inicjowane w ten sam sposób na wszystkich stronach w witrynie, więc wydaje się, że ładowanie jednego, scentralizowany plik byłby najlepszy, nie? dzięki za wszelkie opinie.Czy powinienem skopiować wszystkie moje źródła JavaScript w jeden plik?

Odpowiedz

5

Wszystko zależy od tego, nad czym pracujesz, ale oto kilka zasad.

Żądania HTTP oznaczają koszty ogólne (szczególnie w przypadku HTTPS), więc staraj się jak najmniej zarabiać, ponieważ w przypadku urządzeń przenośnych ma to kluczowe znaczenie. jest jednak kilka wyjątków; Leniwe ładowanie plików JavaScript, które nie są potrzebne, gdy inicjalizuje się aplikacja, jest czasami inteligentne, więc są one buforowane, gdy są naprawdę potrzebne, używanie CDN do popularnych bibliotek czasami może prowadzić do zwiększenia wydajności z powodu pobierania równoległego.

pliki do pobrania tak małe, jak to możliwe, więc zminimalizuj wszystkie JavaScript i CSS, niektóre nawet pomniejsz HTML.

upewnij się, że nagłówki w pamięci podręcznej są ustawione poprawnie (niektóre zostały ustawione na rok lub więcej), a gdy wdrożona jest nowa wersja twojego skryptu, dołącz atrybut src elementu skryptu z numerem wersji, aby przeciwdziałać buforowaniu, np. : <script src="myapp.js?v=2"></script>

Czasami postrzegana wydajność jest lepsza od rzeczywistej wydajności, co oznacza; ładowanie i renderowanie HTML jest ważniejsze niż inicjalizacja aplikacji. można to zrobić poprzez asynchroniczne ładowanie plików JavaScript (poprzez wstawianie elementów skryptów z JavaScriptem, jak Google, lub za pomocą programów ładujących skrypt, które robią to za ciebie). ale prowadzi to do nowych wyzwań, takich jak kolejność wykonywania załadowanych plików lub interakcja ze stroną przed pełnym załadowaniem i przeanalizowaniem plików skryptów.

Ostatecznie zależy to w dużej mierze od architektury twojej aplikacji lub strony internetowej i od tego, jaka jest interakcja z nią, czy chcesz dokładniej wyjaśnić, podając kilka przykładów?

PM5544.

+0

dzięki za wspaniałe opinie PM5544. Jestem szczególnie ciekawy, aby dowiedzieć się więcej o asynchronicznym ładowaniu js, aby zwiększyć wydajność. Oto przykład małej witryny, którą zrobiłem dla przyjaciela, aby wyświetlić jego dzieło: http: // tinyurl.com/758ocgo Używam kilku wtyczek jQuery i chciałbym usłyszeć, czy jest coś, co powinienem robić inaczej, aby zoptymalizować wydajność. – nickpish

+0

W tym konkretnym przypadku radziłbym wykonać następujące czynności; połącz wtyczki do jednego pliku JavaScipt, zamiast je zminimalizuj. przenieś wszystkie elementy '

1

Każda znacząca ilość kodu javascript jest lepiej dostępna we wspólnym zewnętrznym pliku javascript, ponieważ można go efektywniej buforować między wszystkimi Twoimi stronami.

Kilka linii kodu umieszczonych na stronie przed zamykającym znacznikiem body w celu wywołania kodu inicjalizacyjnego w zewnętrznym pliku javascript jest całkowicie w porządku i nie spowalnia niczego, jeśli jest to najlepszy sposób uruchomienia inicjalizacji.

+0

ma sens; dzięki jfriend – nickpish

0

Tak, można zminimalizować JavaScript i CSS w pojedyncze pliki przy użyciu narzędzi takich jak YUI Compressor. Jednak umieszczenie wszystkich zasobów w pojedynczych plikach może być kłopotliwe: jeśli pliki są duże, przeglądarka może pobierać je tylko z jednego strumienia TCP, w przeciwieństwie do wielu jednoczesnych żądań. Czytaj więcej na ten temat tutaj: Loading JavaScript Resources the Fun Way

chodzi o gdzie umieścić <script> znaczników w HTML, odpowiedź znajduje się na dole strony przed zamknięciem </body> tagu. Zajrzyj na stronę Google Web Performance Best Practices.