Kolejność tagów w

Czy to ma jakiekolwiek znaczenie w jakiej kolejności <link> LUB <script> lub <meta> znaczniki są w <head></head>?

(głupie pytanie, ale jedna z tych rzeczy, o których nigdy nie myślałem, aż do teraz.)

 45
Author: Chris J Allen, 0000-00-00

14 answers

Przyjęta odpowiedź jest trochę zła, w zależności od kodowania dokumentu. Jeśli w nagłówku HTTP nie jest wysyłane żadne kodowanie, przeglądarka musi określić kodowanie z samego dokumentu.

Jeśli dokument używa deklaracji <meta http-equiv="Content-Type" … do deklarowania kodowania, to każdy znak o wartości ASCII (kod znaku musi być wartością ASCII, zgodnie z HTML 4 spec. Dlatego ważne jest, aby Ta meta deklaracja występuje przed jakimkolwiek innym elementem, który może zawierać znaki inne niż ASCII.

 14
Author: Konrad Rudolph,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 15:02:14

Optymalizacja

Według ludzi z Yahoo! powinieneś umieścić CSS na górze i na dole ponieważ skrypty blokują równoległe pobieranie. Ale jest to głównie kwestia optymalizacji i nie ma krytycznego znaczenia dla strony faktycznie działającej. Joeri Sebrechts zauważył, że Cuzillion to świetny sposób, aby to przetestować i zobaczyć poprawę prędkości na własne oczy.

Wiele Arkuszy Stylów

Jeśli jesteś łączenie wielu arkuszy stylów, kolejność ich łączenia może mieć wpływ na stylowanie stron w zależności od specyfiki selektorów . Innymi słowy, jeśli masz dwa arkusze stylów, które definiują ten sam selektor na dwa różne sposoby, ten ostatni będzie miał pierwszeństwo. Na przykład:

Stylesheet 1:

h1 { color: #f00; }

Stylesheet 2:

h1 { color: #00f; }

W tym przykładzie, h1 elementy będą miały kolor #00f, ponieważ został zdefiniowany jako ostatni z tym samym specyficzność:

Wiele Skryptów

Jeśli używasz wielu skryptów, kolejność ich użycia może być ważna, jeśli jeden ze skryptów zależy od czegoś w innym skrypcie. W takim przypadku, jeśli skrypty są połączone w złej kolejności, niektóre skrypty mogą powodować błędy lub nie działać zgodnie z oczekiwaniami. Jest to jednak w dużej mierze zależne od tego, jakich skryptów używasz.

 40
Author: Joe Lencioni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:45:36

Zaleca się umieścić meta tag z kodowaniem znaków jak najwyżej. Jeśli kodowanie nie jest zawarte (lub różni się od) w nagłówku odpowiedzi żądanej strony, przeglądarka będzie musiała odgadnąć, jakie jest kodowanie. Dopiero, gdy znajdzie ten meta tag, wie, z czym ma do czynienia i będzie musiał ponownie przeczytać wszystko, co już przeanalizował.

Patrz na przykład metody Wskazywania zestawu znaków .

 10
Author: Benno Richters,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 11:42:32

Jedna ważna rzecz do zapamiętania: jeśli używasz znacznika zgodnego z Internet Explorerem Meta X-UA do przełączania trybów renderowania dla IE, musi to być pierwsza rzecz w głowie:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
&lt/head>
 8
Author: Keith Williams,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 11:51:43

Meta nie ma znaczenia, ale link (dla css) i skrypt mają znaczenie.

Skrypt zablokuje większość przeglądarek przed renderowaniem strony, dopóki skrypty nie zostaną załadowane. Dlatego, jeśli to możliwe, umieść je nie w głowie, ale w ciele.

Css link nie zablokuje renderowania strony.

 5
Author: Randy Sugianto 'Yuku',
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 11:27:29

Zwykle zaleca się, aby znacznik <script> był możliwie niżej na stronie (nie w głowie, ale w ciele).

Poza tym, myślę, że to nie robi wielkiej różnicy, ponieważ ciało nie może być analizowane, chyba że sekcja <head> jest całkowicie załadowana. I chcesz, aby twój tag <link> był w głowie, tak jak chcesz, aby Twoja stylizacja pojawiała się podczas renderowania strony przez przeglądarkę, a nie po tym!

 2
Author: Adhip Gupta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 11:29:20

Jeśli zadeklarujesz charset w elemencie meta, powinieneś to zrobić przed jakimkolwiek innym elementem.

 2
Author: JacquesB,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 11:35:36

Wcale nie głupie pytanie.
CSS powyżej znaczników skryptu z powodów już wymienionych.

CSS jest stosowany w kolejności umieszczania znaczników - im bardziej szczegółowy arkusz stylów, tym niższa powinna być kolejność.

To samo dotyczy skryptów - skrypty, które używają funkcji zadeklarowanych w innych plikach, powinny być ładowane po załadowaniu zależności.

 2
Author: Raithlin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 11:41:59

Umieść meta tag, który deklaruje charset jako pierwszy element w nagłówku. Przeglądarka wyszukuje do tej pory tylko Tag. Jeśli masz zbyt wiele rzeczy przed elementem meta, zestaw znaków może nie zostać zastosowany.

Jeśli używasz elementu podstawowego, umieść go przed wszystkimi elementami, które ładują Uri (jeśli chcesz).

 2
Author: Shadow2531,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 14:45:03

Ma znaczenie tylko wtedy, gdy jeden z połączonych plików (CSS/Javascript) zależy od innego. W takim przypadku wszystkie zależności muszą być najpierw załadowane.

Powiedzmy na przykład, że ładujesz wtyczkę jQuery, wtedy musisz najpierw załadować sam jQuery. To samo, gdy masz plik CSS z niektórymi regułami rozszerzającymi inne reguły.

 1
Author: dguaraglia,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 11:28:43

Jak już wspomniano meta opisujący charset treści powinien być pierwszym, w przeciwnym razie może to być w rzeczywistości luka bezpieczeństwa w określonej sytuacji. (przykro mi, że nie pamiętam, że sytuacja wystarczająco dobrze opisać tutaj, ale to było demostrated do mnie na web security training course)

 1
Author: Tamm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 15:45:47

Ostatnio miałem problem z przeciąganym elementem jQuery ui. Zachowywał się poprawnie w Firefoksie, ale nie w Safari. Po wielu próbach i błędach poprawka polegała na przeniesieniu moich linków css powyżej linków javascript w głowie. Bardzo dziwne, ale teraz stanie się moją standardową praktyką.

 1
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-11 05:57:52

Dla celów walidacji jako XHTML, tak. W przeciwnym razie prawdopodobnie będziesz dbać o odpowiedzi optymalizacyjne.

 1
Author: nitind,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-15 21:26:41

Nie, to nie ma znaczenia, z wyjątkiem CSS linkowania lub włączenia, ze względu na dziedziczenie CSS i fakt, że to nadpisać to, co było już stylizowane (przepraszam za mój angielski, myślę, że moje zdanie nie jest bardzo jasne :-/).

 0
Author: p4bl0,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2008-10-10 11:28:02