Question

在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文件的属性。

感谢您的时间。

Answer 1

不，属性顺序无关紧要。

Answer 2

任何订单都是有效的HTML，但出于好奇，我想知道如果href属性是第一个，外部文件是否会更快下载。我创建了3个文档，每个文档的<link> href属性位置不同，需要200个额外的属性才能看到差异。至少在Chrome中，你越早越好href。 rel也应该尽早放置，因为这有助于浏览器决定是否下载文件。

延迟范围从（＆＃34;空缓存和硬重新加载＆＃34;开始＆＃34;排队＆＃34;）* 10

无额外属性：19.5ms - 25ms
href：17.5ms - 23.5ms
href：21.5ms - 27.5ms

即使有200个附加属性，额外延迟也最多为10毫秒（27.5-17.5）。

在前端工作时，我始终认为没有无用的微优化，但这确实是一个。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

链接外部文件时是否有正确的顺序列出属性？

2 个答案: