7

Webページにブラウザを多用するCSSとアニメーションがあり、ユーザーが高速のPCを使用しているかどうかを判断して、それに応じてスケーリングして最高のエクスペリエンスを提供できるようにしたいと思います。

http://detectmobilebrowser.comのスクリプトを使用してすべてのモバイルデバイスを検出し/android|ipad|ipod|playbook|silk/i.test(a)ています。また、すべてのタブレットデバイスも含める句を含めます。

ただし、これは実際のハードウェアに対応しておらず、実際に対応することもできません。私が探しているものの絵を描くのは、それほど遠くはありません。

たとえば、iPhone 4Sは、モバイルユーザーエージェント検出器によって一致する多くのデバイスよりもはるかに高性能であり、これはそれ自体を際立たせる方法を提供しません。誰かが（どういうわけか）PentiumIIマシンでGoogleChromeを実行していて、私のページを表示したいと思うかもしれません。（この人はおそらくiPhone 4Sを持っていません）

明らかに、これについて実際にアイデアを得るには、実際のパフォーマンステストを行う必要があります。あらゆる種類のアプリケーションでのパフォーマンステストと同様に、アプリケーションが実際に実行するタイプのタスクのパフォーマンスのみをテストするのが理にかなっています。

これを念頭に置いても、パフォーマンステストルーチンに時間がかかりすぎてユーザーが焦る前に、適度に正確な数値を取得することは難しいと思います。したがって、これはおそらく、最初の最初の印象を完璧にしたくない場合を除いて、それを進めることを意味します。まあ、これは実際にそうです。そのため、「最初の実行後」にパフォーマンスを測定し、後でパラメーターを調整することはできません。

したがって、私が残しているのは、基本的に、ユーザーに何も提示せずに、ブラウザーのレンダリングと処理速度に依存する方法で、最初のページの読み込み時に同様のタスクを実行しようとすることです（ユーザーにまだ考えているように）ページが読み込まれています）、次に、できれば1〜2秒以内に、実際のページのパラメータを設定して、スライドショーに似ていない楽しい方法でアニメーション化して表示するのに十分な正確な数値を取得します。

たぶん、テストケースの上にフルページの白<div>を配置して、ユーザーが何が起こっているのかを確認できないようにし、すべての作業を回避することでブラウザーがスマートにならないようにすることができます。

誰かがこれをしたことがありますか？

人々が「おそらくこれをする必要はないだろう」、「もっと良い方法が必要だ」、「効果の量を減らす」と言うだろうと私は知っています。

私がページでやっていることのいずれかをする理由は、それが見栄えがするようにするためです。それが全体のポイントです。私がそれをあまり気にしなかったら、この質問は存在しなかったでしょう。目標は、JavaScriptに、強力なコンピューターで素晴らしいエクスペリエンスを提供するのに十分なパラメーターを決定する機能と、能力の低いコンピューターで無難なエクスペリエンスを提供する機能を提供することです。より多くの電力が利用できる場合は、それを利用する必要があります。うまくいけば、それがそのような提案が質問に対する有効な答えではない理由を説明することができます。

4

3 に答える 3

3

ユーザーのエクスペリエンスを何よりも優先するので、これは素晴らしい質問だと思います。

いくつかのアイデアが思い浮かびます:

  • Microsoft は、IE 9 および 10 のパフォーマンスを示す多くのテストを公開しています。これらのテストの多くは、この JavaScript ファイルを使用してパフォーマンスを測定しているように見えるこのようなグラフィック パフォーマンスに焦点を当てています。使用できるコード/概念がいくつかある場合があります。

  • いずれにせよ、メディア集約型のページの読み込みにはおそらく数秒かかるため、残りのコンテンツが読み込まれている間にテストを開始すると、少し息抜きができます. たとえば、AJAX/画像リクエストを開始し、テストを実行してから、レスポンスを処理します。

  • グラフィックのパフォーマンスをテストするには、ロード中のグラフィックをパフォーマンス テストとして使用するのはどうですか? 私は通常、「読み込み」画面のファンではありませんが、サイトの読み込みに数秒かかる場合があり、最終的に UX が向上する場合、それは悪い考えではありません。

  • その上にたくさんの白い形を描くと、白い画面のアイデアがうまくいくかもしれません (同じ色なので、これを最適化するのに十分なほど賢いエンジンがあるかどうかはわかりません)。

最終的には、ユーザーを長時間待たせるのではなく、パフォーマンスが向上し、忠実度が低下し、テストの精度が低下します (ただし、高速になります)。

于 2012-07-25T03:52:29.280 に答える
2

ユーザーの CPU パフォーマンスを 1 回測定して、そこから使用する派手な視覚効果の数を決定するのではなく、CPU を集中的に使用するビットが実行されるたびにかかる時間を測定し( を使用new Date())、それを予想される最小値と最大値と比較します。 （決定する必要があります）、必要に応じて「効果レベル」を動的に上下に調整します。

ユーザーがバックグラウンドで多くの CPU 時間を消費するプログラムを起動したとします。このアイデアを使用すると、ページの視覚効果が自動的にトーンダウンされ、CPU サイクルが節約されます。バックグラウンド プログラムが終了すると、派手な効果が戻ってきます。ユーザーがこの効果を気に入るかどうかはわかりません (ただし、CPU が過負荷になったときにブラウザーが応答し続けるという事実を気に入っていただけると確信しています)。

于 2012-07-25T04:51:46.763 に答える
1

これは貧弱な解決策ですが、当時はうまくいきました。私は、約100x100の2つのランダム行列を生成し、それらを100回（男子生徒の方法で）乗算して時間を計っていました。通常のマシンでは1秒未満、私が見つけた中で最も遅いマシン（EeePC 1000H）では2秒強かかりました。その後、「このCPUは1秒あたりX浮動小数点演算を実行できます」と言うことができます。これは非常に不正確で、おそらく間違っていますが、結果は非常に安定しており、標準偏差が非常に小さいため、不十分な測定値と言えます。そのコンピュータのCPUについて何かを教えてくれるjavascriptの数学的パフォーマンスの。

WebGLが有効になっているかどうかを確認することもでき、Vistaより古いすべてのWindowsオペレーティングシステムが除外されます。それらはVista以上を実行するためのハードウェアを持っていないので、それらはより遅いPCです。あなたはこれでそれをチェックすることができます：

function hasWebGL () {
  if (typeof window.WebGLRenderingContext !== 'undefined') {
    var canvas = document.createElement('canvas');
    var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') || canvas.getContext('webkit-3d') || canvas.getContext('moz-webgl');
    if(gl) {
      return(true);
    } else {
      return(false);
    }
  }
}
于 2012-07-25T03:34:07.987 に答える