记一次 微信公众号 h5页面故障

一、问题背景

2020年4月份，公司公众号的H5页面都不能正常渲染页面，一直在加载loading状态。经F12查看，是因为公司引用的talkingdata第三方打点服务发生故障，JS一直处于pending状态， 由于是script同步引入的该JS，导致页面渲染失败。

二、紧急处理办法

屏蔽掉所有的talkingdata服务

三、后续解决方案

1、首先尝试将talkingdata服务由同步引入改为异步引入，以下两种方式均为异步方式，具体如下：

第一种 asnyc方式`

<script src="https://jic.talkingdata.com/app/h5/v1?appid=..."></script>`

第二种 动态加script方式

function loadScript(url, callback){
  var script = document.createElement ("script")
  script.type = "text/javascript";
  script.async = true;
  if (script['readyState']){ //IE
      script['onreadystatechange'] = function(){
          if (script['readyState'] == "loaded" || script['readyState'] == "complete"){
              script['onreadystatechange'] = null;
              callback();
          }
      };
  } else { //Others
      script.onload = function(){
          callback();
      };
  }
  script.src = url;
  document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript('https://jic.talkingdata.com/app/h5/v1?appid=...', 
 function(){
   console.log('加载完成')
});

2、通过模拟该服务的pending状态，测试发现，若该JS一直pending，导致微信的JS SDK无法正常使用，例如微信支付、扫一扫等接口，并且通过console.log发现，wx.ready回调一直没有触发。
查阅资料发现，微信公众号JS SDK，wx.config注入为异步操作，并且通过为页面load完成后，才会注入成功，触发wx.ready回调。由于一直有JS在加载，页面onload事件一直未触发，导致wx.config无法注入成功，接口无法使用。

3、最终解决办法
为了不影响JS SDK功能的使用，在注入成功后，wx.ready回到函数中再动态加载talkingdata JS服务。这样既能异步加载，又能正常使用微信接口~

wx.ready(() => 
   loadScript('https://jic.talkingdata.com/app/h5/v1?appid=...', function(){console.log('加载完成')}
 })