HTML 5の揺れとオーディオ再生の問題の最適化のまとめ

前言感想:WARNING、ERROR、または不十分な体験点を見逃さず、最適化を続け、精進すれば、私たちは向上することができます.
1.揺れが鋭敏ではなく、何度も揺れても応答しない問題、
もともとコードを振るのはネットのCopyからで、活动がオンラインになった后に、一部の携帯电话の揺れのモニタリングの効果が十分ではないことを発见して、揺れは何度も応答していないで、携帯电话を壊すことを恨んで、そこで最适化します.
元の揺れコード:

var SHAKE_THRESHOLD = 800;      
var last_update = 0;        
var x = y = z = last_x = last_y = last_z = 0;

function deviceMotionHandler(eventData) {       
    var acceleration = eventData.accelerationIncludingGravity;      
    var curTime = new Date().getTime();     

    if ((curTime - last_update) > 500) {        
        var diffTime = curTime - last_update;       
        last_update = curTime;      
        x = acceleration.x;     
        y = acceleration.y;     
        z = acceleration.z;     
        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;      
        var status = document.getElementById("status");     

        if (speed > SHAKE_THRESHOLD) {  
          alert('     ');
        }

        last_x = x;     
        last_y = y;     
        last_z = z;     
    }       
}

if(window.DeviceMotionEvent) {
    // Mobile browser support motion sensing events
    window.addEventListener('devicemotion', deviceMotionHandler, false);
} else {
    // Mobile browser does not support the motion sensing events
}

そこで、上記のコードが感度が悪い原因を研究し始めました.
The device motion event is a superset of the device orientation event; it returns data about the rotation information and also acceleration information about the device. The acceleration data is returned in three axes: x, y and z. They are measured in meters per second squared (m/s^2). Because some devices might not have the hardware to exclude the effect of gravity, the event returns two properties, accelerationIncludingGravity and acceleration, which excludes the effects of gravity, (when this is the case, the acceleration data will be null)
HTML 5のデバイス移動には2つの加速度に関するデータがありました.

 // Grab the acceleration from the results
  var acceleration = eventData.acceleration;
  info = xyz.replace("X", acceleration.x);
  info = info.replace("Y", acceleration.y);
  info = info.replace("Z", acceleration.z);
  document.getElementById("moAccel").innerHTML = info;

  // Grab the acceleration including gravity from the results
  acceleration = eventData.accelerationIncludingGravity;
  info = xyz.replace("X", acceleration.x);
  info = info.replace("Y", acceleration.y);
  info = info.replace("Z", acceleration.z);
  document.getElementById("moAccelGrav").innerHTML = info;

そこで、最適化されたコードは次のようになります.

var SHAKE_THRESHOLD = 300,
        last_update = 0,
        x = y = z = last_x = last_y = last_z = 0,

function deviceMotionHandler(eventData) {
    var acceleration = eventData.accelerationIncludingGravity;
    var curTime = new Date().getTime();

    if ((curTime - last_update) > 500) {   //                
        var diffTime = curTime - last_update;
        last_update = curTime;

        x = acceleration.x;
        y = acceleration.y;
        z = acceleration.z;
        //var speed = Math.abs(x + y + z - last_x - last_y - last_z) / (diffTime * 1000);

        //     1:        x、y、z              。  x    ，y    ，      。
        var dist = Math.sqrt((x-last_x)*(x-last_x)+(y-last_y)*(y-last_y)+(z-last_y)*(z-last_y))
        var speed = dist/diffTime*10000;

        //   2:        ，    
        if (speed > SHAKE_THRESHOLD) {     //      
           alert('     ');
        }
        last_x = x;
        last_y = y;
        last_z = z;
    }
}

参照リンク:http://www.html5rocks.com/en/tutorials/device/orientation/
2.ページ新聞WARNING:The devicemotion event is deprecated on insecure origins,and support will be removed in the future.You should consider switching your application to a secure origin, such as HTTPS.
上のdevicemotionは上記の警告を報告することを発見して、いくつかの資料を調べて、現在はhttpsに切り替えない限り、解決する方法があります.
3. ERROR: Uncaught (in promise) DOMException: The element has no supported sources.エラー
従来のaudioを挿入したソースコードは以下の通りで、オーディオを再生する際にブラウザやデバッガのデバッグ環境で上記のようなエラーが発生しますが、iPhoneなどの携帯電話の使用には影響しません

    

    function playOrPaused() {
        console.log(typeof audio);
        console.log(typeof audio.paused);

        if (audio.paused) {
            audio.play(); //ERROR:Uncaught (in promise) DOMException: The element has no supported sources.
        }
    }

関連資料を調べると、audioは2つの方法でsrcを設定することができます.以下のようにします.

1. Permitted content: If the element has a src attribute: zero or more  elements, followed by transparent content that contains no media elements — that is, no 

さらに:srcに埋め込まれたオーディオのURL.このURLはHTTPアクセスコントロールに従うべきである.これはオプションのプロパティです.このプロパティの代わりにaudio要素で要素を使用して埋め込まれたオーディオを指定できます.
そこで第2の案に変えて、問題を解決して、以下のようにします:

参考資料:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio http://www.w3schools.com/html/html5_audio.asp
4.一部のアンドロイド(vivoなど)は微信ブラウザでaudioが再生できず、音がしないが、携帯電話で持参したブラウザでは問題ない
ソリューション:

```
document.addEventListener('WeixinJSBridgeReady', function () {

        audio = document.getElementById("audio");

        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        } else {
            alert('      devicemotion  ');
            return ;
        }

        shakeOn(1000);//       
});

```

5. WARNING: Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.

   setTimeout(function () {
        shakeOff();
    }, n);

元のシャットダウンアニメーション効果では、debugデバッガがWARNINGのようにフィードバックすることがあり、資料を調べることで発見されました.
The warning is telling you that your timer wasn’t fired on time because it is a long running callback (> 50ms) and the user was/is about to scroll. While your callback is running, Chrome can’t start scrolling the page so this results in “jank”, user input not being handled in a timely manner. To make the experience better for the user, Chrome decided to postpone firing that callback until a time where running it won’t negatively affect the user.
I don’t know the details of what you’re trying to do, but the correct way to do things would be to chunk up your one big callback into smaller batches and spread them out so that any one call will not noticeably delay user actions. You could additionally look at using requestIdleCallback which will call your function only when Chrome is idle and is ideally suited for non-time critical tasks. (However, requestIdleCallback is supported only on Chrome as of now).
参考資料:http://stackoverflow.com/questions/37048438/what-is-this-console-warning-i-keep-getting-deferred-long-running-timer-tasks