18

私は、現在 CSS3 トランジションで構築されている webapp (Chrome 19 以降でのみ実行されます) に取り組んでいます。より具体的には、Jquery Transitを使用して、Jquery 自体で CSS3 アニメーションを起動しています。ここでの理由は、一部のアニメーションが数秒間引き出され、jquery animate では十分に滑らかではなかったからですが、Transit はこれを大幅に修正します。Jquery Transit は非常にうまく機能していますが、HTML5 Canvas がさらにスムーズにレンダリングされるかどうかに興味があります。もしそうなら、現在DIVにAJAXとパーセンテージベースの場所を使用しているという事実を考えると、追求する価値はありますか? CSS3 アニメーションと Chrome での HTML5 Canvas のパフォーマンスの比較を知っている方がいらっしゃいましたら、喜んでご意見をお聞かせいただければ幸いです。

4

2 に答える 2

17

CSS3 は頭痛の種を減らし、将来的には簡単に変更できます。また、キャンバスが有効でないシステムでも適切に動作します。

テキストを使用している場合、CSS を使いこなせるのであれば、絶対に CSS を使用する必要があります。Canvas はアプリのアクセシビリティを台無しにし、ユーザーがカラットを使用したり、テキストを強調表示したり、テキスト読み上げを使用したりすることを禁止します。

面白いスライド ボタンなどを作成するだけの場合は、CSS も使用する必要があります。これは、おそらく実装と保守がはるかに簡単になるためです。CSS をやり直すことは、(複雑になる可能性がある) JavaScript に苦労するよりも簡単です。

キャンバスのレンダリングがよりスムーズになるかどうかは、正直に言えません。キャンバスの利点の 1 つは、DOM を再レイアウトする必要なく、(キャンバスを同じサイズに保ちながら) 一見大きなサイズにアニメーション化できることです。最近のほとんどのシステムでは、これは実際には問題ではないと考えられています。

さらに、 CSS3 で既に行われている場合、実際にパフォーマンスの問題が発生していますか? まだ誰もパフォーマンスについて文句を言っていないのに、わざわざキャンバス用に書き直す必要があるでしょうか? これまで実際のパフォーマンスの問題に遭遇していない場合、アプリを再発明する必要はありません。

于 2012-06-25T03:30:02.890 に答える
1

キャンバスで遭遇する可能性があると思われる問題は、キャンバスがビットマップベースであることです。したがって、ページが最初にレンダリングされた後の拡大縮小は問題になります。さらに、改行は対処するのが面倒になる可能性があります。canvas、svg、または vml を使用した改行のようなものはないため、サイトのコンテンツを作成する人は改行を挿入するのが難しいと感じるかもしれません。実際、改行を事前に計算する必要があります。raphael.js を使用した "\n" は機能しますが、あまり良くありません。さらに、svg グラフィックスの場合、セレクターを使用してさまざまな部分をターゲットにすることはできません。キャンバスを使用できるかもしれません....キャンバスにはおそらく同じ落とし穴がたくさんあります。

画像の前面では、拡大縮小するとぼやけた画像になり、キャンバスの画像サイズ変更を処理するライブラリが少なくなります。これは将来変更される可能性がありますが、それでも対処するのは困難です。古いブラウザ用のjqueryフォールバックを備えたdiv/css3に固執します。

純粋にパフォーマンスの観点から、質問に対する最初のコメントを確認してください。いくつかの優れたベンチマークがあります。

于 2012-06-25T04:10:49.570 に答える