我有一个 Web 应用程序,它加载几个 JavaScript 文件,如下所示(简化,我实际上有 8-10 个文件):
<script src="codigo1.js"></script>
<script src="codigo2.js"></script>
<script src="codigo3.js"></script>
<script src="codigo4.js"></script>
其中一些文件非常大并且需要时间来加载,所以我正在考虑使用defer
oasync
这样它们通常不会影响页面加载。但是我遇到了一个问题:其中一些文件依赖于其他文件的负载。
例如,code4.js 使用加载到 code1.js 和 code2.js 中的信息。但是 code1.js 是一个比 code4.js 大得多的文件,所以如果我异步加载脚本,可能是 code4.js 在 code1.js 之前执行的情况。
有没有办法使用defer
或async
保持代码中指示的执行顺序?我有什么选择?
使用
defer
:规范的免费翻译:
然后,如第 15 点所述(简体翻译)
这意味着脚本
defer
在加载和解析页面后执行,并按照它们在 DOM 中的顺序执行,从而解决了您的依赖问题。将其视为在完成 html 解析时执行的队列
<script>
。首先,
UTF-8
向 javascript 文件添加编码很重要。这是为了它支持重音符号,á
é
í
ó
ú
例如,它不是 ,codigo
而是código
。以下修复了脚本依赖他人的问题。这个想法是依赖于另一个文件的文件不会添加到 中
html
,但必须将另一个文件添加到脚本列表中。例如,这里没有加载
codigo2.js
,它只加载codigo1.js
,而且esperador.js
必须在开头的 ,将负责加载第一个。它所做的是等待半秒钟,让它从第一个文件中加载一个变量,
codigo1.js
该变量必须事先声明,在我的例子中它被称为variable_código1_js
.文件内容
esperador.js
。您已经得到了答案,但是我为您提供了使用令人惊叹的 require.js 库的替代方法。选择何时上传文件,而不是一次上传所有文件。
避免
<script>
在html文档中写这么多标签,一点都不专业。以模块化和有组织的方式进行编程。一切都在适当的地方和适当的时间。这只是我的拙见和建议。更多信息在这里。