2009-07-27 14 views
6

Zrobiłem kilka wyszukiwania na ten temat, ale nie można znaleźć żadnej najlepszej praktyki lub zalecenia - a może dlatego, że nie ma żadnych. Używam wszelkiego rodzaju wtyczek jQuery w mojej witrynie, oprócz TinyMCE i kilku innych wtyczek oraz specyficznego dla mojej witryny pliku JS. Do tego mam trzy arkusze stylów ..... i jest coraz więcej, gdy strona rośnie!Ile jest zbyt dużo w <HEAD>?

Czy istnieje jakiś "limit" lub coś, na co warto zwrócić uwagę, w tym skrypty w tagu? Wiem, że każde z nich jest kolejnym żądaniem HTTP, które musi zostać ukończone, ale jeśli wszystkie są zminimalizowane i tak małe, jak tylko możliwe, czy będą jakieś problemy?

<link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/redmond.css" /> 
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/style.css" /> 
    <link rel="stylesheet" type="text/css" href="http://mysite.com/assets/css/jqueryFileTree.css" /> 

    <!--[if gte IE 7]> 
     <link rel="stylesheet" type="text/css" href="http://mysite.com/scripts/style.ie.css" /> 
    <![endif]--> 

    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery-ui.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jqueryFileTree.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jqminmax.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.corner.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.jeditable.js"></script> 
    <script type="text/javascript" src="http://mysite.com/assets/js/jquery.qtip.js"></script> 

    <script type="text/javascript" src="http://mysite.com/assets/plugins/tinymce/tiny_mce.js"></script> 

    <script type="text/javascript" src="http://mysite.com/assets/js/latitude.js"></script> 
+0

Czy czas pobierania nie ma znaczenia? O co pytasz? Jak wolne pobieranie jest zbyt wolne? –

+0

Tak, czas pobierania jest ważny. Ale nie znam sposobu na łatwe łączenie plików JS i zastanawiałem się, co myślą inni ludzie o tym, ile jest "za dużo". –

+2

Narzędzie "kot" UNIX to dobry sposób na połączenie plików JS. – Quentin

Odpowiedz

8

Nie dobrze!

Polecam łączenie tych plików w jeden js i jeden css za pomocą skryptu przed wdrożeniem do życia. Istnieje wiele powodów, dlaczego to nie jest dobre, patrz poniższy link, aby uzyskać więcej informacji:

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

Edit: Aby odpowiedzieć na dalsze Nie istnieją żadne ograniczenia dotyczące liczby plików, ale większość przeglądarek może mają tylko 2 połączenia (dla witryny) z serwerem sieciowym w tym samym czasie i tym samym ładują twoje pliki js 2 na raz. YSlow plugin dla firefox pokaże ci wykres, w jaki sposób pliki są pobierane.

Jeśli korzystasz z ASP.NET ten artykuł codeproject może pomóc, jeśli jesteś na Linuksie, to może pomóc this.

Edit: prosty plik wsadowy w systemie Windows (do podłączenia do swoich narzędzi Build) byłoby

@echo off 
copy file1.js + file2.js + file3.js merged.js /b 
+1

Jak połączyć pliki JS? Po prostu skopiuj cały kod do jednej gigantycznej rzeczy, a następnie ją zminimalizuj? –

+0

C/P po minifikacji też powinno działać. – millimoose

+0

Pomiędzy tym a biblioteką YUICompress, myślę, że powinienem być w porządku. Dzięki za wszystkie dane wejściowe! –

1

Im więcej plików CSS i JS, do których odwołujesz się na stronie, tym więcej czasu zajmie załadowanie. Znacznie lepiej jest połączyć je w jak najmniejszą liczbę plików.

+1

Wiele przeglądarek otworzy 2 równoczesne połączenia z serwerem, skutecznie sparafrazując pobieranie, są sztuczki, które możesz zrobić, przechowując zawartość w innych domenach/subdomenach, aby oszukać przeglądarkę w konfiguracji większej niż te 2 połączenia, aby pobrać rzeczy. Jest to równowaga między rozmiarem i liczbą plików. – nos

2

Jeśli pomaga Ci to poczuć się lepiej, wiele innych witryn jest "ładowanych" w ten sposób, a pliki js są buforowane niemal we wszystkich nowoczesnych (a nawet starych) przeglądarkach. Jedna rzecz, która może pomóc, to połączenie pliku jquery z jednym hostowanym na stronie googleapis, ponieważ może istnieć szansa, że ​​jakaś inna strona łączy się z tym samym plikiem jQuery, który jest tam przechowywany i jest już w ich pamięci podręcznej:

http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js

Twój serwer powinien już zoptymalizować pliki, automatycznie włączając kompresję gzip, ale sprawdź dokładnie.

+0

Wciąż będzie działać bardzo wolno w przypadku obciążeń "zimnej pamięci podręcznej", np. pierwsza wizyta. I są dane z Yahoo, które mówią, że duży procent odwiedzin witryny to zimny bufor. – Frozenskys

0

Nie wiem, czy istnieje istnieje dobra odpowiedź na tego rodzaju pytania, ale jeśli Interesuje Cię optymalizacja, cała ich liczba została wykonana przez Yahoo !: http://developer.yahoo.com/performance/rules.html.

Osobiście staram się ignorować większość tych zasad, po prostu dlatego, że rzeczy, które buduję, nie są aż tak duże.

4

Przeglądarki mają ograniczenie liczby jednoczesnych żądań do domeny, dzięki czemu mogą spowolnić ładowanie innych elementów na stronie. Na przykład IE8 has a limit of 6 concurrent connections, and IE7 has a limit of 2.

Zalecam łączenie plików hostowanych lokalnie, odnoszenie się do innych na zewnątrz (np. W Google) i potencjalnie przenoszenie innych użytkowników na dół strony, aby nie opóźniać ładowania.

Można łączyć skrypty z wieloma narzędziami internetowymi, takimi jak jsCompress. Ma kartę "Przesyłanie plików", więc możesz po prostu przesłać wszystkie swoje pliki js, a to spowoduje kompresję i zminimalizowanie.

Istnieją również narzędzia po stronie serwera, które zrobią to za Ciebie. Nie mówisz, jakiej technologii używasz po stronie serwera, ale na przykład w świecie PHP możesz użyć Minify.

Powiązane problemy