Существует ли правильный порядок, в котором атрибуты должны указываться при связывании внешних файлов? - PullRequest
4 голосов
/ 13 апреля 2011

При объявлении внешних файлов в HTML, таких как .css или .js, существует ли правильный порядок размещения атрибутов ссылки? Например:

<link rel="stylesheet" type="text/css" href="../_css/style.css">

или

<link type="text/css" rel="stylesheet" href="../_css/style.css">

или

<link href="../_css/style.css" type="text/css" rel="stylesheet">

Имеет ли это значение?

Тот же вопрос касается атрибутов для связи с внешними файлами JavaScript.

Спасибо за ваше время.

Ответы [ 2 ]

8 голосов
/ 13 апреля 2011

Нет, порядок атрибутов не имеет значения.

2 голосов
/ 16 марта 2016

Любой заказ является действительным HTML, но просто из любопытства я подумал, будет ли внешний файл загружаться раньше, если атрибут href был первым. Я создал 3 документа, каждый из которых имел <link> с позициями атрибута href по-разному, потребовалось 200 дополнительных атрибутов, чтобы увидеть разницу. По крайней мере, в Chrome, чем раньше вы поставите href, тем лучше. rel также следует поместить раньше, так как это помогает браузеру решить, загружать ли файл.

Диапазон задержки от («Очистить кэш и полная перезагрузка» до «Очередь») * 10

  • Без дополнительных атрибутов: 19,5 мс - 25 мс
  • href перед дополнительными атрибутами: 17,5 мс - 23,5 мс
  • href после дополнительных атрибутов: 21,5 мс - 27,5 мс

Даже с 200 дополнительными атрибутами дополнительная задержка составляла максимум 10 мс (27,5-17,5).

Когда я работал над внешним интерфейсом, я всегда верил, что не существует такой вещи, как бесполезная микрооптимизация, но это действительно так.

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css?id=none">
</head>
<body>
	
</body>
</html>

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css?id=before" data-attr-1="1" data-attr-2="2" data-attr-3="3" data-attr-4="4" data-attr-5="5" data-attr-6="6" data-attr-7="7" data-attr-8="8" data-attr-9="9" data-attr-10="10" data-attr-11="11" data-attr-12="12" data-attr-13="13" data-attr-14="14" data-attr-15="15" data-attr-16="16" data-attr-17="17" data-attr-18="18" data-attr-19="19" data-attr-20="20" data-attr-21="21" data-attr-22="22" data-attr-23="23" data-attr-24="24" data-attr-25="25" data-attr-26="26" data-attr-27="27" data-attr-28="28" data-attr-29="29" data-attr-30="30" data-attr-31="31" data-attr-32="32" data-attr-33="33" data-attr-34="34" data-attr-35="35" data-attr-36="36" data-attr-37="37" data-attr-38="38" data-attr-39="39" data-attr-40="40" data-attr-41="41" data-attr-42="42" data-attr-43="43" data-attr-44="44" data-attr-45="45" data-attr-46="46" data-attr-47="47" data-attr-48="48" data-attr-49="49" data-attr-50="50" data-attr-51="51" data-attr-52="52" data-attr-53="53" data-attr-54="54" data-attr-55="55" data-attr-56="56" data-attr-57="57" data-attr-58="58" data-attr-59="59" data-attr-60="60" data-attr-61="61" data-attr-62="62" data-attr-63="63" data-attr-64="64" data-attr-65="65" data-attr-66="66" data-attr-67="67" data-attr-68="68" data-attr-69="69" data-attr-70="70" data-attr-71="71" data-attr-72="72" data-attr-73="73" data-attr-74="74" data-attr-75="75" data-attr-76="76" data-attr-77="77" data-attr-78="78" data-attr-79="79" data-attr-80="80" data-attr-81="81" data-attr-82="82" data-attr-83="83" data-attr-84="84" data-attr-85="85" data-attr-86="86" data-attr-87="87" data-attr-88="88" data-attr-89="89" data-attr-90="90" data-attr-91="91" data-attr-92="92" data-attr-93="93" data-attr-94="94" data-attr-95="95" data-attr-96="96" data-attr-97="97" data-attr-98="98" data-attr-99="99" data-attr-100="100" data-attr-101="101" data-attr-102="102" data-attr-103="103" data-attr-104="104" data-attr-105="105" data-attr-106="106" data-attr-107="107" data-attr-108="108" data-attr-109="109" data-attr-110="110" data-attr-111="111" data-attr-112="112" data-attr-113="113" data-attr-114="114" data-attr-115="115" data-attr-116="116" data-attr-117="117" data-attr-118="118" data-attr-119="119" data-attr-120="120" data-attr-121="121" data-attr-122="122" data-attr-123="123" data-attr-124="124" data-attr-125="125" data-attr-126="126" data-attr-127="127" data-attr-128="128" data-attr-129="129" data-attr-130="130" data-attr-131="131" data-attr-132="132" data-attr-133="133" data-attr-134="134" data-attr-135="135" data-attr-136="136" data-attr-137="137" data-attr-138="138" data-attr-139="139" data-attr-140="140" data-attr-141="141" data-attr-142="142" data-attr-143="143" data-attr-144="144" data-attr-145="145" data-attr-146="146" data-attr-147="147" data-attr-148="148" data-attr-149="149" data-attr-150="150" data-attr-151="151" data-attr-152="152" data-attr-153="153" data-attr-154="154" data-attr-155="155" data-attr-156="156" data-attr-157="157" data-attr-158="158" data-attr-159="159" data-attr-160="160" data-attr-161="161" data-attr-162="162" data-attr-163="163" data-attr-164="164" data-attr-165="165" data-attr-166="166" data-attr-167="167" data-attr-168="168" data-attr-169="169" data-attr-170="170" data-attr-171="171" data-attr-172="172" data-attr-173="173" data-attr-174="174" data-attr-175="175" data-attr-176="176" data-attr-177="177" data-attr-178="178" data-attr-179="179" data-attr-180="180" data-attr-181="181" data-attr-182="182" data-attr-183="183" data-attr-184="184" data-attr-185="185" data-attr-186="186" data-attr-187="187" data-attr-188="188" data-attr-189="189" data-attr-190="190" data-attr-191="191" data-attr-192="192" data-attr-193="193" data-attr-194="194" data-attr-195="195" data-attr-196="196" data-attr-197="197" data-attr-198="198" data-attr-199="199" data-attr-200="200">
</head>
<body>
	
</body>
</html>

<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" data-attr-1="1" data-attr-2="2" data-attr-3="3" data-attr-4="4" data-attr-5="5" data-attr-6="6" data-attr-7="7" data-attr-8="8" data-attr-9="9" data-attr-10="10" data-attr-11="11" data-attr-12="12" data-attr-13="13" data-attr-14="14" data-attr-15="15" data-attr-16="16" data-attr-17="17" data-attr-18="18" data-attr-19="19" data-attr-20="20" data-attr-21="21" data-attr-22="22" data-attr-23="23" data-attr-24="24" data-attr-25="25" data-attr-26="26" data-attr-27="27" data-attr-28="28" data-attr-29="29" data-attr-30="30" data-attr-31="31" data-attr-32="32" data-attr-33="33" data-attr-34="34" data-attr-35="35" data-attr-36="36" data-attr-37="37" data-attr-38="38" data-attr-39="39" data-attr-40="40" data-attr-41="41" data-attr-42="42" data-attr-43="43" data-attr-44="44" data-attr-45="45" data-attr-46="46" data-attr-47="47" data-attr-48="48" data-attr-49="49" data-attr-50="50" data-attr-51="51" data-attr-52="52" data-attr-53="53" data-attr-54="54" data-attr-55="55" data-attr-56="56" data-attr-57="57" data-attr-58="58" data-attr-59="59" data-attr-60="60" data-attr-61="61" data-attr-62="62" data-attr-63="63" data-attr-64="64" data-attr-65="65" data-attr-66="66" data-attr-67="67" data-attr-68="68" data-attr-69="69" data-attr-70="70" data-attr-71="71" data-attr-72="72" data-attr-73="73" data-attr-74="74" data-attr-75="75" data-attr-76="76" data-attr-77="77" data-attr-78="78" data-attr-79="79" data-attr-80="80" data-attr-81="81" data-attr-82="82" data-attr-83="83" data-attr-84="84" data-attr-85="85" data-attr-86="86" data-attr-87="87" data-attr-88="88" data-attr-89="89" data-attr-90="90" data-attr-91="91" data-attr-92="92" data-attr-93="93" data-attr-94="94" data-attr-95="95" data-attr-96="96" data-attr-97="97" data-attr-98="98" data-attr-99="99" data-attr-100="100" data-attr-101="101" data-attr-102="102" data-attr-103="103" data-attr-104="104" data-attr-105="105" data-attr-106="106" data-attr-107="107" data-attr-108="108" data-attr-109="109" data-attr-110="110" data-attr-111="111" data-attr-112="112" data-attr-113="113" data-attr-114="114" data-attr-115="115" data-attr-116="116" data-attr-117="117" data-attr-118="118" data-attr-119="119" data-attr-120="120" data-attr-121="121" data-attr-122="122" data-attr-123="123" data-attr-124="124" data-attr-125="125" data-attr-126="126" data-attr-127="127" data-attr-128="128" data-attr-129="129" data-attr-130="130" data-attr-131="131" data-attr-132="132" data-attr-133="133" data-attr-134="134" data-attr-135="135" data-attr-136="136" data-attr-137="137" data-attr-138="138" data-attr-139="139" data-attr-140="140" data-attr-141="141" data-attr-142="142" data-attr-143="143" data-attr-144="144" data-attr-145="145" data-attr-146="146" data-attr-147="147" data-attr-148="148" data-attr-149="149" data-attr-150="150" data-attr-151="151" data-attr-152="152" data-attr-153="153" data-attr-154="154" data-attr-155="155" data-attr-156="156" data-attr-157="157" data-attr-158="158" data-attr-159="159" data-attr-160="160" data-attr-161="161" data-attr-162="162" data-attr-163="163" data-attr-164="164" data-attr-165="165" data-attr-166="166" data-attr-167="167" data-attr-168="168" data-attr-169="169" data-attr-170="170" data-attr-171="171" data-attr-172="172" data-attr-173="173" data-attr-174="174" data-attr-175="175" data-attr-176="176" data-attr-177="177" data-attr-178="178" data-attr-179="179" data-attr-180="180" data-attr-181="181" data-attr-182="182" data-attr-183="183" data-attr-184="184" data-attr-185="185" data-attr-186="186" data-attr-187="187" data-attr-188="188" data-attr-189="189" data-attr-190="190" data-attr-191="191" data-attr-192="192" data-attr-193="193" data-attr-194="194" data-attr-195="195" data-attr-196="196" data-attr-197="197" data-attr-198="198" data-attr-199="199" data-attr-200="200" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css?id=after">
</head>
<body>
	
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...