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">
or
<link type="text/css" rel="stylesheet" href="../_css/style.css">
or
<link href="../_cs开发者_JS百科s/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.
No, attribute order is irrelevant.
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
hrefbefore extra attributes : 17.5ms - 23.5mshrefafter 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>
加载中,请稍侯......
精彩评论