JavaScript 部分文件加载顺序与代码中的不同

Question

我已按顺序加载 JS 文件，以避免在控制台中出现任何错误并使一切正常运行，但是当我查看开发人员工具中的网络选项卡时，文件的加载方式与在网页...

这是代码中的顺序：

<script src="/js/lib/jquery-3.3.1.min.js"></script>
<script src="/js/lib/jquery-ui.min.js"></script>
<script src="/js/lib/bootstrap.bundle.min.js"></script> <!-- Includes popper.js -->
<script src="/js/lib/toastr.min.js"></script>

<!-- Page specific scripts -->

<script src="/js/lib/moment.min.js"></script>
<script src="/js/lib/daterangepicker.js"></script>
<script src="/js/lib/Chart.min.js"></script>

<script src="/js/partials/daterange.js"></script>
<script src="/js/partials/utils.js"></script>
<script src="/js/partials/charts.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/datatables.min.js"></script>

<script src="/js/partials/dataTable.js"></script> 

<script src="/js/mainBundle.js"></script>

这就是我在开发工具中得到的：

控制台错误，jQuery 加载太晚...（在代码中是第一个...）

我认为可能会产生影响的事情 - 我正在使用一些本地存储的 JS 文件，一些是从 cdnjs 获取的。

我在 Laravel 中使用模板 (blade)（一些脚本调用来自主模板，一些来自 'page-specific'）。但我认为 php 会事先将所有内容解析在一起。

Answer 1

当您加载多个 JavaScript 文件时，浏览器将一次加载少量文件（通常约为 5 个）。他们可能会以不同的顺序完成甚至开始。

但是，没关系。即使它们以不同的顺序完成加载，它们仍将按照您指定的顺序运行（除非您使用 defer 或 async，而 affect the run order）。

JavaScript 部分文件加载顺序与代码中的不同

JavaScript partial files loading order different to what is in code

javascript

jquery

loading