Powinieneś umieścić swój kod JS w osobnym pliku, ponieważ ułatwia to testowanie i rozwijanie. Pytanie o sposób podania kodu to inna sprawa.
Oddzielne obsługiwanie HTML i JS ma tę zaletę, że klient może buforować JS. Wymaga to wysłania odpowiednich nagłówków, aby klient nie wydawał nowego żądania za każdym razem. Buforowanie jest problematyczne, jeśli chcesz wykonać aktualizację, a tym samym unieważnić pamięć podręczną klienta. Jedną z metod jest umieszczenie numeru wersji w nazwie pliku, np /static/mylibrary-1.12.2.js.
Jeśli JS znajduje się w osobnym pliku, nie możesz ograniczyć dostępu do niego: Trudno (technicznie: niemożliwe) stwierdzić, czy żądanie do pliku JS zostało wysłane, ponieważ odwoływałeś się do niego na stronie HTML lub dlatego, że ktoś chce go pobrać bezpośrednio. Możesz jednak używać plików cookie i odmawiać obsługi klientów, którzy nie przesyłają określonych plików cookie (ale byłoby to głupie).
Służenie JS w kodzie HTML zwiększa rozmiar każdej strony - ale jest to OK, jeśli mało prawdopodobne jest, aby klient wyświetlał wiele stron. Ponieważ klient nie wysyła osobnego żądania do JS, ta strategia ładuje stronę szybciej - przynajmniej po raz pierwszy, ale istnieje próg rentowności, w którym buforowanie jest lepsze. Możesz dołączyć JS np. Przez PHP.
Tutaj klient nie potrzebuje osobnego dostępu do pliku JS, który można ukryć, jeśli chcesz. Ale każdy może nadal wyświetlać kod JS wewnątrz HTML.
Inne strategie minimalizujące czas ładowania obejmują
Minimalizacja JS, która zmniejsza rozmiar obsługiwanego pliku JS. Ponieważ minimalizacja odbywa się tylko raz podczas wdrażania kodu, jest to bardzo skuteczna metoda oszczędzania bajtów. OTOH to sprawia, że kod jest trudniejszy do zrozumienia dla zainteresowanych gości.
Związana z minimalizacją jest praktyka łączenia wszystkich plików JS w jednym pliku. Zmniejsza to liczbę niezbędnych żądań.
Kompresja, która dodaje narzut obliczeniowy dla każdego żądania zarówno na kliencie, jak i na serwerze. Jednak czas (de-) kompresji jest zwykle krótszy niż czas przesyłania nieskompresowanych danych. Kompresja jest zazwyczaj obsługiwana w przejrzysty sposób przez oprogramowanie serwera.
Te techniki mają również zastosowanie do innych zasobów, takich jak obrazy.
- Obrazy można wstawiać do HTML lub CSS za pomocą adresów URL danych. Jest to praktyczne tylko w przypadku małych, prostych obrazów, ponieważ kodowanie base64 zwiększa rozmiar. To może wciąż być szybsze niż kolejne żądanie.
- Wiele małych obrazów (ikon, przycisków) można połączyć w jeden obraz, a następnie wyodrębnić jako duszki.
- Obrazy mogą być zmniejszane przez serwer do rozmiaru, w którym są faktycznie używane na stronie internetowej, co oszczędza przepustowość. Porównaj miniatury.
- W przypadku niektórych grafik obrazy tekstowe, takie jak SVG, mogą być znacznie mniejsze.
Jeśli dosłownie masz tylko jedną stronę, to tak, lepiej (z punktu widzenia wydajności), aby obsłużyć wszystko w jednym pliku ... arkusze stylów, JavaScript, a nawet obrazy (małe obrazy z identyfikatorami URI danych). Eliminuje to dodatkowe żądania HTTP wymagane do odzyskania zasobów zewnętrznych, które są stosunkowo wolne.
Plik wynikowy powinien zostać spakowany gzip przed podaniem, co znacznie zmniejszy rozmiar odpowiedzi na cały tekst.
Nadal należy rozważyć umieszczenie dużych obrazów poza stroną, ponieważ istnieją ograniczenia dotyczące rozmiaru identyfikatorów URI danych i zgodności przeglądarki. (np. IE8 ma limit 32 KB, co odpowiada rzeczywistemu rozmiarowi pliku około 23 KB ze względu na naturę kodowania base64.)
Nie. W najlepszym razie kod można zaciemnić, aby „ukryć” go przed przypadkowym obserwatorem, ale nie zapewnia on żadnej rzeczywistej ochrony.
źródło
Kod JS po stronie klienta musi być widziany przez przeglądarkę (to znaczy, jeśli strona musi korzystać bezpośrednio z JS) - oznacza to, że musi zostać pobrany przez przeglądarkę.
Nie możesz mieć przeglądarki używającej JS na stronie, jeśli nie może jej pobrać.
Pod tym względem nie ma różnicy, czy wstawisz JS, czy umieścisz go w pliku, chociaż powszechną praktyką jest używanie pliku JS (oddzielenie obaw dla jednego).
Jeśli masz kod, którego nie chcesz ujawniać w przeglądarce, musisz użyć kodu po stronie serwera (powiedzmy node.js, php, perl, asp.net, jsp - jest tak wiele opcji) i wejść z nim w interakcję z przeglądarki - przy ładowaniu strony początkowej lub przy użyciu AJAX .
źródło
Zależy to od ilości kodu i tego, jak poważnie traktujesz bycie programistą / inżynierem oprogramowania, a nie tylko programistą. Współpracowałem z grupą projektantów, którzy umieścili krótkie fragmenty kodu bezpośrednio w HTML, a mimo to skurczyłem się - faktycznie zadziałało.
Chociaż nie jest to coś, co sam bym zrobił, a jeśli chcesz poznać najlepsze praktyki tworzenia oprogramowania, zdecydowanie zalecamy, abyś umieścił wszystko w zewnętrznym
*.jspliku i załadował go za pomocą<script>tagów.Jeśli chodzi o drugi punkt, nie można odmówić użytkownikowi lub przeglądarce przeglądania kodu, istnieje coś takiego,
obfuscationco spowoduje, że kod będzie trudniejszy do odczytania, jednak wydajność spadnie.źródło
Lepiej jest utworzyć zewnętrzny plik dla kodu JS. Lepiej też mieć jeden lub dwa pliki, które podajesz klientowi. Ale lepiej jest też mieć podzielony kod JS na wiele plików ze względu na problemy z utrzymaniem. Aby to zrobić, możesz użyć preprocesorów, takich jak Gulp , które połączą różne pliki JS w jeden plik.
Udostępnianie mniejszej liczby plików jest lepsze, ponieważ klient będzie miał mniej żądań HTTP do obsługi.
Tak, oczywiście jest to szybsze, ponieważ wykonujesz tylko jedno żądanie HTML, podczas gdy robisz wiele żądań (co najmniej 2) z zewnętrznym kodem JS. Dzieje się tak tylko wtedy, gdy kod JS nie jest zminimalizowany po żadnej ze stron, a to nie bierze pod uwagę, jak trudniej będzie utrzymać kod, jeśli wszystko jest na jednej stronie HTML.
Nie, nie możesz. Kod JS, podobnie jak kod CSS i kod HTML, jest treścią statyczną. Oznacza to, że gdy już znajdzie się w przeglądarce, klient będzie mógł pobrać ją i jej zawartość całkowicie. Każdy plik, obraz, skrypt można pobrać. Ale możesz zminimalizować / uglifikować swój kod, aby ludziom było trudniej go używać. Jest to tylko konsekwencja uglifikacji, która została stworzona przede wszystkim dla wydajności.
źródło
Wiele korzyści z rozdzielania treści HTML i javascript na osobne pliki:
źródło