Jus*_*rty 3 javascript jquery asynchronous
理想情况下，我希望所有脚本都以 HTML 顺序异步加载。据我所知，async不是这样的。
对于以下属性，general.min.js和funcs.min.js脚本不会运行，因为其中包含一些 jQuery。
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js" async="async"></script>
<script type="text/javascript" src="scripts/general.min.js" defer="defer"></script>
<script type="text/javascript" src="scripts/funcs.min.js" defer="defer"></script>
据我了解，该属性仅影响下载，而不影响脚本的执行。
那么，如何才能保持下载后的执行顺序呢？
如果您希望脚本异步下载但按顺序执行，请使用defer. 渲染不会被阻止，因为在解析文档之前脚本执行不会开始。
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js" defer></script>
<script type="text/javascript" src="scripts/general.min.js" defer></script>
<script type="text/javascript" src="scripts/funcs.min.js" defer></script>
另一方面，async也会异步下载脚本，但每个脚本在下载完成后立即执行。因此，如果您在大脚本下面包含一个小脚本，则小脚本将下载得更快并首先执行。
编辑 #2（为了清楚起见，编辑 #1 被替换为 #2）
当所有脚本都是从外部源加载时，使用defer脚本就很有意义。下载是异步的，DOM 解析不会被阻止，并且执行顺序会保持不变。耶！我将这些称为延迟脚本。<head>
然而，内联脚本( <script>...</script>) 是在DOM 解析期间<body>同步下载和执行的，因此它们无法访问延迟脚本（因为这些脚本直到 DOM 解析之后才会执行）。
如果内联脚本需要访问库脚本（例如 jQuery 或 lodash）怎么办？显然，在内联脚本运行之前必须完全下载并执行这些库脚本。这是通过将库脚本放入而不使用. 这使得它们立即按顺序执行。请注意，延迟脚本也可以访问库脚本，因为它们甚至在内联脚本之后也会加载！<head> defer
唷！这是一个例子：
<head>
<!-- Executed last: defered scripts -->
<script src="scripts/general.min.js" defer></script>
<script src="scripts/funcs.min.js" defer></script>
<!-- Executed first: library scripts, such as jquery, lodash, etc.. -->
<script src="scripts/jquery.min.js"></script>
</head>
<body>
<!-- Executed second: inline scripts -->
<script>
$.ready(console.log);
</script>
</body>
只是补充一点：延迟脚本不需要onload侦听器（或$.ready等等），因为 DOM 已经加载了！
| 归档时间： |
|
| 查看次数： |
2382 次 |
| 最近记录： |