html5在手機熄屏后倒計時會出現延遲情況

　　今天開發了一個手機端的倒計時，然后同事說出現了Bug，怎么回事呢？Bug很簡單，就是在手機返回主界面或者熄屏后倒計時會暫停在熄屏前的時間（注意時間是頁面加載時獲取的服務器的時間），問題很簡單，知道問題所在，百度！在網上查了好多，然后發現一個很神奇的事件：visibilityChange，先在PC端實驗，然后發現切換網頁再切回來能觸發這個事件，好事啊，那是不是移動端也可以這樣處理呢，網頁切回來或者熄屏后重新打開然后重新獲取后台時間不是就OK了嗎，說干就干：代碼如下：

document.addEventListener('visibilityChange', function() {
    if (document.VisibilityState == 'hidden') {
        alert("backStage");
     } else {
         alert("welocme back"); 
　　　} 
}, false);

PC端切換頁面能彈出東西，好開心，然而（我想大家都怕好事后面的然而），移動端沒反應？What？為啥不行？說好的當文檔從可見變為不可見或者從不可見變為可見時，會觸發該事件，可是確實沒觸發，對了可能是兼容問題，這個事件的兼容性賊惡心，搗飭了大段的代碼，然后。。。

·　　傷心，換個方式，很多大神說調用webSocket，不過感覺好麻煩，放棄，再想辦法，程序猿么，天生就是解決問題的，再想辦法，然后就有了一下這種方式（當然是以犧牲一點點性能實現的）

邏輯很簡單，頁面初始化時獲取服務器的事件，然后再獲取本地時間，然后求出服務器時間和本地時間是的差值，然后再計時器運行時每秒獲取一次時間戳，然后加上前面運算的到的差值，也就是說每一秒都獲取當前的時間戳然后要通過運算得到目前服務器的時間，下面上代碼：

  var mulse = "";
  var timer = null;
  var overTime = new Date("2018/6/18 08:30:00").getTime(); //設置倒計時結束時間

  //    var now = new Date().getTime(); //獲取打開時時間
  var now = null;
  var serverTime = 1527042000000;   //獲得服務器時間
  now = new Date().getTime();   //獲得當前本地時間 var serverTimeMulse = serverTime - now;   //獲得初始化時間差
  timer = setInterval(function() {
      now = new Date().getTime() + serverTimeMulse; //獲取此刻服務器時間

　　　　 mulse = overTime - now;  //獲得結束時間與當前是按的差值
　　　　 var d = TouDo(Math.floor(mulse / (1000 * 60 * 60 * 24)));  //通過運算得到天數
　　　　 mulse -= d * (1000 * 60 * 60 * 24);   //獲取剩余的時間用來獲取小時數
　　　　 var h = TouDo(Math.floor(mulse / (1000 * 60 * 60)));       //得到小時數
　　　　 mulse -= h * (1000 * 60 * 60);        //獲取剩余的時間用來獲取分鍾數
　　　　 var min = TouDo(Math.floor(mulse / (1000 * 60)));          //得到分鍾數
　　　　 mulse -= min * (1000 * 60);           //獲取剩余的時間用來獲取秒數
　　　　 var s = TouDo(Math.floor(mulse / 1000));                   //得到秒數

  });

　　function TouDo(n) {
　　　　return n >= 10 ? "" + n : "0" + n;
　　}

之后測試，沒問題，Bug解除，雖然此種方式順利解決Bug，但是還是存在如下問題：

1、 性能問題，每秒都獲取時間戳會影響頁面的性能

2、用戶在退出本頁面然后修改時間之后再重新打開本頁面（注意是未刷新情況），初始化的時間差不能及時更新

各位過路大神有新的見解還望不吝賜教 ^(*_*)^