推遲JavaScript加載

我聽說過並閱讀了一些關於推遲JavaScript加載的文章，對此我非常感興趣。對於那些可以加載和執行的JavaScript數量有限的移動平臺而言，它可能對Web應用程序非常有用。推遲JavaScript加載

不幸的是，大多數文章都以極高的水平對此進行了討論。如何解決這個問題？

EDIT

通常情況下，所有的JavaScript裝載在頁面加載，但是，也可以是直到發生某一動作，在該時間時，JavaScript應加載不在必要的功能。這有助於減輕頁面加載時瀏覽器的負擔。

具體來說，我有一個非常大量使用JavaScript的頁面。當我在手機上加載頁面時，它無法正常加載。在我調試頁面時，我排除了一些JS函數。一旦消除足夠的時間，頁面突然生效。

我希望能夠根據需要加載JS。甚至可能取消僅用於啓動的功能。

來源

2011-09-01 steveo225

您是否試圖延遲JavaScript代碼執行加載或瀏覽器加載js文件？如果前者然後jquery.ready函數會做你想要的 – Eonasdan

基礎很簡單 - 將您的JavaScript代碼分解爲邏輯上獨立的組件並僅加載所需內容。根據您所構建的內容，你可以使用：

裝載機：

Modernizr.load（或yepnope.js本身）
LABjs
Many，many，many其他延遲加載庫。

依賴管理器（其是也裝載機）：

Require.js
dojo.require
JavaScript MVC's steal.js
其他幾個依賴管理庫。

這些工具使用各種各樣的技術來推遲腳本的加載，腳本的執行，管理依賴性，等你需要什麼取決於你所構建的內容。

您可能還需要閱讀this discussion以瞭解更多關於使用此類技術的優點和缺點的信息。

響應編輯：

是不是真的要卸載您已經加載 JavaScript的一個好辦法 - 你可以得到的最接近是讓所有的載碼命名空間放在應用程序的命名空間中，然後通過設置該命名空間和所有對它的引用來「清理」到null。

來源

2011-09-01 14:56:52

如果你使用AMD或commonJS方法（requirejs和backdraft使用AMD），那麼加載的JS被綁定到局部變量。當超出範圍時，只要不保留任何引用，就會收集垃圾，因此代碼的結構可以管理您的軟件包如何保持周圍。 – peller

這個評論有點誤導，所以我想我會澄清。 CommonJS和AMD沒有什麼特別的幫助你收集代碼垃圾。 AMD的回調函數至多是一個閉包，所以你所有的變量的作用範圍都是_potential_ garbage collection的閉包（假設你沒有公開任何可能持有閉包函數調用上下文的函數），這與使用一個IIFE像大多數人在他們的代碼中做的那樣。通過IIFE，我的意思是將你的代碼包裝在（function（）{...你的代碼在這裏...}（））; –

推遲加載直到什麼時候？爲什麼JS最後加載的原因是爲了讓整個DOM首先被加載。

一個簡單的方法是隻使用

<body onload="doSomething();">

所以，你可以輕鬆擁有doSomething()函數加載所有的JS。

您還可以添加一個功能window.onload，像

window.onload = function(){ };

此外，如果你正在使用JS圖書館的，如jQuery和Dojo，他們每個人都有以自己的onReady和addOnLoad方法只有在文檔已經加載後才能運行一些JS。

來源

2011-09-01 14:56:12 Layke

這是a useful article關於腳本元素的延遲和異步屬性。指定這些屬性將使瀏覽器以不同的方式推遲加載。您也可以在頁面加載後使用JavaScript加載外部腳本。

還應該注意的是，如果未指定延遲和異步，腳本元素在HTML文檔中的位置將決定加載和執行順序。

來源

2011-09-01 14:57:42 Spycho

我已經使用了一個簡單的腳本發佈在線與我做了一些修改。假設您的COMPRESSED Javascript文件位於Web服務器的緩存目錄中，並且您希望推遲加載此壓縮的js文件。

你壓縮的js文件：

80aaad2a95e397a9f6f64ac79c4b452f.js

這是代碼的html代碼：

<script type="text/javascript" src="/resources/js/defer.js?cache=80aaad2a95e397a9f6f64ac79c4b452f.js"></script>

這是defer.js文件內容：

(function() { 

    /* 
    * http://gtmetrix.com/ 
    * In order to load a page, the browser must parse the contents of all <script> tags, 
    * which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, 
    * and deferring parsing of unneeded JavaScript until it needs to be executed, 
    * you can reduce the initial load time of your page. 
    */ 

    // http://feather.elektrum.org/book/src.html 
    // Get the script tag from the html 
    var scripts = document.getElementsByTagName('script'); 
    var myScript = scripts[ scripts.length - 1 ]; 

    // Get the querystring 
    var queryString = myScript.src.replace(/^[^\?]+\??/,''); 

    // Parse the parameters 
    var params = parseQuery(queryString); 

    var s = document.createElement('script'); 
    s.type = 'text/javascript'; 
    s.async = true; 
    s.src = '/cache/' + params.cache; // Add the name of the js file 

    var x = document.getElementsByTagName('script')[0]; 
    x.parentNode.insertBefore(s, x); 

    function parseQuery (query) { 
     var Params = new Object(); 
     if (! query) return Params; // return empty object 
     var Pairs = query.split(/[;&]/); 
     for (var i = 0; i < Pairs.length; i++) { 
      var KeyVal = Pairs[i].split('='); 
      if (! KeyVal || KeyVal.length != 2) continue; 
      var key = unescape(KeyVal[0]); 
      var val = unescape(KeyVal[1]); 
      val = val.replace(/\+/g, ' '); 
      Params[key] = val; 
     } 
     return Params; 
    } 
})();

我想說感謝http://feather.elektrum.org/book/src.html，這幫助我瞭解如何從腳本標記獲取參數。

bye

來源

2012-10-30 10:57:14 Michelangelo

推遲JavaScript加載

回答

相關問題