如果脚本真的很短，那么使用内联JavaScript比外部包含更好吗？

Question

我在网站中使用外部JavaScripts，因为我总是试图将JavaScript保持在底部和外部。

但是Google页面速度给出了这个建议

下列外部资源有较小的反应机构。在HTML中嵌入响应可以减少页面呈现的阻塞。 http://websiteurl/应该内联以下小资源：http://websiteurl/script.js

这个外部js文件只有以下内容

$(document).ready(function() {
    $("#various2").fancybox({
        'width': 485,
        'height': 691,
    });
});

但在伊斯洛，我得到了这样的建议

制作JavaScript和CSS的n/a级

只有在您的属性是公共用户主页时才需要考虑这一点。 总共有3个内联脚本。 每次请求HTML文档时，都会下载HTML文档中内联的JavaScript和CSS。这减少了HTTP请求的数量，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS位于浏览器缓存的外部文件中，则在不增加HTTP请求数量的情况下减小了HTML大小。

是对的，谷歌还是雅虎？

Answer 1

这是一个有问题的例子，在很多方面。

您可以以不需要内联JS的方式组织您的脚本。例如，您可以有一个common.js文件来运行该片段、其他类似的片段并简化您的代码。

此外，这似乎唤醒了“永不内联任何JavaScript的架构警察”。事实证明，有时候内联JavaScript是一种最佳实践，例如，看看Google中常见的片段。

为什么谷歌建议应该内联这个小脚本呢？

• 因为20%的页面访问量有一个未准备好的缓存
• 如果您有缓存错过，它很可能需要打开一个新的连接到您的网站(1次往返)，然后在第二次往返传递的数据。(如果你幸运的话，你可以使用一个保持活动的连接，它被缩短为1次往返。
• 对于一个通用的“全球”英语web应用程序，您将看到一个典型的110 US往返时间的服务托管在美国。如果您使用的是CDN，那么这个数字可能会减半。
• 即使资源是本地的，web浏览器仍可能需要访问磁盘才能获取该小文件。
• 非异步或延迟JavaScript脚本标记是阻塞，如果该脚本位于页面中间的某个位置，则在脚本下载之前，会将卡在那里。

从性能的角度来看，如果只有两个选项：

1. 内联放置50字符JavaScript位
2. 将50个字符放在一个单独的文件中，并提供服务。

考虑到你是一个好的网络公民，压缩你的所有内容，这增加的额外有效载荷的数量相比，20 %的风险给人们一个相当大的延迟是微不足道的。我总是选择#1。

在一个不完美的世界里，拥有如此清晰和容易的一套选择是非常罕见的。有一个选项3涉及异步加载jQuery并从公共区域获取此功能。

Answer 2

这不是完全正确的。您可以将web服务器(至少是apache)配置为在提供服务时使scrips/ccs内联。

这里有一个有用的链接

分页/

Answer 3

将脚本内联可能会产生一些有害的影响-

( a)代码组织--代码分散在标记之间，从而影响可读性

( b)代码小型化和混淆变得困难

最好将js保存在单独的文件中，然后在构建时将它们集成到一个文件中，并将其细化和混淆。