如何控制脚本的执行顺序？答案

【问题标题】：How do I control the execution order of scripts?如何控制脚本的执行顺序？
【发布时间】：2020-12-23 03:14:38
【问题描述】：

我正在制作一个涉及 p5.js 的小型浏览器游戏。我的 HTML 基本上是这样的：

<!-- ... -->
<body>
    <script type="text/javascript" src="js/vendor/p5.min.js"></script>
    <script type="text/javascript" src="js/vendor/p5.sound.min.js"></script>
    <!-- ... -->
    <script type="text/javascript" src="js/various/other/scripts.js"></script>
    <!-- ... -->
    <script type="text/javascript" src="js/sketch.js"></script>
</body>
<!-- ... -->

大多数情况下，此设置都有效。但是，有时（当我第一次在浏览器中加载页面时），我会收到来自p5.sound.min.js 的ReferenceError: p5 is not defined 和来自sketch.js 的ReferenceError: loadSound is not defined 之类的错误。当我刷新页面时，一切正常，直到我关闭浏览器窗口。

在我看来，这些脚本是乱序执行的，因为如果脚本在其先决条件未运行的情况下运行，就会发生此类错误。（sketch.js 需要 p5.sound.min.js 需要 p5.js。）我在 HTML 中放置它们的顺序就是我希望它们运行的顺序。

我知道async 和defer 会影响浏览器加载和执行JavaScript 的方式，我已经尝试过后者。然而：

将defer 添加到所有<script> 标签似乎没有任何改变。
没有async 或defer（如上），执行顺序是否已经得到保证和正确？

还有什么我需要记住的吗？

【问题讨论】：

标签： javascript html browser html-parsing p5.js

【解决方案1】：

与往常一样，在发布问题后，您会发现一条通往解决方案的新线索。

显然这与JS执行顺序无关，而是a bug in Firefox that prevents local files from loading if they end in '.min.js'。我认为目前的解决方法是从 CDN 加载 p5，或者将文件名更改为不包含 min。

【讨论】：