延迟JavaScript加载

Deferring JavaScript loading

本文关键字：加载 JavaScript 延迟      更新时间：2023-09-26

我听说并阅读了一些关于延迟JavaScript加载的文章，我对此非常感兴趣。对于web应用来说，这似乎是非常有前途的，因为移动平台上可以加载和执行的JavaScript数量是有限的。

不幸的是，大多数文章都在非常高的层次上讨论这个问题。如何处理这个问题呢?

编辑

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

具体来说，我有一个大量使用JavaScript的页面。当我在手机上加载页面时，它无法正常加载。在调试页面时，我删除了一些JS函数。一旦删除了足够的内容，页面就会突然工作。

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

基本原理很简单——将JavaScript代码分解为逻辑上独立的组件，然后只加载所需的组件。根据您正在构建的内容，您可以使用:

加载器:

  • Modernizr。加载(或自己加载)
  • LABjs
  • 许多，许多，许多其他延迟加载库

依赖管理器(也是加载器):

  • Require.js
  • dojo.require
  • 其他依赖管理库。
这些工具使用各种各样的技术来延迟脚本的加载、脚本的执行、管理依赖关系等。你需要什么取决于你正在构建什么。

您可能还想通读这篇讨论，以了解更多使用这些技术的利弊。

对编辑的响应:

并没有一个很好的方法来卸载你已经加载的 JavaScript——你能得到的最接近的方法是保持你所有的加载代码的命名空间在你的应用程序的命名空间中，然后通过设置该命名空间来"清理"，并将所有对它的引用设置为null。

我使用了一个简单的脚本，发布在网上，由我做了一些修改。假设你的压缩Javascript文件在你的web服务器的缓存目录中，你想延迟加载这个压缩js文件。

你的压缩js文件:

80aaad2a95e397a9f6f64ac79c4b452f.js

这是html代码的代码:

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

这是deff .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，它帮助我了解如何从脚本标签中获取参数。

再见

延迟加载到什么时候?JS最后加载的原因通常是为了先加载整个DOM。

一个简单的方法就是使用

<body onload="doSomething();">

所以你可以很容易地使用doSomething()函数来加载你所有的JS。

你也可以给window.onload添加一个函数，比如

window.onload = function(){ };

另外，如果你正在使用JS库，如jQuery和Dojo，它们都有自己的onReady和addOnLoad方法，以便在文档已经加载后才运行一些JS。

这里有一篇关于脚本元素的defer和async属性的有用文章。指定这些属性将使浏览器以不同的方式延迟加载。你也可以在页面加载后使用JavaScript加载外部脚本。

还应该注意的是，如果既没有指定defer也没有指定async，那么脚本元素在HTML文档中的位置将决定加载和执行顺序。

相关文章：