JS スクリプトを高速化する方法はありますか (ゲームやアニメーションなどの複雑な DOM 操作を意味します)。
7 に答える
本当に高速化する方法はありません。コンパクトにすることはできますが、それほど速くはなりません。
V8 JavaScript エンジンを使用しますか? :P
これを行う唯一の方法は、コード内の dom とスコープ アクセスの量を減らすことです。たとえば、dom 内の要素に複数回アクセスする場合、代わりに
document.something.mydiv.myelement.property1 = this
document.something.mydiv.myelement.property2 = bla
document.something.mydiv.myelement.property3 = foo
document.something.mydiv.myelement.property4 = bar
行う
var myel = document.something.mydiv.myelement
myel.property1 = this
myel.property2 = bla
myel.property4 = bar
myel.property3 = foo
一部の JavaScript エンジンは自動的にこの最適化を行うことに注意してください。ただし、古いブラウザーの場合、myel に到達するためにアクセス チェーンを 1 回だけ通過する必要があるため、後者は前者よりも確実に高速になります。
JavaScript の最適化テクニックについては、このビデオを ご覧ください http://www.youtube.com/watch?v=mHtdZgou0qU
ブラウザの外側を意味する場合は、最も高速なChrome の V8 Java Script エンジンを使用する必要があります。
ブラウザー内には、Java Script の読み込みを高速化するための最適化手法が豊富に用意されています。Google による最適化手法の最適な場所はここにあります。
- gzip で提供するよりも、YUI コンプレッサーなどのツールを使用して Java Script をコンパイルします。
- 必要最小限だけロードする
- 複雑なアニメーションは、Rich UI プラグイン (Flash/Silverlight など) が最適です。
アニメーションについては、HTML 5 の Canvas 要素をサポートしているブラウザーでは使用することを検討し、サポートしていないブラウザーでは Flash にフォールバックします。
Google マップは、各ブラウザーのパフォーマンスを最適化するために豊富なリソースを費やしてきましたが、純粋な Java Script で可能なことの良い例です。いつものように、速度を向上させる最善の方法は、さまざまなアプローチをベンチマークすることです。たとえば、div.innerHTML ="" は、ほとんどの場合、DOM を使用して要素を動的に追加するよりも高速です。
あなたができる最善のことは、コードを最適化することです。プロファイラーを使用してください-- Firefox には Firebug があり、Safari と Windows IE 8 には JavaScript デバッガーとプロファイラーが組み込まれています (少なくとも IE 8 にはあると思います。間違っていたら誰か訂正してください...)。コードでプロファイルを実行すると、最も遅い部分がどこにあるかがわかります。それらは、最適化に集中できるセクションです...おそらく、より具体的な質問が増えるでしょう.
アニメーションを作成し、配置された要素または「オフスクリーン」要素に変更を表示してみてください。ページの再描画回数を最小限に抑えてください。
一度に1つのプロパティではなく、cssTextまたはclassNameを変更して、複数のスタイルを変更します。
同じプロセスで要素またはプロパティを2回ルックアップする必要がある場合は、最初にローカル参照を作成する必要があります。
また、デバッグしていない場合は、デバッガーをオフにすることを忘れないでください。
個人的には試したことはありませんが、Googleのクロージャ プロジェクトはそのような主張をしています。
Closure Compiler は、JavaScript をコンパクトで高性能なコードにコンパイルします。コンパイラは、デッド コードを削除し、残っているコードを書き直して最小化するため、ダウンロードしてすばやく実行できます。また、構文、変数参照、型もチェックし、一般的な JavaScript の落とし穴について警告します。