Wiele plików javascript/css: najlepsze praktyki?

Question

Mam około 7 plików Javascript teraz (dzięki różnym wtyczkom jQuery) i 4-5 plików CSS. Ciekawi mnie, jaka jest najlepsza praktyka radzenia sobie z tymi, w tym, gdzie w dokumencie powinny być załadowane? YSlow mówi mi, że pliki JavaScript powinny być - jeśli to możliwe - dołączane na końcu. Koniec ciała? Mówi, że delimeter wydaje się być, czy piszą treść. Wszystkie moje pliki Javascript są funkcjami i kodem jQuery (wszystko zrobione, gdy jest gotowe()), więc powinno być OK.

Czy powinienem dołączyć jeden plik CSS i jeden plik JavaScript, a do których zaliczam resztę? Czy powinienem połączyć wszystkie moje pliki w jeden? Czy powinienem umieścić JavaScript w tagach na samym końcu mojego dokumentu?

Edytuj: FWIW tak to jest PHP.

Answer 1

Proponuję użyć opcji PHP Minify, która pozwala utworzyć pojedyncze żądanie HTTP dla grupy plików JS lub CSS. Minify obsługuje również GZipping, Compression i HTTP Headers dla buforowania po stronie klienta.

Edycja: Minify umożliwia również ustawienie żądania, tak aby dla różnych stron można było uwzględnić różne pliki. Na przykład podstawowy zestaw plików JS wraz z niestandardowym kodem JS na niektórych stronach lub po prostu podstawowe pliki JS na innych stronach.

Podczas pracy nad rozwojem zawiera wszystkie pliki w normalny sposób, a kiedy zbliżysz się do przejścia do uruchomienia produkcji, zminimalizuj i dołącz wszystkie pliki CSS i JS do jednego żądania HTTP. To bardzo proste w konfiguracji i pracy.

Również tak, pliki CSS powinny być ustawione w nagłówku, a pliki JS wyświetlane na dole, ponieważ pliki JS mogą zapisywać na Twojej stronie i mogą powodować poważne problemy z przekroczeniem limitu czasu.

Oto jak powinno zawierać pliki JS:

</div> <!-- Closing Footer Div --> 
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script> 
</body> 
</html> 

Edit: Można również użyć Cuzillion aby zobaczyć, jak strona powinna być ustawiona w górę.

Answer 2

Nie wyraźnie powiedział, że masz dostęp do rozwiązania po stronie serwera, ale zakładając, że ty, ja zawsze zniknął z metody wykorzystującej PHP aby wykonać następujące czynności:

jQuery. js.php:

<?php 
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata'); 
foreach($jquery as $file) 
{ 
echo file_get_contents('jquery.' . $file . '.js'); 
} 
?> 

z fragmencie powyżej, w miejscu, ja następnie wywołać plik podobnie jak ja normalnie:

<script type="text/javascript" src="jquery.js.php"></script> 

i potem jeśli jestem świadom dokładnego funkcjonalność i” idę potrzebuję, po prostu przekazuję moje wymagania jako ciąg zapytania (jquery.js.php? r = core, effects). Robię dokładnie to samo dla moich wymagań CSS, jeśli są one kiedykolwiek rozgałęzione.

Answer 3

Oto, co robię: używam maksymalnie dwóch plików JavaScript i ogólnie jednego pliku CSS dla każdej strony. Rozumiem, które pliki JS będą wspólne dla wszystkich moich stron (lub wystarczająco dużo, żeby było blisko - plik zawierający jQuery byłby dobrym kandydatem), a następnie łączę je i pomniejszają za pomocą jsmin-php, a następnie buforuję połączony plik . Jeśli są jakieś pliki JS, które są specyficzne tylko dla tej jednej strony, łączę je, kopiuję i cache również w jeden plik. Pierwszy plik JS będzie wywoływany na wielu stronach, a drugi tylko na jednym lub kilku.

Możesz użyć tej samej koncepcji z CSS, jeśli chcesz z css-min, choć zazwyczaj używam tylko jednego pliku dla CSS. Jedną rzeczą dodatkową, kiedy tworzę plik pamięci podręcznej, umieszczam mały kod PHP na początku pliku, aby służył jako plik GZipped, który jest właściwie tam, gdzie i tak dostaniesz większość swoich oszczędności. Będziesz także chciał ustawić nagłówek wygasania, aby przeglądarka użytkownika miała większą szansę na buforowanie pliku. Wierzę, że możesz również włączyć GZipping przez Apache.

Do buforowania sprawdzam, czy czas utworzenia pliku jest starszy niż ustawiony przeze mnie czas. Jeśli tak, to ponownie utworzę plik pamięci podręcznej i udostępnię go, w przeciwnym razie otrzymam istniejący buforowany plik.

Answer 4

Pomysł zminimalizowania i łączenia plików jest świetny.

zrobić coś podobnego na mojej stronie, ale aby ułatwić rozwój Proponuję jakiś kod, który wygląda tak:

if (evironment == production) { 
    echo "<style>@import(/Styles/Combined.css);</style>" 
} else { 
    echo "<style>@import(/Styles/File1.css);</style>" 
    echo "<style>@import(/Styles/File2.css);</style>" 
} 

Powinno to pozwolić zachować swoje pliki oddzielić podczas dev do łatwego zarządzania i użyć połączonej plik podczas wdrożenie do szybszego ładowania stron. Zakłada to, że możesz łączyć pliki i zmieniać zmienne w ramach procesu wdrażania.

Zdecydowanie zajmij się umieszczaniem js na dole i css u góry zgodnie z zaleceniami YUI, ponieważ utrzymanie niskiego poziomu JS ma wymierny wpływ na wygląd reszty strony i wydaje się znacznie szybsze.

Answer 5

Nie polecam używania rozwiązania opartego na javascript (np. PHP Minify), aby uwzględnić twoje css, ponieważ twoja strona stanie się bezużyteczna, jeśli odwiedzający ma wyłączony javascript.

Answer 6

ja również mają tendencję do kopiowania + wklej wszystkie moje pluginy jquery do jednego pliku: jquery.plugins.js następnie odwołują się do

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"> 

dla rzeczywistej biblioteki jQuery.