Question

我听过并阅读了一些关于推迟JavaScript加载的文章，我非常感兴趣。对于可以在可以加载和执行的JavaScript数量有限的移动平台上使用的Web应用程序来说，它似乎非常有前途。

不幸的是，大多数文章都谈到了这个问题。如何处理这个？

修改

通常，所有JavaScript都是在页面加载时加载的，但是，在某个操作发生之前可能存在不需要的函数，此时应该加载JavaScript。这有助于减轻浏览器在页面加载时的负担。

具体来说，我有一个非常频繁使用JavaScript的页面。当我在手机上加载页面时，它将无法正确加载。当我调试页面时，我删除了一些JS函数。一旦消除了，该页面就会突然发挥作用。

我希望能够根据需要加载JS。甚至可能消除了仅用于启动的功能。

Answer 1

基础知识很简单 - 将您的JavaScript代码分解为逻辑上独立的组件，并仅加载您需要的内容。根据您的建设情况，您可以使用：

装载机：

Modernizr.load（或yepnope.js本身）
LABjs
Many，many，many其他延迟加载库。

依赖管理器（也是加载器）：

Require.js
dojo.require
JavaScript MVC's steal.js
其他几个依赖管理库。

这些工具利用各种技术来推迟脚本的加载，脚本的执行，管理依赖关系等。您需要的内容取决于您正在构建的内容。

您可能还想阅读this discussion以了解更多有关使用此类技术的利弊的信息。

回复编辑：

卸载您已经加载的JavaScript的方法并不是很好 - 您可以获得的最接近的方法是将所有加载代码命名为应用程序命名空间中的所有名称，然后“清理” up“通过设置该命名空间，以及对null的所有引用。

Answer 2

我使用了一个在线发布的简单脚本，并进行了一些修改。假设您的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帮助我了解如何从脚本标记中获取参数。

再见

Answer 3

推迟加载到何时？通常最后加载JS的原因是为了首先加载整个DOM。

一种简单的方法就是使用

<body onload="doSomething();">

因此您可以轻松地使用doSomething()函数来加载所有JS。

您还可以向window.onload添加功能，例如

window.onload = function(){ };

此外，如果您使用的是JS库，例如jQuery和Dojo，它们每个都有自己的onReady和addOnLoad方法，以便只运行一些JS文档已经加载后。

Answer 4

这是脚本元素的延迟和异步属性的a useful article。指定这些属性将使浏览器以不同方式推迟加载。您还可以在页面加载后使用JavaScript加载外部脚本。

还应注意，如果既未指定延迟也未指定异步，则HTML文档中脚本元素的位置将决定加载和执行顺序。

推迟JavaScript加载

4 个答案: