如果脚本真的很短,是否使用内联JavaScript首选外部包含？

Question

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

但谷歌的页面速度正在给出这个建议

以下外部资源具有较小的响应主体.在HTML中内联响应可以减少页面呈现的阻塞.

http:// websiteurl /应该内联以下小资源: http://websiteurl/script.js

此外部js文件仅包含此内容

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

但在Yslow,我得到了这个建议

关于Make JavaScript和CSS外部的等级n/a

如果您的属性是普通用户主页,请考虑这一点.

There are a total of 3 inline scripts

每次请求HTML文档时,都会下载HTML文档中内联的JavaScript和CSS.这减少了HTTP请求的数量,但增加了HTML文档的大小.另一方面,如果JavaScript和CSS位于浏览器缓存的外部文件中,则HTML文档大小会减少,而不会增加HTTP请求的数量.

哪个是谷歌或雅虎？

Answer 1

在很多方面,这是一个有问题的例子.

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

此外,这似乎唤醒了"从不内联任何JavaScript EVER"架构警察.事实证明,有时将内联JavaScript作为最佳实践,例如,查看Google分析的常见代码段.

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

• 因为20%的页面访问都有一个未打开的缓存
• 如果您有缓存未命中,则可能需要打开与您的站点的新连接(1次往返),然后在第2次往返中传送数据.(如果你很幸运,你可以使用keepalive连接,它可以减少到1次往返.
• 对于一般的"全球"英语Web应用程序,您正在查看在美国托管的服务的典型110ms往返时间.如果您使用的是CDN,则该数字可能会减半.
• 即使资源是本地资源,Web浏览器仍可能需要访问磁盘才能获取该小文件.
• 非异步或延迟JavaScript脚本标记是阻止的,如果此脚本位于页面中间的某个位置,它将被卡在那里直到脚本下载.

从性能角度来看,如果只有两个选项:

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

考虑到您是一个优秀的网络公民并压缩您的所有内容,与增加人们相当延迟的20%风险相比,这增加的额外负载量可以忽略不计.我总是选择#1.

在一个不完美的世界中,很少有这么清晰易用的选择.有一个选项3涉及异步加载jQuery并从公共区域获取此功能.