为什么通过AJAX动态加载的JS和CSS添加到head后无法正常生效？

问题核心原因 #

你遇到的差异本质是硬编码数组的执行时机和AJAX回调的执行时机不同，结合动态插入资源的特性，常见失效原因如下：

1. link 标签不存在标准async属性，你写的该配置无效，CSS文件始终是异步加载的，若后续逻辑依赖样式渲染，会在样式未加载完成时就执行，导致表现异常。
2. 动态创建的script标签即便设置async = false，也仅能保证多个动态JS的执行顺序和插入顺序一致，不会阻塞页面全局加载事件。如果你插入的JS内部监听了DOMContentLoaded、window.load这类事件，AJAX回调执行时这两个事件大概率已经触发完毕，对应回调逻辑永远不会运行，这是JS不生效的最常见诱因。
3. 当前代码没有做资源加载完成的监听，所有依赖这些动态插入资源的逻辑，都会在资源还没下载、解析完成时就执行，自然无法得到预期结果。

排查&修复方案 #

• 先确认AJAX返回的data和硬编码数组完全一致：在success回调中执行console.log(JSON.stringify(data) === JSON.stringify(["https://gorodok.net.ua/api/NFTBot/NFTBot.js","https://gorodok.net.ua/api/NFTBot/style/main.css"]))，排除接口返回的资源地址带空格、协议不匹配、路径错误等低级问题。
• 若需要等所有资源加载完成后再执行后续逻辑，可以用Promise封装加载过程，示例代码如下：

// 封装单资源加载为Promise
function loadResource(src) {
  return new Promise((resolve, reject) => {
    let el;
    if (src.includes('.js')) {
      el = document.createElement('script');
      el.src = src;
      el.async = false;
      el.type = 'text/javascript';
      el.onload = resolve;
      el.onerror = reject;
    } else if (src.includes('.css')) {
      el = document.createElement('link');
      el.href = src;
      el.type = 'text/css';
      el.rel = 'stylesheet';
      el.onload = resolve;
      el.onerror = reject;
    }
    document.head.appendChild(el);
  })
}

// AJAX逻辑修改为
$.ajax({
  url:'https://gorodok.net.ua/api/NFTBot/php/get_payload.php',
  type:'get',
  dataType: 'json',
  success: async function(data){
    try {
      // 等待所有资源加载完成
      await Promise.all(data.map(src => loadResource(src)));
      // 这里写依赖这些JS/CSS的后续逻辑
      console.log('所有资源加载完成')
    } catch (e) {
      console.log('资源加载失败', e)
    }
  },
  error: function(error){console.log("请求失败:" + error)}
});

• 若你的JS内部确实依赖DOMContentLoaded事件，将JS内部对应的监听逻辑改为直接执行即可，因为AJAX回调触发时DOM已经加载完成了。

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