如果脚本非常短，是否使用内联JavaScript首选外部包含？

我在网站中使用外部JavaScript，因为我总是试图将JavaScript保留在底部和外部。如果脚本非常短，是否使用内联JavaScript首选外部包含？

下列外部资源的响应内容较少。内嵌 HTML中的响应可以减少页面呈现的阻塞。

http://websiteurl/应内嵌下列小型资源： http://websiteurl/script.js

这个外部的js文件只有这个内容

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

但在YSlow的，我得到这个建议

级N/A上使JavaScript和CSS外部

只有在您的财产是普通用户主页时才考虑这一点。
There are a total of 3 inline scripts 
JavaScript和CSS是在HTML文档内联得到每次请求HTML文档时下载。这减少了HTTP请求的数量，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS位于由浏览器缓存的外部文件中，则，可以减少HTML文档的大小，而不会增加HTTP请求的数量。

哪一个是正确的谷歌或雅虎？

来源

2011-08-26 Jitendra Vyas

最好的做法是，代码一些文件引起每个外部js文件是1个请求。所以你可以把你所有的自定义代码放在一个文件中，这样你的html就可以清理干净。 –

你是在这个页面上执行'$（“＃various2”）。fancybox（）'，还是你需要为多个（类似）页面执行？ –

这是在标题和标题包含在每个页面 –

这是一个有点问题的例子，在不少方面。

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

此外，这似乎已经苏醒“从来没有内嵌任何JavaScript EVER”架构警察。事实证明，有时这是嵌入JavaScript的最佳做法，例如查看Google分析的常见片段。

为什么Google suggesting你应内嵌这个小脚本？

因为20% of the page visits你有未填装缓存
如果你有一个高速缓存未命中，很可能你的网站一个新的连接将需要打开（1个往返），然后在提供的数据第二次往返。（如果你是幸运的你使用的保持有效连接，并将其切成1个往返。
对于一般的“全球性”英文网站，你正在寻找一个典型110毫秒往返时间，在美国拥有的服务应用程序如果你使用的是CDN，这个数字可能会减半
即使资源是本地的，网络浏览器可能仍然需要访问磁盘来抓取那个小文件
非异步或推迟的JavaScript脚本标记在阻塞，如果这个脚本是在你的页面的中间位置，这将是卡住，直到脚本下载。

从性能的角度来看，如果只有2个选项分别是：

将一个50个字符的JavaScript位内嵌
将在50个字符在一个单独的文件，并为它服务。

考虑到你是一个很好的网络公民并压缩了你的所有内容，相比之下，20％的风险给人带来了相当大的延迟，所增加的额外有效载荷的数量可以忽略不计。我会一直选择＃1。

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

来源

2012-03-15 05:41:48

我通常写内联javascript，特别是如果脚本是这么小。我会说只是将其粘贴到您的代码中。它不会增加很多http文件的大小。

来源

2011-08-26 13:20:56

，但它打破了关注点分离的规则 –

@Jitendra如果您将JavaScript代码放在页面底部的SCRIPT元素内部的准备好的处理程序中，它仍然是独立的，但是，您很好。打破规则将使用'onevent'属性，或者立即在** HTML元素之间放置调用的SCRIPT元素**。 –

@ŠimeVidas - OK然后，Unobtrusive JavaScript和分离行为与内容和样式有什么区别 –

这并不完全正确。您可以配置Web服务器（以及至少apache），以便在服务时使脚本/ ccs内联。

这里是一个有用的链接

http://www.websiteoptimization.com/speed/tweak/mod_pagespeed/

来源

2011-08-26 13:21:25

有两个因素考虑这里。一个是下载时间，另一个是可维护性。这些都受到一段JavaScript需要多少次的影响。

关于下载时间，您显然有两种选择：将JS包含在页面主体中，或作为外部文件。将JS包含在主体中确实可以节省额外的HTTP请求，但它也会使HTML膨胀一点，如果您将几个脚本内联放在多个不同的页面上，可能会很痛苦。

另一个重要的考虑因素是JS是否需要立即在页面上。如果页面加载后需要一小段JS，那么将它内联可能是一个好主意。如果它将来被用于某些异步事件，那么将它放入一个外部文件可能仍然是一个不错的选择。

来源

2011-08-26 13:23:02

制作脚本直列可以有一些不利的影响 -

一）代码组织 - 你的代码被散布在您的标记之间，从而影响可读性

B）代码缩小和模糊处理变得困难

最好将js保存在独立的文件中，然后在构建时将所有这些文件集成到一个文件中，然后对其进行缩小和混淆。

来源

2011-08-26 13:25:11 Shreyas

虽然内嵌脚本将保存的请求，因为YSlow的表明，它增加了HTML文件大小和混合内容/标记的代码/逻辑，你一般都希望从尽可能避免。

原因YSlow的给出了这样的警告：

只考虑这一点，如果你的财产是一种常见的用户主页。

这是因为如果页面频繁加载，这是值得的JavaScript的外部，因为文件将被缓存在浏览器中。因此，如果您将JS合并到一个文件中，那么在第一次请求时会产生一个额外的请求，并在随后的请求中从缓存中加载该文件。

来源

2011-08-26 13:39:09 chesles

亚伦彼得斯从去年的速度欧盟谈提供了良好的洞察选项，当然你应该选择 - http://www.slideshare.net/startrender/fast-loading-javascript

对于JS的非常小的片断它真的不值得他们将在一个外部文件作为网络检索它们的开销会使收益变得不足。

根据延迟，它可能永远值得包括大脚本例如绑定移动设备在加载的第一页中加载了js，然后将其缓存到本地存储中以供稍后页面使用。

阿迪·奥斯马尼最近组建了一个实验库，帮助人们与缓存脚本localStorage的发挥 - http://addyosmani.github.com/basket.js/

来源

2012-03-15 09:25:39

如果脚本非常短，是否使用内联JavaScript首选外部包含？

回答

相关问题