CODEWITHSUNDEEP
javascriptjqueryloading
lovemyjob
lovemyjob

Reputation: 579

JavaScript partial files loading order different to what is in code

I have put the JS files in order that they should load to avoid any errors in console and get everything working, however when I look at the network tab in developer tools, the files are being loaded differently to what is in the web page...

Here is the order in code: 

<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>

And this is what I get in dev tools: enter image description here

Things I think can have an impact - I am using some JS files stored locally, some fetched from cdnjs.

I am using templating (blade) within Laravel (some script calling is from main template, some from 'page-specific'). But I would think that php parses everything together beforehand.

Upvotes: 4

Views: 726

Answers (1)

samanime
samanime

Reputation: 26527

When you load multiple JavaScript files, the browser will load handfuls at a time (usually about 5). They may finish or even start in a different order.

But, that is okay. Even if they finish loading in a different order, they will still be run in the order that you have specified (unless you are using defer or async which affect the run order).

Upvotes: 5

Related Questions