Fatal编程技术网

推迟JavaScript加载

javascript

推迟JavaScript加载,javascript,Javascript,我听过和读过一些关于推迟JavaScript加载的文章，我对此非常感兴趣。对于那些在移动平台上可能很有用的web应用程序来说，这似乎是非常有希望的，因为在移动平台上，可以加载和执行的JavaScript数量是有限的 不幸的是，大多数文章都在非常高的层次上讨论这一点。如何处理这个问题 编辑 通常情况下，所有JavaScript都是在页面加载时加载的，但是，在某个操作发生之前，可能不需要一些函数，此时应加载JavaScript。这有助于减轻浏览器在页面加载上的负担 具体来说，我有一个页面大量使用Ja

我听过和读过一些关于推迟JavaScript加载的文章，我对此非常感兴趣。对于那些在移动平台上可能很有用的web应用程序来说，这似乎是非常有希望的，因为在移动平台上，可以加载和执行的JavaScript数量是有限的

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

编辑

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

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

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

将加载推迟到何时？ JS最后加载的原因通常是，整个DOM都是先加载的

一个简单的方法就是直接使用

<body onload="doSomething();">
另外，如果您正在使用JS库，例如and，那么它们都有自己的and
addOnLoad
方法，以便仅在文档已经加载之后运行一些JS

基础很简单-将JavaScript代码分解为逻辑上独立的组件，只加载您需要的内容。根据您正在构建的内容，您可以使用：

装载机：

  • （或自行）
  • ，其他延迟加载库
依赖关系管理器（也是加载程序）：

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

你可能还想通读一遍，了解更多关于使用这些技术的利弊

编辑响应：

卸载已经加载的JavaScript并不是一个好方法——最接近的近似方法是将所有加载代码保持在应用程序的名称空间中，然后通过设置名称空间来“清理”，所有对它的引用都指向
null

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

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

我使用了一个在线发布的简单脚本，并进行了一些修改。 假设压缩的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://gtmetrix.com/
*要加载页面，浏览器必须解析所有标记的内容，
*这增加了页面加载的时间。通过最小化呈现页面所需的JavaScript量，
*将不需要的JavaScript解析推迟到需要执行时，
*您可以缩短页面的初始加载时间。
*/
// http://feather.elektrum.org/book/src.html
//从html中获取脚本标记
var scripts=document.getElementsByTagName（'script'）；
var myScript=scripts[scripts.length-1]；
//得到查询字符串
var queryString=myScript.src.replace（/^[^\？]+\？/，“”）；
//解析参数
var params=parseQuery（queryString）；
var s=document.createElement（'script'）；
s、 类型='text/javascript'；
s、 异步=真；
s、 src='/cache/'+params.cache；//添加js文件的名称
var x=document.getElementsByTagName（'script'）[0]；
x、 parentNode.insertBefore（s，x）；
函数parseQuery（查询）{
var Params=新对象（）；
if（！query）返回参数；//返回空对象
var Pairs=query.split（/[；&]/）；
对于（变量i=0；i
我想说的是，这帮助我理解了如何从脚本标记获取参数

再见

您是想延迟加载javascript代码执行还是浏览器加载js文件？如果使用AMD或commonJS方法（requirejs和backdraft使用AMD），那么加载的JS将绑定到一个局部变量。当这超出范围时，只要你不保留任何引用，它就会被垃圾收集，因此你的代码结构可以管理你的包是如何被保留的。这个评论有点误导，所以我想澄清一下。CommonJS和AMD没有做任何特殊的事情来帮助您的代码垃圾收集。AMD中的回调函数充其量是一个闭包，因此所有变量的作用域都是该闭包，以进行潜在的垃圾收集（假设您没有公开任何可能包含闭包函数调用上下文的函数。这与在大多数人的代码中使用IIFE没有什么不同。IIFE指的是将代码包装在（function（）{…your code here…}（））； 
(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;
    }
})();