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

Question

许多大公司推荐略微不同的技巧，主要是关于新 <script> 的放置位置。 Google Analytics:

(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);
})();

还有其他的吗？我会添加进来。

这些选择有没有什么规律或原因，还是完全无所谓？

- Paul Tarjan

Answer 1

这些方法本质上是相同的。其思想是延迟脚本加载，以便它们不会阻塞彼此或文档完成。

通常会在网站内容之后加载额外的外部资源。在这样做时，您希望a) 防止阻止onload事件，以使页面更快地“完成”，并b) 并行加载资源，以上述内容为例。

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

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

- Joe Hanink

Answer 2

我认为这与您将脚本添加到页面的方式无关，而是来自另一个域中检索内容的脚本只能通过动态编写脚本标记并将其添加到文档中的方式添加。所有上述脚本都以自己的方式执行相同的操作，因此您可以按照自己的喜好进行。

- Furqan Hameedi

---

你可以加载第三方脚本，但会阻塞其他脚本，导致性能变差。建议在文档完成后延迟加载第三方脚本，以便您的网站内容不会被阻塞等待外部资源加载和执行，特别是当渲染您的内容时不需要第三方脚本时。例如，Facebook连接代码通常只需要在页面加载后使用。 - Joe Hanink

Answer 3

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

正如Joe所提到的，head.js很有用...分离自己脚本的域名也是如此。对于您自己的脚本资源，最好在顶部设计尽可能少的js（html5shiv和浏览器/js标记用于css）...然后在关闭body元素之前使用传统的<script src="">标签来放置您的js。

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

将您的脚本资源保持在6个或以下的js文件中，并使它们的大小接近合理。

Souder的书《甚至更快的网站》是一个很好的参考。

- Tracker1

---

只是好奇 - 为什么保持你的资源在6个js文件以下很重要？ - Daniel Szabo

因为大多数现代浏览器只会打开6个连接到给定主机，所以如果你有一个从中提取JS文件的js.cdn.yoursite.com，浏览器可能会异步地同时调用所有6个连接，从而减少往返延迟。阅读"高性能JavaScript"和"更快的网站"这两本书会很有帮助。 - Tracker1