包含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

這些都是精神上的有效方法。 我們的想法是推遲腳本，這樣它們就不會相互阻塞或文檔完整。

通常的做法是在網站內容之后加載額外的外部資源。 執行此操作時，您希望a）阻止阻止onload事件，以便更快地“完成”頁面，以及b）並行加載資源，如上所述。

Steve Souders聲稱“漸進增強”是當今網站性能最重要的概念。 此概念建議您盡快交付基頁，然后根據需要提供額外的內容/服務，無論是在加載事件上還是在用戶請求時。

現在有一些框架可以提供幫助。 見http://headjs.com/

Answer 2

我認為這不是關於將腳本添加到頁面的方式，而是從另一個域檢索內容的腳本只能以這種方式添加，即動態編寫腳本標記並將其添加到文檔中。 以上所有腳本都以自己的方式執行相同操作，因此您可以根據需要執行此操作。

Answer 3

執行此操作有幾個不同的原因...首先，某些瀏覽器將異步下載動態添加的腳本標記。 其次，腳本可以處理目標頁面何時為http與https以避免內容錯誤。

正如joe提到的head.js很有用...... s是你自己腳本的域分割。 對於您自己的腳本資源，最好在頂部設置盡可能少的js（html5shiv和瀏覽器/ js標記為css）...然后將你的js保存在老式的<script src =“”>標簽中就在關閉身體元素之前。

瀏覽器將首先下載頁面所需的內容，以及更晚的內容。這將以非阻塞的方式提供最快的感知負載。 將工作流的腳本模塊化並僅在頁面內初始化需要運行的內容，以便更好地使用緩存。

將您的腳本資源保存在6 js文件或不足6 js文件。 並且合理地接近相同的尺寸。

Souder的書“Even Faster Websites”對此非常了解。