Niedawno przeczytałem manifest Yahoo Najlepsze praktyki dotyczące przyspieszenia Twojej witryny sieci Web . Zalecają umieszczenie włączenia JavaScript na dole kodu HTML, kiedy tylko jest to możliwe.
Ale gdzie dokładnie i kiedy?
Powinniśmy to umieścić przed zamknięciem </html>czy po? A przede wszystkim, kiedy powinniśmy jeszcze umieścić to w <head>dziale?
Odpowiedzi:
Istnieją dwie możliwości tworzenia naprawdę dyskretnych skryptów:
</body></html>)Drugi może być szybszy, ponieważ oryginalne badanie Yahoo pokazało, że niektóre przeglądarki próbują załadować pliki skryptów po naciśnięciu znacznika skryptu i dlatego nie ładują reszty strony, dopóki nie zakończą. Jednakże, jeśli twój skrypt ma część „gotową”, która musi zostać wykonana, gdy tylko DOM będzie gotowy, być może będziesz musiał mieć to w głowie. Kolejną kwestią jest układ - jeśli skrypt ma zmienić układ strony, to chcesz go załadować tak wcześnie, jak to możliwe, aby strona nie musiała długo rysować się przed użytkownikami.
Jeśli zewnętrzna witryna skryptowa znajduje się w innej domenie (np. Zewnętrzne widżety), warto umieścić ją na dole, aby nie opóźniała ładowania strony.
W przypadku jakichkolwiek problemów z wydajnością przeprowadź własne testy porównawcze - to, co może być prawdą w pewnym momencie, gdy badanie jest wykonywane, może się zmienić wraz z lokalną konfiguracją lub zmianami w przeglądarkach.
Nigdy nie jest tak wycięty i suchy - Yahoo zaleca umieszczanie skryptów tuż przed </body>tagiem zamykającym , co stworzy iluzję, że strona ładuje się szybciej na pustej pamięci podręcznej (ponieważ skrypty nie blokują pobierania reszty dokumentu). Jeśli jednak masz kod, który chcesz uruchomić podczas ładowania strony, rozpocznie się on dopiero po załadowaniu całej strony. Jeśli umieścisz skrypty w <head>tagu, zaczną się one uruchamiać wcześniej - więc w przygotowanej pamięci podręcznej strona będzie się ładować szybciej.
Ponadto przywilej umieszczania skryptów na dole strony nie zawsze jest dostępny. Jeśli chcesz uwzględnić w swoich widokach wbudowane skrypty, które zależą od biblioteki lub innego kodu JavaScript, który został wcześniej załadowany, musisz załadować te zależności w <head>tagu.
Podsumowując, zalecenia Yahoo są interesujące, ale nie zawsze mają zastosowanie i powinny być rozpatrywane indywidualnie dla każdego przypadku.
<script>tagi wbudowane nie oznaczają natrętnego kodu JavaScript.
<script>Tagi są niezależne od znaczników i mogą być używane z kodem, który ulepsza interfejs, ale nie jest wymagany. Dlatego <script>tagi wbudowane nie są z natury irytujące .
<script>tagów do zakodowania tych wartości w zmiennych javascript, do użytku np. edycja bezpośrednia lub inne podobne zachowanie.
Jak powiedzieli inni, umieść go przed zamykającymi tagami HTML body .
Niedawno otrzymaliśmy wiele telefonów od klientów, którzy skarżyli się, że ich witryny działają bardzo wolno. Odwiedziliśmy ich lokalnie i stwierdziliśmy, że załadowanie jednej strony zajęło im 20-30 sekund. Myśląc, że serwery działają źle, zalogowaliśmy się - ale zarówno serwery WWW, jak i sql były ~ 0% aktywności.
Po kilku minutach zdaliśmy sobie sprawę, że zewnętrzna witryna nie działa, do której łączyliśmy się z tagami śledzenia JavaScript. Oznaczało to, że przeglądarki naciskały na tag skryptu w sekcji głównej witryny i czekały na pobranie pliku skryptu.
Tak więc, przynajmniej w przypadku skryptów innych firm / zewnętrznych, zalecałbym umieszczenie ich na ostatniej stronie. Gdyby były niedostępne, przeglądarka przynajmniej do tego momentu załadowałaby stronę - a użytkownik byłby tego nieświadomy.
Podsumowując, w oparciu o powyższe sugestie:
</body>tagiem.</body>chyba że masz ważny powód, aby umieścić skrypty w głowie.Jeśli chcesz majstrować przy pozycji swoich skryptów, YSlow jest świetnym narzędziem do nadawania smaku, jeśli ma to poprawić lub zaszkodzić wydajności. Umieszczenie javascript w niektórych pozycjach dokumentu może naprawdę skrócić czas ładowania strony.
Nie, nie powinno być po, </html>ponieważ byłoby to nieważne. Najlepszym miejscem do umieszczania skryptów jest tuż przed rozszerzeniem</body>
Dzieje się tak po prostu dlatego, że większość przeglądarek przestaje renderować stronę podczas oceny dostarczonego przez Ciebie skryptu. Tak więc w porządku jest umieszczanie kodu nieblokującego w dowolnym miejscu na stronie (myślę głównie o rzeczach, które dołączają funkcje do onLoadzdarzenia, ponieważ wiązanie zdarzeń jest tak szybkie, że jest efektywnie wolne). Wielki zabójca znajduje się na początku strony, umieszczając skrypt serwera reklam, który może zapobiec wczytywaniu strony przed całkowitym pobraniem reklam, sprawiając, że czas ładowania strony się wydłuża
Jeśli umieścisz go na dole, ładuje się jako ostatni, co przyspiesza prędkość, z jaką użytkownik może zobaczyć stronę. Musi być przed finałem, </html>ale w przeciwnym razie nie będzie częścią DOM.
Jeśli jednak kod jest potrzebny natychmiast, umieść go w głowie.
Najlepiej umieścić elementy takie jak widżety bloga na dole, aby jeśli się nie ładowały, nie wpłynęło to na użyteczność strony.