代码之家 › 专栏 › 技术社区 › Manngo

javascript async&defer:异步运行脚本

asynchronous javascript

Manngo · 技术社区 · 7 年前

据我所知, script 元素 async 属性允许脚本异步下载(类似于图像),而 defer 使脚本在执行前等待结束。

假设我有两个脚本:

<script src="library.js"></script>
<script src="process.js"></script>

我希望它们都异步进行,我希望 process.js 等到最后才开始处理。

有办法弄到 library.js 脚本到运行异步?

注释

我发现不同的在线资源在 异步的 属性。

mdn&whatwg建议,这意味着脚本应该执行异步的。其他在线资源建议负载异步,但在执行时仍会阻止渲染。

2 回复 | 直到 7 年前

Mamun 7 年前

我发现 Sequential script loading in JavaScript 这可能有助于您:

(function(){
  
  //three JS files that need to be loaded one after the other
  var libs = [
    'https://code.jquery.com/jquery-3.1.1.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/underscore.string/3.3.4/underscore.string.js'
  ];
  
  var injectLibFromStack = function(){
      if(libs.length > 0){
        
        //grab the next item on the stack
        var nextLib = libs.shift();
        var headTag = document.getElementsByTagName('head')[0];
        
        //create a script tag with this library
        var scriptTag = document.createElement('script');
        scriptTag.src = nextLib;
        
        //when successful, inject the next script
        scriptTag.onload = function(e){
          console.log("---> loaded: " + e.target.src);
          injectLibFromStack();
        };    
        
        //append the script tag to the <head></head>
        headTag.appendChild(scriptTag);
        console.log("injecting: " + nextLib);
      }
      else return;
  }
  
  //start script injection
  injectLibFromStack();
})();

Flimm D. Ben Knoble 7 年前

两个 defer 和 async 在执行脚本时生效,而不是在下载脚本时生效。我认为混淆源于这样一个事实:有些文档对术语有点草率,而术语加载不清楚它是指资源的获取,还是指资源的执行。

得到 library.js 要在不等待加载文档的情况下异步运行,请使用 异步的 属性,并获取 process.js 要等到分析完文档,请使用 推迟 :

<script src="library.js" async></script>
<script src="process.js" defer></script>

请注意 库.js 以前不能保证运行 进程.js ,尽管可能会。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

9 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

9 月前

Alex · 在轻量级中同时解构和不解构变量

9 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

9 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

9 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

9 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

10 月前

user3472810 · Angular@Output/EventEmitter返回undefined

10 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

10 月前