javascript 多个与单个脚本标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6451156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
multiple versus single script tags
提问by Assaf Shemesh
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?
使用带有嵌入代码的单个脚本标签，或使用分布在整个 HTML 中的相同代码的多个脚本标签之间有什么区别（性能、最佳实践等）？
For example:
例如：
<script>
foo();
</script>
...
<script>
bar();
</script>
versus:
相对：
<script>
foo();
bar();
</script>
Thanks
谢谢
采纳答案by T.J. Crowder
With inlinescript like what you quoted, there's unlikely to be muchdifference; however, every time the browser's HTML parser encounters a scripttag, it:
使用您引用的内联脚本，不太可能有太大区别；然而，每次浏览器的 HTML 解析器遇到一个script标签时，它：
- Comes to a screeching halt
- Builds up a string of the the text in the tag up until the first time it sees the string
"</script>" - Hands that text off to the JavaScript interpreter, listening for output the interpreter sends it when you do a
document.write - Waits for the interpreter to finish
- Inserts the accumulated output received into the parsing stream
- Continues its parsing
- 戛然而止
- 建立标签中文本的字符串，直到它第一次看到该字符串
"</script>" - 将文本交给 JavaScript 解释器，监听解释器在您执行以下操作时发送的输出
document.write - 等待解释器完成
- 将接收到的累积输出插入到解析流中
- 继续解析
So 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.
以上是内联脚本。自然地，如果您有多个script标签引用一堆外部 JavaScript 文件，您还会遇到必须下载每个文件的问题，并且启动 HTTP 请求是一件昂贵的事情（相对而言），因此最好，在很大程度上，将它们组合成一个文件。
Some other things to consider:
其他一些需要考虑的事项：
- Having lots of
scripttags scattered throughout your HTML may make it difficult to do maintenance on the script - Separating your HTML and script into separate files helps you limit the degree to which they're coupled, again aiding maintenance
- Putting script in a separate file makes it possible to run that file through minifiers/compressors/packers, minimizing the size of your code and removing comments, thus leaving you free to comment in your source code knowing those comments will be private
- Putting your scripts into external files gives you the opportunity to keep things separated by functionality, and then combine them into a single file for the page (compressed/minified/packed) for efficient delivery to the browser
- 将大量
script标签分散在整个 HTML 中可能会使脚本维护变得困难 - 将您的 HTML 和脚本分成单独的文件有助于您限制它们的耦合程度，再次有助于维护
- 将脚本放在单独的文件中可以通过压缩器/压缩器/打包器运行该文件，最大限度地减少代码的大小并删除注释，从而使您可以自由地在源代码中进行注释，因为这些注释将是私有的
- 将您的脚本放入外部文件让您有机会按功能将事物分开，然后将它们组合成页面的单个文件（压缩/缩小/打包），以便高效地交付给浏览器
More:
更多的：
回答by Babiker
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 性能：多个脚本块与单个更大的块
回答by Babiker
Up to this point all of the JavaScript Code was in one tag, this does not need to be the case.
到目前为止，所有的 JavaScript 代码都在一个标签中，这不是必须的。
You can have as many tags as you would like in a document.
您可以在文档中拥有任意数量的标签。
The tags are processed as they are encountered.
标签在遇到时进行处理。
Hope this helps.
希望这可以帮助。
回答by Till
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.
有些人认为最好的做法是将所有脚本组合在一个脚本块或一个脚本文件中，只加载真正需要的 javascript 并尽可能晚地加载它，以免减慢 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.
除此之外，我确信使用单个脚本块比使用多个脚本块加载速度更快，因为它们必须单独评估。但是，这种差异可能无法识别。
回答by Edwin H Oudit
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.
我使用多个标签。一个用于图像幻灯片放映，另一个用于文本幻灯片放映，因此我可以在同一个网页上同时使用它们 - 图像幻灯片放映和文本幻灯片放映。
