多个脚本标签与单个脚本标签
使用嵌入代码的单个脚本标签或使用遍布整个 HTML 的相同代码的多个脚本标签之间是否有任何区别（性能、最佳实践等）？
例如：
<script>
foo();
</script>
...
<script>
bar();
</script>
与：
<script>
foo();
bar();
</script>
谢谢
Is there any difference (performance, best practices, etc) between using a single script tag with embedded code in it, or using multiple script tags with the same code spread all over the HTML?
For example:
<script>
foo();
</script>
...
<script>
bar();
</script>
versus:
<script>
foo();
bar();
</script>
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
对于您引用的内联脚本，不太可能有太多差异；然而，每次浏览器的 HTML 解析器遇到
script标记时，它都会：""document.write时发送的输出因此，从理论上讲，增加此序列发生的次数可以增加页面加载时间。它还会影响解析器在令牌流中“向前看”的程度，这可能会降低效率。
所有这些听起来确实很引人注目，但您必须在您关心的各种浏览器中分析真实页面，以确定它是否具有现实世界的影响。
总之，尽可能合理地将它们结合起来。如果您无法合理地组合一对，请不要太担心，直到/除非您看到现实世界的问题。
以上是内联脚本。当然，如果您有多个
script标记引用一堆外部 JavaScript 文件，那么您还会遇到必须下载每个文件的问题，并且发起 HTTP 请求是一件昂贵的事情（相对而言）因此最好将它们合并到一个文件中。其他一些需要考虑的事项：
script标记可能会导致脚本维护变得困难更多：
With inline script like what you quoted, there's unlikely to be much difference; however, every time the browser's HTML parser encounters a
scripttag, it:"</script>"document.writeSo increasing the number of times this sequence has to occur can, in theory, increase your page load time. It also affects the degree to which the parser can "look ahead" in the token stream, which may make it less efficient.
All of which sounds really dramatic, but you'd have to profile a real page in the various browsers you care about to determine whether it had a real-world impact.
So in summary, combine them as much as you reasonably can. If you can't reasonably combine a couple, don't worry about it too much until/unless you see a real-world problem.
The above is for inline script. Naturally, if you have several
scripttags referring to a bunch of external JavaScript files, you'll also have the issue that each of those files has to be downloaded, and initiating an HTTP request is an expensive thing (comparatively) and so it's best, in a big way, to combine those into a single file.Some other things to consider:
scripttags scattered throughout your HTML may make it difficult to do maintenance on the scriptMore:
我认为尽可能组合您的脚本会更好。某些浏览器在执行脚本块时必须暂停渲染。查看答案： Javascript 性能：多个脚本块与单个更大的块
Combining your scripts as much as possible is better in my opinion. Some browsers have to pause rendering while executing script blocks. Check out answer at: Javascript Performance: Multiple script blocks Vs single bigger block
到目前为止，所有 JavaScript 代码都在一个标签中，但情况不一定如此。
您可以在文档中添加任意数量的标签。
遇到标签时就会对其进行处理。
希望这有帮助。
Up to this point all of the JavaScript Code was in one tag, this does not need to be the case.
You can have as many tags as you would like in a document.
The tags are processed as they are encountered.
Hope this helps.
有些人认为，最佳实践是将所有脚本组合在单个脚本块或单个脚本文件中，仅加载真正需要的 JavaScript，并尽可能晚地加载它，以免减慢 html 的渲染速度。
除此之外，我确信使用单个脚本块比使用多个脚本块加载速度更快，因为它们必须单独评估。然而，这种差异可能无法被识别。
Some argue that it's best practice is to combine all scripts in a single script block or a single script file, load only the javascript that is really needed and load it as late as possible to not slow down the rendering of html.
Apart from that i am sure that using a single script block loads faster than using multiple script blocks since they have to be evaluated individually. However this difference might not be recognizable.
我使用多个标签。一个用于图像幻灯片，另一个用于文本幻灯片，因此我可以在同一个网页上同时显示两者 - 图像幻灯片和文本幻灯片。
I USE multiple tags. One for Slideshow of Images and another for Slideshow of Texts, so I can have both on the same web page - slideshow of images and slideshow of texts.