起因

由於工作原因需要聯調碧桂園的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>

當然還有其他方式解決這個問題這裡就不做深究。