Why sometimes my javascript doesn't get applied on my php-CodePudding

I have a lot of scripts and styles in head tag and sometimes they don't load properly. Here's how my head looks like:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="w3.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material Symbols Outlined:opsz,wght,FILL,GRAD@48,500,1,0" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
  <script src="index.js"></script>
  <title>NCA</title>
</head>

However when I reload my page, everything works properly and my js gets applied on my php exactly the way I want... Can you tell what's going on and why the first time I load my page, my js doesn't work properly? Note that: I can't do $(document).ready(function () { ... }); as there are many functions in my index.js file and also I want to force the body load after head is loaded... Is there any way to do it?

CodePudding user response：

It is a good practice to put the script tags after the body tag, to ensure that the body its the first thing to load, it doesn't work that way with the css because you want the css to load first

CodePudding user response：

I had a similar problem tha I solved using defer after the script src, example:

 <script src="demo_defer.js" defer></script>

https://www.w3schools.com/tags/att_script_defer.asp