多个与单个脚本标签

Question

使用带有嵌入代码的单个脚本标记或使用遍布HTML的相同代码的多个脚本标记之间是否存在任何差异(性能,最佳实践等)？

例如:

<script>
    foo();
</script>
...
<script>
    bar();
</script>

与:

<script>
    foo();
    bar();
</script>

谢谢

Answer 1

使用像你所引用的内联脚本,不太可能有太大差异; 但是,每次浏览器的HTML解析器遇到script标记时,它都会:

• 嘎然而止
• 构建标记中文本的字符串,直到它第一次看到字符串 "</script>"
• 发送到JavaScript解释器的手,听取输出,解释器在你执行时发送它 document.write
• 等待翻译完成
• 将收到的累积输出插入到解析流中
• 继续解析

因此,理论上,增加此序列必须发生的次数会增加页面加载时间.它还会影响解析器在令牌流中"向前看"的程度,这可能会降低其效率.

所有这些听起来都非常引人注目,但您必须在您关心的各种浏览器中分析真实页面,以确定它是否具有真实世界的影响.

总而言之,尽可能合理地将它们组合在一起.如果你不能合理地结合一对夫妇,除非你看到现实问题,否则不要太担心它.

以上是内联脚本.当然,如果你有几个script标签引用了一堆外部JavaScript文件,你也会遇到每个文件都必须下载的问题,启动HTTP请求是一件昂贵的事情(相对而言),所以最好,在很大程度上,将这些组合成一个文件.

其他一些需要考虑的事项:

• 在script整个HTML中分散了大量标签可能会使对脚本进行维护变得困难
• 将HTML和脚本分成单独的文件可以帮助您限制它们的耦合程度,再次帮助维护
• 将脚本放在单独的文件中可以通过minifiers/compressors/packers运行该文件,最大限度地减少代码的大小并删除注释,从而让您可以自由地在源代码中发表评论,因为知道这些注释将是私有的
• 将脚本放入外部文件使您有机会将功能分开,然后将它们组合到页面的单个文件中(压缩/缩小/打包),以便有效地传送到浏览器

更多:

• YUI的"加速网站的最佳实践"
• 谷歌的"网络性能最佳实践"