1

私は最近HTML5でいくつかの実験を行っていましたが、HTML5はモバイル、タブレット、さらにはデスクトップでさえも非常にうまく機能していないように見えることに気づきました。次のテストを実施しました。

jQueryを使用してページ上を移動する150個の要素 http://erality.com/public/html5/001/

25個の要素がHTML5でページを移動します http://erality.com/public/html5/002/

jQueryバージョンはデスクトップでうまく動作し、新しいタブレットでもかなりうまく動作します。HTML5バージョン（要素の1/6）はデスクトップではうまく動作せず、タブレットではひどいものです。これは通常のパフォーマンスですか？私は何か間違ったことをしていますか？

どんな洞察も役に立ちます。

4

2 に答える 2

2

「HTML5」バージョンでのパフォーマンスの低下は、HTML5キャンバスで何かをアニメーション化するための推奨される方法である（RAF） のsetTimeout代わりに使用することで説明されます。RAFの詳細については、こちらをご覧ください。requestAnimationFrame

編集：私は「によって部分的に説明されている」と書くべきでした

RAFの他に、setTimeoutの代わりにsetIntervalを使用してみてください。また、各setTimeoutの期間にランダムな要因があるのはなぜですか？RAFを使用したくない場合は、各間隔ですべての花びらを更新しながら、固定間隔でsetIntervalを使用することをお勧めします（最初は16msを試してください）。現在、花びらごとに個別のsetTimeoutを使用しており、期間はランダムであるため、多くの遅延が発生している可能性があります。

これは、 RAFのパフォーマンス上の利点に関する優れたMSDN記事です。RAFをsetTimeout/setIntervalと比較します。記事からのいくつかの関連する引用：

その結果、アプリケーションはブラウザのペイント間隔と完全に一致し、適切な量のリソースのみを使用します。

また：

表示の更新間隔の前に別の描画要求が発生するため、3回ごとの描画をペイントすることはできません。このオーバードローは、3フレームごとに失われるため、アニメーションが途切れる結果になります。このタイマー分解能の低下は、バッテリー寿命に最大25％の悪影響を与える可能性もあります。

setTimeoutを使用しても、例のパフォーマンスの違いを完全に説明できない場合があります。他の人は、比較はリンゴ同士ではないことに気づきました。setTimeoutを使用すると、より高速なアニメーションを取得できるはずです（setTimeoutを使用してかなりスムーズな物理シミュレーションを作成しました）。とにかく、RAFはsetTimeoutよりもはるかに優れており、最もスムーズなアニメーションを取得する唯一の方法です。

于 2012-05-25T21:33:13.673 に答える
1

jQueryとHTML5のアニメーションのパフォーマンスは、それぞれの方法でオブジェクトを移動/描画する方法が異なるため、非常に優れています。

アニメーションがjQueryである場合、オブジェクトに直接アクセスして画面上でオブジェクトを変換します。Canvas要素の場合、要素を新しい位置に配置するたびにキャンバスを再描画する必要があります。

PS私はこの主張の出所を持っていますが、これは実際には私の意見です。

于 2012-05-25T21:24:43.957 に答える