如果脚本真的很短，使用内联JavaScript优于外部包含

Is using inline JavaScript preferred to an external include if the script is really short?

本文关键字：JavaScript 包含 于外部 真的 脚本 如果      更新时间：2023-09-26

我在网站中使用外部JavaScript，因为我总是尝试将JavaScript放在底部和外部。

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

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

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

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

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

但是在Yslow中我得到了这个建议

Make JavaScript and CSS external

只有当你的属性是一个普通用户的主页时才考虑这个。

There are a total of 3 inline scripts
HTML文档中内联的JavaScript和CSS会被下载每次请求HTML文档时。这就减少了HTTP请求，但增加HTML文档的大小。另一方面，如果JavaScript和CSS在浏览器缓存的外部文件中，HTML文档的大小减少而不增加的数量HTTP请求。

哪个是正确的谷歌还是雅虎?

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

你可以用一种不需要内联JS的方式来组织你的脚本。例如，您可以使用一个common.js文件来运行该代码段和其他类似的代码段，从而简化代码。

此外，这似乎唤醒了"永远不要内联任何JavaScript"的架构原则。事实证明，有时内联JavaScript是一种最佳实践，例如，查看来自Google分析的常见代码片段。

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

  • 因为20%的页面访问是未缓存的
  • 如果你有一个缓存丢失，很可能需要打开一个新的连接到你的网站(1次往返)，然后在第二次往返中传递数据。(如果你幸运的话，你可以使用keepalive连接，往返时间缩短为1次。
  • 对于一般的"全球"英语web应用程序，您将看到托管在美国的服务的典型的110毫秒往返时间。如果您使用CDN，这个数字可能会减半。
  • 即使资源是本地的，web浏览器可能仍然需要访问磁盘来抓取那个小文件。
  • 非异步或延迟JavaScript脚本标签是阻塞，如果这个脚本是在你的页面中间的某个地方，它将被卡住，直到脚本下载。

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

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

考虑到你是一个优秀的网络公民，压缩你所有的内容，与给人们带来相当大的延迟的20%的风险相比，这增加的额外有效载荷的数量可以忽略不计。我总是选择#1。

在一个不完美的世界里，很少有这样一组清晰而简单的选择。有一个选项3涉及异步加载jQuery并从公共区域获取此功能。

使脚本内联可能有一些不利的影响-

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

b)代码简化和混淆变得困难

最好把你的js放在单独的文件中，然后在构建时把它们集成到一个文件中，并最小化和混淆它。

这并不完全正确。您可以配置web服务器(至少是apache)，使脚本/ccs在服务时内联。

这是一个有用的链接

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

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

关于下载时间，您显然有两种选择:将JS包含在页面主体中，或者作为外部文件。在主体中包含JS确实节省了额外的HTTP请求，尽管它也会使HTML有点膨胀，并且如果您有几个脚本要内联在几个不同的页面上，则维护起来可能会很痛苦。

另一个重要的考虑是是否需要在页面上立即使用JS。如果页面加载时需要一小段JS，那么将其内联可能是一个好主意。如果将来要将其用于异步操作，那么将其放在外部文件中可能仍然是一个不错的选择。

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

内联脚本会保存请求，正如Yslow建议的那样，它会增加HTML文档的大小，并将内容/标记与代码/逻辑混合在一起，这通常是您希望尽可能避免的。

Yslow给出这个警告的原因:

只有当你的属性是一个普通用户的主页时才考虑这个。

是，如果页面加载频繁，它值得有javascript外部，因为文件将缓存在浏览器中。因此，如果您将JS合并到一个文件中，则在第一个请求中会产生一个额外的请求，而在后续请求中则会从缓存中加载该文件。

Aaron Peters在去年Velocity EU的演讲中给出了一个很好的见解，您应该选择的课程- http://www.slideshare.net/startrender/fast-loading-javascript

对于非常小的js片段，真的不值得将它们放在外部文件中，因为检索它们的网络开销将使其优势相形见绌。

根据延迟，可能值得包含大型脚本，例如Bind mobile在加载的第一个页面中加载了大量的js，然后将其缓存在本地存储中以供后续页面使用。

Addy Osmani最近制作了一个实验性库，帮助人们在本地存储中使用缓存脚本- http://addyosmani.github.com/basket.js/

相关文章：