JS sometimes doesn't load in Chrome and other browsers

Question

So I get this error every 10 refreshes or so on my browser (then it start working again). Basically the JS doesnt load, hence some functionalities of website will look ugly (I have dynamic navbar on scroll..). Is there any way to stop this from happening ?

<!-- script -->
    <script async defer src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script async defer src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script async defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
    <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script async defer src="assets/js/main.js"></script>

It is because you are calling your scripts asynchronously (et. attribute `async`). — Jax-p, Apr 07 '21 at 08:48

score 1 · Accepted Answer · answered Apr 07 '21 at 08:51

The async attribute of <script> is a boolean which you're setting to be true here. It's only applicable to external scripts and it tells the browser to execute the script as soon as the script has been downloaded by the browser.

You're asking for any of the scripts being downloaded to be ran instantly, which is the cause for the jQuery library being sometimes executed before, sometimes after, other scripts.

<script defer src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script defer src="assets/js/main.js"></script>

JS sometimes doesn't load in Chrome and other browsers

1 Answers1