JavaScript异步和延迟：异步运行脚本
[英]JavaScript async & defer: run a script asynchronously
问题描述
As far as I am aware, in the script element, the async attribute allows the script to download asynchronously (similar to images), while the defer causes the script to wait until the end before executing. 
据我所知，在script元素中， async属性允许脚本异步下载（类似于图像），而defer使脚本等到结束才执行。
Suppose I have two scripts to include: 假设我要包含两个脚本：
<script src="library.js"></script>
<script src="process.js"></script>
I would want them both to proceed asynchronously, and I would want process.js to wait until the end to start processing. 我希望它们都以异步方式进行，并且我希望process.js等到最后开始处理。
Is there a way to get the library.js script to run asynchronously? 有没有一种方法可以使library.js脚本异步运行 ？
Note 注意
I see there appears to be some discrepancy between different online resources as to the actual role of the async attribute. 我看到，关于async属性的实际作用，不同的在线资源之间似乎存在一些差异。
MDN & WhatWG suggest that it means that the script should execute asynchronously. MDN和WhatWG建议，这意味着脚本应异步执行 。 Other online resources suggest that it should load asynchronously, but still blocks rendering when it is executed. 其他在线资源建议它应该异步加载 ，但在执行时仍会阻止渲染。
2 个解决方案
解决方案1
2 2018-11-13 05:52:24
I found Sequential script loading in JavaScript which might help you: 我发现在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(); })();
解决方案2
0 2018-11-13 05:20:39
Both defer and async affect when a script is executed, not when a script is downloaded. defer和async都会影响执行脚本的时间，而不影响下载脚本的时间。 I think the confusion comes from the fact that some documentation is a bit sloppy with terms, and the term loaded is unclear as to whether it refers to the fetching of the resource, or the execution of it. 我认为造成混淆的原因是某些文档的术语有点草率，而加载的术语尚不清楚它是指获取资源还是执行资源。
To get library.js to run asyncronously without waiting for the document to load, use async attribute, and to get process.js to wait until document has been parsed, use defer : 要使library.js在不等待文档加载的情况下异步运行，请使用async属性，并让process.js等待文档被解析之前，请使用defer ：
<script src="library.js" async></script>
<script src="process.js" defer></script>
Note that library.js is not guaranteed to run before process.js , although it probably will. 请注意，尽管可能会保证library.js不能在process.js之前运行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.