How to force body to load after all my scripts in head are loaded-CodePudding

I have a lot of scripts and styles in head tag and sometimes body loads before they (scripts and styles) are loaded, this causes some bugs like content doesn't loads 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>

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

Edit: I know that browser renders body after script in head are loaded but still I don't know why, sometimes body is rendered before script, and it causes many bugs... I also don't have any setTimeOut functions...

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

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