Is there a correct order that attributes should be listed in when linking external files?

问题

When declaring external files in HTML such as .css or .js, is there a correct order in which to place the link's attributes? For example:

<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">

Does this matter?

Same question goes for attributes for linking to external JavaScript files.

Thanks for your time.

回答1:

No, attribute order is irrelevant.

回答2:

Any order is valid HTML but just out of curiosity I wondered whether the external file would get downloaded sooner if the href attribute was first. I created 3 documents each one had a <link> with the href attribute positions differently, it took 200 extra attributes to be able to see a difference. In Chrome at least, the sooner you put the href the better. rel should also be put sooner as this helps the browser to decide whether to download the file.

Delay range from ("Empty Cache and Hard Reload" to start "Queueing") * 10

No extra attributes : 19.5ms - 25ms
href before extra attributes : 17.5ms - 23.5ms
href after extra attributes : 21.5ms - 27.5ms

Even with 200 additional attributes the extra delay was a maximum of 10ms (27.5-17.5).

When working on the front-end I always believed there was no such thing as an useless micro-optimisation, but this really is one.

<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>

来源：https://stackoverflow.com/questions/5646653/is-there-a-correct-order-that-attributes-should-be-listed-in-when-linking-extern

标签

html

css

syntax