4

必要に応じて、Navigation Timing API を使用して大きなリソースを提供したいと考えています。1 つの問題は、それをサポートしていない Safari です。

次のコードが期待どおりに機能しないケースを示してください。

API のサポートを検出すると、いくつかのフォールバックがあります。残念ながら、古いバージョンの IE とデスクトップ Safari に大きなリソースを提供するために、UA スニッフィングを行う必要があります。

if (typeof performance != null) {

    // Navigation Timing API is Supported

    if (performance.timing.responseEnd - performance.timing.requestStart < 500) {

        // Connection is fast enough to provide large resources.

    }

} else {

    // Navigation Timing API is NOT supported

    if ( !navigator.userAgent.match(/iPhone|Android/) ){

        // Browser is either desktop Safari, Safari on iPad, or IE 8,7,6
        // Assume a fast connection. Provide large resources

    }

}

ブラウザがこれらの条件のいずれも満たさない場合、それは iPhone 上のモバイル Safari または古いバージョンの Android であり、モバイル ファーストのリソースを提供することを余儀なくされます。

さあ、TEAR ME A NEW ONE. これがひどいアプローチである場合、私は本当に知りたいです。

私が今見ている唯一の問題は、JS を使用しないデスクトップ サイトはモバイル リソースを取得することです。

4

1 に答える 1

4

これは、仕様に取り組んだ w3c 担当者の 1 人によるポリフィルです: http://nicj.net/usertiming-js/

よりクリーンなアプローチとしてお勧めします。

更新:
私はこの方法を本番環境で使用しており、かなりの成功を収めています。 http://blog.patrickmeenan.com/2013/07/measuring-performance-of-user-experience.html#comment-form

https://gist.github.com/pmeenan/5902672#file-user-timing-js

帯域幅の検出については、boomerang.js も調べます:
https://github.com/lognormal/boomerang http://www.youtube.com/watch?v=gy1DTBMOA74

于 2014-01-29T17:03:40.837 に答える