你的浏览器禁用了JavaScript, 请开启后刷新浏览器获得更好的体验!

我应该把＆lt; script＆gt;放在哪里HTML标记中的标签？

在JavaScript文档中嵌入JavaScript时，放置<script>标记和包含JavaScript的适当位置在哪里？我似乎记得你不应该将它们放在<head>部分，但放在<body>部分的开头也是不好的，因为在完全呈现页面之前必须解析JavaScript（或类似的东西））。这似乎将<body>部分的末尾作为<script>标签的逻辑位置。那么，放置<script>标签的合适位置在哪里？（这个问题引用了这个问题，其中建议JavaScript函数调用应该从<a>标签移动到<script>标签。我专门使用jQuery，但更一般的答案也是合适的。）

已邀请:

20 个回复

杭难插

以下是浏览器加载带有<script>标记的网站时发生的情况：获取HTML页面（例如index.html）开始解析HTML 解析器遇到引用外部脚本文件的<script>标记。浏览器请求脚本文件。同时，解析器阻止并停止解析页面上的其他HTML。一段时间后，脚本被下载并随后执行。解析器继续解析HTML文档的其余部分。步骤＃4会导致糟糕的用户体验。在您下载完所有脚本之前，您的网站基本上会停止加载。如果有一件事是用户讨厌它正在等待网站加载。为什么会发生这种情况？任何脚本都可以通过document.write()或其他DOM操作插入自己的HTML。这意味着解析器必须等到脚本下载完毕并且在它可以安全地解析文档的其余部分之前执行。毕竟，脚本可以在文档中插入自己的HTML。但是，大多数JavaScript开发人员在加载文档时不再操纵DOM。相反，它们会等到文档加载后再修改它。例如：

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

使用Javascript：

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

因为您的浏览器不知道my-script.js在下载之前不会修改文档。执行后，解析器停止解析。过时的推荐解决这个问题的旧方法是将<script>标记放在<body>的底部，因为这样可以确保解析器在最后才被阻塞。这种方法有其自身的问题：在解析整个文档之前，浏览器无法开始下载脚本。适用于大型脚本和大型网站的大型网站样式表，能够尽快下载脚本对性能非常重要。如果您的网站在2秒内没有加载，人们将转到另一个网站。在最佳解决方案中，浏览器将尽快开始下载脚本，同时解析文档的其余部分。现代的方法今天，浏览器支持脚本上的async和defer属性。这些属性告诉浏览器在下载脚本时继续解析是安全的。异步

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

具有async属性的脚本是异步执行的。这意味着脚本在下载后立即执行，同时不会阻止浏览器。这意味着脚本2可以下载并且可以在脚本1之前执行。根据http://caniuse.com/#feat=script-async，94.57％的浏览器支持此功能。延缓

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

具有延迟属性的脚本按顺序执行（即第一个脚本1，然后是脚本2）。这也不会阻止浏览器。与异步脚本不同，延迟脚本仅在加载整个文档后执行。根据http://caniuse.com/#feat=script-defer，94.59％的浏览器支持此功能。 94.92％至少部分支持它。关于浏览器兼容性的重要说明：在某些情况下，IE＆lt; = 9可能无序地执行延迟脚本。如果您需要支持这些浏览器，请先阅读此内容！结论目前最先进的技术是将脚本放在<head>标签中并使用async或defer属性。这样可以在不阻止浏览器的情况下尽快下载脚本。好消息是，您的网站仍然应该在6％不支持这些属性的浏览器上正确加载，同时加快其他94％。

古擅坛犯

就在关闭身体标签之前，如上所述 http://developer.yahoo.com/performance/rules.html#js_bottom 把脚本放在底部脚本引起的问题是它们阻止了并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。但是，在下载脚本时，即使在不同的主机名上，浏览器也不会启动任何其他下载。

席陋临拈

非阻塞脚本标记可以放在任何地方：

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>

async脚本一旦可用就会异步执行 defer脚本在文档完成解析后执行如果不支持异步，则async defer脚本会回退到延迟行为这样的脚本将在文档就绪后异步执行，这意味着你不能这样做：

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

或这个：

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

或这个：

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

或这个：

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

话虽如此，异步脚本提供了以下优势：并行下载资源：浏览器可以并行下载样式表，图像和其他脚本，而无需等待脚本下载和执行。来源订单独立性：您可以将脚本放在头部或主体内而不必担心阻塞（如果您使用的是CMS，则非常有用）。执行顺序仍然很重要。可以通过使用支持回调的外部脚本来规避执行顺序问题。许多第三方JavaScript API现在支持非阻塞执行。以下是异步加载Google Maps API的示例。

攫怂绵十

雅虎推出的标准建议！卓越的性能团队，是将<script>标签放在文档正文的末尾，这样它们就不会阻止页面的呈现。但是有一些较新的方法可以提供更好的性能，如本回答中所述，关于Google AnalyticsJavaScript文件的加载时间： Steve Souders（客户端性能专家）提供了一些关于以下内容的精彩幻灯片：并行加载外部JavaScript文件的不同技术它们对加载时间和页面渲染的影响浏览器显示什么样的“进行中”指示器（例如，状态栏中的“加载”，沙漏鼠标光标）。

你换

如果您正在使用JQuery，那么将javascript放在最适合的地方，并使用$(document).ready()确保在执行任何功能之前正确加载内容。旁注：我喜欢<head>部分中的所有脚本标签，因为这似乎是最干净的地方。

捻盒愧杯

XHTML不会验证脚本是否在head元素之外的任何位置。原来它可以无处不在。您可以使用类似jQuery的命令来延迟执行，因此放置它的位置并不重要（除了解析期间的小性能命中）。

骂陋冠

<script src="myjs.js"></script>
</body>

脚本标记应始终在正文关闭之前使用或在HTML文件中使用底部。然后你可以在加载js文件之前先看到页面的内容。如果需要，检查这个： http://stevesouders.com/hpws/rule-js-bottom.php

久纳禾澎

传统（并且被广泛接受）的答案是“在底部”，因为在任何事情开始执行之前，整个DOM都将被加载。出于各种原因，有异议者从可用的练习开始，故意开始执行页面onload事件。

掸牛浓疗

根据脚本及其用法，尽可能最好（在页面加载和渲染时间方面）可能不使用传统的＆lt; script＆gt; -tag本身，而是动态地异步加载脚本。有一些不同的技术，但最直接的是在触发window.onload事件时使用document.createElement（“script”）。然后在页面本身呈现时首先加载脚本，从而不影响用户等待页面出现的时间。这自然要求脚本本身不需要呈现页面。有关更多信息，请参阅Steve Souders的帖子耦合异步脚本（YSlow的创建者，但现在在谷歌）。

布埃郝卞簿

取决于，如果您要加载一个脚本，这个脚本需要设置页面样式/使用页面中的操作（例如单击按钮），那么最好将其置于顶部。如果您的样式是100％CSS并且您具有按钮操作的所有后备选项，那么您可以将其放在底部。或者最好的事情（如果这不是一个问题）你可以制作一个模态加载框，将你的javascript放在页面底部，并在脚本的最后一行加载时使其消失。这样，您可以避免用户在加载脚本之前在页面中使用操作。并且还要避免不正确的造型。

浆错

脚本块DOM加载，直到它加载和执行。如果您将脚本放在<body>的末尾，则所有DOM都有机会加载和渲染（页面将“更快地”显示“）。 <script>可以访问所有这些DOM元素。另一方面，在<body>开始或之后放置它将执行脚本（其中仍然没有DOM元素）。你包括jQuery，这意味着你可以把它放在你想要的地方并使用.ready（）

艰管垮淮

如果您仍然非常关心IE＆lt; 10中的支持和性能，那么最好始终将脚本标记为HTML正文的最后一个标记。这样，您就可以确定已经加载了其余的DOM，并且您不会阻止和渲染。如果你不太关心IE＆lt; 10，你可能想把你的脚本放在文档的头部并使用defer来确保它们只在你的DOM被加载后运行（<script type="text/javascript" src="path/to/script1.js" defer></script>）。如果您仍然希望您的代码在IE＆lt; 10中工作，请不要忘记将代码包装在window.onload中！

蕾跨立锌煤

我认为这取决于网页的执行情况。如果在未先加载JavaScript的情况下无法正确显示要显示的页面，则应首先包含JavaScript文件。但是如果您可以在不首先下载JavaScript文件的情况下显示/呈现网页，那么您应该将JavaScript代码放在页面底部。因为它将模拟快速的页面加载，并且从用户的角度来看，似乎该页面加载速度更快。

抵舵

您可以在<body>的末尾放置大多数<script>引用，但如果页面上有活动组件正在使用外部脚本，然后他们的依赖（js文件）应该在那之前（理想情况下在head标签中）。

埠仙俊

最后包括脚本主要用于首先显示网站的内容/样式的地方。包括头部中的脚本可以尽早加载脚本，并且可以在加载整个网站之前使用。如果最后输入脚本，则只有在加载整个样式和设计之后才会进行验证，这对于快速响应的网站是不受欢迎的。

席陋临拈

在HTML文档的末尾因此，它不会影响在执行时在浏览器中加载HTML文档。

懊毁暗

脚本可以放在HTML页面中，也可以放在HTML页面中，或者放在两者中。

<head>
<script></script>
</head>
or here
<body>
<script></script>
</body>

但是为了最好的做法忽略你必须放在body标签之间的任何错误，因为如果在javascript中发现任何问题，html不会停止工作但是如果你但是在标头标签之间如果发现任何问题会阻止你的页面工作大段引用

懊毁暗

在标签加载文件然后执行js代码之后，在文档代码末尾编写JavaScript代码的最佳位置。如果你写JQuery代码写

$(document).ready (function{

//your code here

});

钨蜡唤喉晤

在HTML之后包含脚本对我来说更有意义。因为大多数时候我需要在执行脚本之前加载Dom。我可以把它放在head标签中，但我不喜欢所有Document加载监听器的开销。我希望我的代码简洁，甜美，易于阅读。当我在head标签之外添加你的脚本时，我听说旧版本的safari很夸张，但我说谁在乎。我不知道有人使用那个旧垃圾吗？顺便说一句好问题。

搂腹时

您可以将脚本放置在您想要的位置，而不是另一种练习。情况如下：页面线性加载，“自上而下”，所以如果你把脚本放在头部确保它开始加载到所有内容之前，现在，如果你把它放在体内与代码混合可能会导致页面加载难看的方式。确定良好做法并不取决于何处。为了支持你，我将提到以下内容：你可以放置：并且页面将线性加载页面与其他内容异步加载页面的内容将在加载完脚本之前和之后加载脚本这里的好习惯是，什么时候实施？我希望我一直很有帮助，任何事情都只是回答我这个问题。

要回复问题请先登录或注册

发起人

问题状态

最新活动: 2018-11-20 01:19
浏览: 7
关注: 0 人

我应该把＆lt; script＆gt;放在哪里HTML标记中的标签？

与内容相关的链接

20 个回复

发起人

问题状态