分离Header/Footer后网站功能失效，如何提前加载app.js？

以下是几种实用的解决思路，按需选择即可：

• 把app.js移到<head>中并添加defer属性
  将原本放在页面底部的<script src="app.js"></script>挪到<head>标签内，加上defer属性。这样JS不会阻塞页面渲染，还能保证在DOM（包括分离的header、footer）解析完成后立刻执行，刚好能及时绑定元素效果：

  <head>
    <!-- 其他样式、meta标签等内容 -->
    <script src="app.js" defer></script>
  </head>
  

• 用DOMContentLoaded包裹所有DOM相关代码
  不管script标签放在哪里，把处理header粘性定位、footer雨滴动画的代码全部塞进DOMContentLoaded事件回调里。这样只有当整个页面的DOM元素（包括加载进来的header、footer）都准备就绪后，JS才会执行，避免因找不到目标元素导致效果失效：

  document.addEventListener('DOMContentLoaded', function() {
    // 这里编写header粘性定位的逻辑
    // 这里编写footer雨滴动画的初始化代码
  });
  

• 在header/footer加载完成后再初始化对应JS逻辑
  如果是用AJAX或模板工具加载header/footer，就在它们加载完成的回调函数里触发对应效果的初始化：

  // 示例：用fetch加载header
  fetch('header.html')
    .then(res => res.text())
    .then(html => {
      document.getElementById('header-container').innerHTML = html;
      // 加载完header后立刻初始化粘性定位
      initStickyHeader();
    });
  
  // 同理处理footer
  fetch('footer.html')
    .then(res => res.text())
    .then(html => {
      document.getElementById('footer-container').innerHTML = html;
      // 加载完footer后立刻启动雨滴动画
      initRainAnimation();
    });
  

• 静态引入时将script放在header/footer之后
  如果是用PHP include这类静态引入方式，直接把app.js的script标签放在header和footer的引入代码后面，确保JS执行时已经能找到对应的DOM元素：

  <?php include 'header.html'; ?>
  <!-- 页面主体内容 -->
  <?php include 'footer.html'; ?>
  <script src="app.js"></script>
  

内容的提问来源于stack exchange，提问作者Rithvik Vaddadi