外联脚本加载顺序与内部代码顺序有关吗？如何确保多个外联脚本按预期顺序加载？

疑惑：外联脚本加载顺序与内部代码顺序关联吗？

引入了多个外联脚本后，却出现加载顺序错乱的情况。代码如下：

<script src="./js/jquery.js"></script>
<script src="./js/isotope.js"></script>
<script src="./js/typed.js"></script>
<script src="./js/running.js"></script>
<script src="./js/scrollreveal.js"></script>
<script src="./js/swiper-bundle.min.js"></script>
<script src="./js/smooth-scroll.js"></script>

加载结果却不是预期的顺序，这是否与内部脚本代码的顺序有关？

解答：影响加载顺序的 defer 属性

实际加载顺序与脚本代码本身无关，而是受脚本标签的 defer 属性影响。具有 defer 属性的脚本将在页面解析完成后按照引入顺序执行。即便不同的脚本之间存在依赖关系，defer 类型的脚本也可以保证按顺序加载。

具体原理如下：

• 浏览器在解析过程中会将 defer 类型脚本暂时放置在队列中。
• 文档解析完成后，浏览器会在执行所有行内脚本并处理其他异步操作之前，按照队列顺序执行 defer 类型脚本。

因此，要确保外联脚本按照顺序加载，需要为其添加 defer 属性。添加后的代码如下：

<script defer src="./js/jquery.js"></script>
<script defer src="./js/isotope.js"></script>
<script defer src="./js/typed.js"></script>
<script defer src="./js/running.js"></script>
<script defer src="./js/scrollreveal.js"></script>
<script defer src="./js/swiper-bundle.min.js"></script>
<script defer src="./js/smooth-scroll.js"></script>

通过使用 defer 属性，即可保证脚本加载的正确顺序，避免依赖关系问题。

以上就是外联脚本加载顺序与内部代码顺序有关吗？如何确保多个外联脚本按预期顺序加载？的详细内容，更多请关注硕下网其它相关文章！