多个与单个脚本标签 [英] multiple versus single script tags

问题描述

在使用单个脚本标记和嵌入代码之间，还是使用具有相同代码的多个脚本标记遍布整个HTML之间有什么区别（性能，最佳实践等）？

例如：

 < script> 
 foo（）; 
< / script> 
 ... 
< script> 
 bar（）; 
< / script> 
  

与：

 <脚本> 
 foo（）; 
 bar（）; 
< / script> 
  

谢谢

解决方案 div>

使用 inline 脚本就像您引用的内容一样，不太可能存在 差异;但是，每当浏览器的HTML解析器遇到脚本标记时，它：

• 来到尖锐的停顿点


• 在标签中生成一串文本，直到它第一次看到字符串< / script>


• 在执行 document.write
• 

• 等待解释器完成


• 将接收到的累积输出插入解析流中
  
• >继续解析

因此，增加此序列发生的次数理论上可以增加您的页面加载时间。它还影响了解析器在令牌流中向前看的程度，这可能会使效率变得更低。

所有这些听起来都非常具有戏剧性，但是您必须在您关心的各种浏览器中分析真实网页，以确定其是否具有真实世界的影响。

因此，总之，将它们结合起来就像你合理可以。如果你不能合理地结合一对夫妻，那么除非你看到真实世界的问题，否则不要担心它太多。

以上是针对内联脚本。当然，如果你有几个涉及一堆外部JavaScript文件的脚本标签，你还会遇到这样的问题，即每个文件都必须下载，然后启动HTTP请求是一个比较昂贵的东西，所以最好的做法是把它们合并成一个文件。

其他要考虑的事情：

p>

• 分散在整个HTML中的许多脚本标签可能会导致难以维护脚本


• 将HTML和脚本分离为单独的文件有助于限制它们的耦合程度，从而帮助维护


• 将脚本放入一个单独的文件可以通过缩小器/压缩器/包装器运行该文件，最大限度地减少代码的大小并删除注释，从而让您可以自由地在源代码中发表评论，因为知道这些注释将是私有的。


• 将脚本放入外部文件中如果您有机会将功能分开，然后将它们合并到一个页面的单个文件中（压缩/缩小/打包），以便高效传送到浏览器中。

更多：

• YUI的加速您的网站的最佳实践


• Google的网络效果最佳做法

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

解决方案

With inline script like what you quoted, there's unlikely to be much difference; however, every time the browser's HTML parser encounters a script tag, it:

• 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

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 script tags 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:

• Having lots of script tags 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

More:

• YUI's "Best Practices for Speeding Up your Web Site"
• Google's "Web Performance Best Practices"

这篇关于多个与单个脚本标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！