PHP页面JavaScript首次加载失效，刷新正常的原因及解决办法

你的<head>标签包含如下代码：

<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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="w3.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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> 

当前遇到的问题：页面首次加载时，JavaScript无法在PHP页面正常生效，但刷新后功能完全正常。由于index.js包含大量函数，无法使用$(document).ready(function () { ... });，且希望强制<body>在<head>加载完成后再加载，需排查原因并找到解决办法。

原因分析 #

核心问题在于脚本执行时机与DOM渲染顺序不匹配：

• 你将index.js放在<head>中加载，浏览器解析到该脚本时会立即执行，但此时<body>及其中的DOM元素还未被解析渲染，脚本中操作DOM的代码找不到目标元素，导致首次加载失效。
• 刷新页面时，浏览器会缓存已加载的脚本、样式等静态资源，页面整体渲染速度大幅提升，脚本执行时DOM元素已准备就绪，因此功能恢复正常。

解决办法 #

1. 将脚本移至<body>末尾 #

把所有外部脚本（包括Bootstrap JS、jQuery、index.js）移到</body>标签之前，浏览器会先完整解析整个DOM结构，再执行脚本，确保脚本能找到所有目标元素：

<body>
  <!-- 页面所有内容 -->

  <!-- 脚本移至body末尾 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <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>
  <script src="index.js"></script>
</body>

2. 为脚本添加defer属性 #

在<head>中的所有外部脚本标签上添加defer属性，脚本会并行加载，但会等到DOM完全解析完成后再按顺序执行，同时不阻塞页面渲染：

<head>
  <!-- meta标签、样式链接保持不变 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" defer></script>
  <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" defer></script>
  <script src="index.js" defer></script>
</head>

注意：defer仅对外部脚本有效，内联脚本无法使用该属性。

3. 用原生DOMContentLoaded事件包裹执行逻辑 #

如果不想调整脚本位置，可以修改index.js，将所有操作DOM的代码包裹在原生DOMContentLoaded事件监听中，这和$(document).ready原理一致，但无需依赖jQuery：

document.addEventListener('DOMContentLoaded', function() {
  // 把index.js中所有操作DOM的代码移到这里
  // 例如各种事件绑定、DOM元素操作等
});

这种方式只需修改index.js的外层结构，无需调整大量内部函数。

内容的提问来源于stack exchange，提问作者aditya panchal