在DOM加载之前insertScript

起因

由于工作原因需要联调碧桂园的SDK 大概是以下代码，起初我是放在head中的，因为最初这样调试，包括线上环境都是OK的，可以获取到SDK的内容，换句话说js节点是可以插入到root内的，自从换了一套webpack4的构建、包括加快DNS速度、包括asyncScript标签之后，发现这个插入语句不起作用了，这个事情很神奇。

    <script>
      var agent = navigator.userAgent.toLowerCase();
      //平台、设备和操作系统
      var system ={
      win : false,
      mac : false,
      xll : false
      };

      //检测平台
      var p = navigator.platform;
      system.win = p.indexOf("Win") == 0;
      system.mac = p.indexOf("Mac") == 0;
      system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); 

      function appendScript (url) {
        var script=document.createElement("script");
        script.setAttribute("src", url);
        var heads = document.getElementById("root");
        heads.appendChild(script)
      }

      //跳转语句，如果是手机访问就自动跳转到caibaojian.com页面    

      if(system.win||system.mac||system.xll){
      } else if (agent.match(/MicroMessenger/i) == "micromessenger") {
      } else if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
          console.log('iOS')
          appendScript('https://biheopen.bgycc.com/jssdk.js')
          appendScript('https://biheopen.bgycc.com/cordova-ios.js')
      } else {
          console.log('android')
          appendScript('https://biheopen.bgycc.com/jssdk.js')
          appendScript("https://biheopen.bgycc.com/cordova-android.js")
      }
    </script>

昨天下午发现的，直到今天早上我调了一下这个问题，总结一下。

这段语句不能写在</body>之前，因为webpack的原因main script也会在</body>之前插入，但是我们希望的是他在main script之前加载，但是这句话appendScript 会让浏览器异步加载script 内容，这样我们就不能保证是main script先加载还是jssdk先加载了。

解决办法

在head中另加一个script片段，把js放在DOMContentLoaded中做处理，这样的话它会在load main script之前去做load jssdk标签，并且是一个同步加载的过程

    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                // 插入
                ......
            }, false);
        }
    </script>

当然还有其他方式解决这个问题这里就不做深究。