20

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

但谷歌页面速度给出了这个建议

以下外部资源的响应机构较小。在 HTML 中内联响应可以减少页面呈现的阻塞。

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

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

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

但在 Yslow 我得到了这个建议

将 JavaScript 和 CSS 置于外部的等级 n/a

仅当您的属性是普通用户主页时才考虑这一点。

There are a total of 3 inline scripts

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

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

4

7 回答 7

15

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

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

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

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

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

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

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

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

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

于 2012-03-15T05:41:48.003 回答
2

这并不完全正确。您可以配置 Web 服务器（至少是 apache）以在提供服务时使 scrips/ccs 内联。

这是一个有用的链接

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

于 2011-08-26T13:21:25.497 回答
2

使脚本内联可能会产生一些不利影响 -

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

b) 代码缩小和混淆变得困难

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

于 2011-08-26T13:25:11.243 回答
1

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

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

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

于 2011-08-26T13:23:02.160 回答
0

我通常用内联方式编写 javascript，尤其是当脚本如此之小时。我会说只是将其粘贴到您的代码中。它不会大幅增加 http 文档的大小。

于 2011-08-26T13:20:56.797 回答
0

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

Yslow 给出这个警告的原因是：

仅当您的属性是普通用户主页时才考虑这一点。

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

于 2011-08-26T13:39:09.670 回答
0

去年 Velocity EU 的 Aaron Peters 演讲对选项和您应该选择的课程提供了很好的见解 - http://www.slideshare.net/startrender/fast-loading-javascript

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

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

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

于 2012-03-15T09:25:39.040 回答