包含 Javascript 的最佳方式是什么？

Question

许多大玩家推荐的技术略有不同。主要是放在新的<script>上。

Google Anayltics:

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

Facebook:

(function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol +
    '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());:

Disqus:

(function() {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

（发布其他的，我会添加它们）

这些选择有什么押韵或理由吗？或者根本不重要？

Answer 1

我认为这与您将脚本添加到页面的方式无关，而是只能以这种方式添加从另一个域检索内容的脚本，即动态编写脚本标签并将其添加到您的文档中。以上所有脚本都以自己的方式执行相同的操作，因此您可以随意执行。

Answer 2

这些在精神上实际上都是相同的方法。这个想法是推迟脚本，这样它们就不会相互阻塞或文档完整。

在您的网站内容之后加载额外的外部资源是一种常见的做法。这样做时，您希望 a) 防止阻塞 onload 事件，以便您的页面更快地“完成”，以及 b) 并行加载资源，如上所示。

Steve Souders 声称“渐进式增强”是当今网站性能最重要的概念。这个概念建议您尽可能快地交付基本页面，然后在加载事件或用户请求时根据需要交付额外的内容/服务。

现在有一些框架可以提供帮助。见http://headjs.com/

Answer 3

这样做有几个不同的原因...首先，一些浏览器会异步下载动态添加的脚本标签。其次，脚本可以在目标页面是 http 与 https 时进行处理，以避免内容错误。

正如 joe 提到的 head.js 很有用... s 是您自己的脚本的域拆分。对于您自己的脚本资源，最好在顶部使用尽可能少的 js 来设计您的网站（html5shiv 和浏览器/js 为 css 标记）...然后让您的 js 使用老式的

浏览器将首先下载页面所需的内容，然后再下载更多内容。这将以非阻塞方式提供最快的感知负载。将工作流程的脚本模块化在一起，并仅在页面内初始化需要运行的内容，这样可以更好地使用缓存。

将脚本资源保持在 6 个 js 文件或以下。并尽可能接近相同的大小。

Souder 的书《Even Faster Websites》是一本很好的读物。