Question

许多大玩家都推荐略有不同的技巧。主要是放置新的<script>。

(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

这些都是精神上的相同方法。我们的想法是推迟脚本，使它们不会相互阻塞或完整的文档。

通常的做法是在网站内容之后加载额外的外部资源。执行此操作时，您希望a）阻止阻止onload事件，以便更快地“完成”页面，以及b）并行加载资源，如上所述。

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

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

Answer 2

我认为这不是关于将脚本添加到页面的方式，但是从另一个域检索内容的脚本只能通过这种方式添加，即动态编写脚本标记并将其添加到文档中。以上所有脚本都以自己的方式做同样的事情，所以你可以随意做。

Answer 3

执行此操作有几个不同的原因...首先，某些浏览器会异步下载动态添加的脚本标记。其次，脚本可以处理目标页面何时为http与https以避免内容错误。

正如joe提到的head.js很有用...... s是你自己脚本的域分割。对于你自己的脚本资源，最好在顶部设计你的网站尽可能少的js（html5shiv和浏览器/ js标记为css）...然后让你的js处于良好的老式＆lt; script src =“”＆gt ;在关闭的body元素之前标记。

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

将您的脚本资源保存在6个js文件或不足6个js文件中。并且合理地接近相同的大小。

Souder的书“Even Faster Websites”对此非常了解。

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

3 个答案: