Javascrip{filter}T Performance Optimization

ファンシャオリン84 · 掲載地 2017/12/04 20:23:14

1. 物の所有権を尊重すること
 インスタンスやプロトタイプに属性を追加しないでください;
 インスタンスやプロトタイプにメソッドを追加しないでください;
 既存の手法を再定義しないでください。
そのための最善の方法は、自分の所有していないオブジェクトを絶対に改変しないことです。オブジェクトを所有するということは、自分で作成したカスタム型やオブジェクトのリテラルなど、それを自分で作ったことを意味します。配列やドキュメントは明らかにあなたのものではなく、コードが実行される前から存在しています。
2. グローバル変数の回避
最大でもグローバル変数を作成し、他のオブジェクトや関数をその中に存在させてください。以下の例を見てください:
//两个全局量——避免！！
var name = 「ニコラス」;
関数 sayName(){
alert(name);
}
このコードは変数名と関数sayName()という2つのグローバル量を含みます。実際、以下の例のように、両方を含むオブジェクトを作成することも可能です。
//一个全局量——推荐
var MyApplication = {
name: “Nicholas”,
sayName: function(){
alert(this.name);
}
};
3. nullとの比較を避ける
もし値が参照型であるべきなら、インスタンスオペレータを使ってそのコンストラクタを検証します。
 値が基本型であるべきなら、typeofを使って型を確認します。
もしオブジェクトに特定のメソッド名を含ませたい場合は、typeof演算子を使って指定された名前のメソッドがオブジェクト上に存在していることを確認してください。
(ここでは私のウェブフロントエンド学習・交換グループをおすすめします。675498134、初心者であろうと神様であろうと、皆さんが学び、コミュニケーションし、時には私がまとめた最新のフロントエンド教材やチュートリアルなど、雑用品を共有することを歓迎します。また、毎日リアルタイムでフロントエンド知識を説明してくれる技術専門家もいます。初心者から上級者まで、一緒に学び、コミュニケーションを取り、進歩を共にすることができます。）
4. 定数を使う
Javascrip{filter}tには定数の正式な概念はありませんが、有用です。アプリケーションロジックからデータを分離するこの考え方は、エラーを発生させるリスクなしにデータを変更できます。以下の例を見てください:
var 定数 = {
INVALID_VALUE_MSG:「無効な価値だ!」、
INVALID_VALUE_URL:「/errors/invalid.php」
};
function valid(value){
もし(!value){
alert(Constants.INVALID_VALUE_MSG);
locatio{filter}n.href = Constants.INVALID_VALUE_URL;
}
}
5. グローバルサーチを避ける
スクリプトのパフォーマンスを最適化する最も重要なのは、グローバルな検索に注意を払うことでしょう。グローバル変数や関数を使うのは、スコープチェーン上の探索を伴うため、ローカル変数よりも確実にコストがかかります。次の機能をご覧ください:
function updateUI(){
var imgs = document.getElementsByTagName("img");
(var i=0, len=imgs.length; レン<; i++){
imgs[i].title = document.title + "image " + i;
}
var msg = document.getElementById("msg");
msg.innerHTML = "更新完了.";
}
関数は見た目は問題なく見えますが、グローバルドキュメントオブジェクトへの参照が3つ含まれています。ページに複数の画像がある場合、forループ内のドキュメント参照はスコープチェーン検索のたびに複数回、あるいは数百回実行されます。ドキュメントオブジェクトを指すローカル変数を作成することで、グローバルな検索を一度だけ制限することで、この関数のパフォーマンスを向上させることができます。
function updateUI(){
var doc = document;
var imgs = doc.getElementsByTagName("img");
(var i=0, len=imgs.length; レン<; i++){
imgs[i].title = doc.title + "image " + i;
}
var msg = doc.getElementById("msg");
msg.innerHTML = "更新完了.";
まずドキュメントオブジェクトをローカルドキュメント変数に配置します。その後、元の文書をコードの残りに置き換えます。元のバージョンと比べると、現在の関数はグローバル検索が1つだけで、確実に高速です。
6. パフォーマンスのためのその他の注意事項
 ネイティブメソッドは速い - 可能な限り、Javascrip{filter}tで自分で書き直すのではなく、ネイティブメソッドを使うのが良いでしょう。ネイティブメソッドはC/C++のようなコンパイル言語で書かれているため、Javascrip{filter}tよりもはるかに高速です。 Javascrip{filter}tで最も忘れられがちなのは、Mathオブジェクトに見られる複雑な数学です。これらの手法は、Javascrip{filter}tで書かれた他の手法(例えばsineやcosine)よりもはるかに高速です。
 Switch文はより速い - 複雑なif-else文が複数ある場合、それらを単一のSwitch文に変換することでより速いコードを得られます。また、ケース文を最も可能性が高いものから最もありそうなものまで整理することで、スイッチ文をさらに洗練させることもできます。
 ビット演算子は高速です - 数学的演算を行う際、ビット演算はブール演算や算術演算よりも速いです。算術演算をビット演算に選択的に置き換えることで、複雑な計算の性能を大幅に向上させることができます。モジュラス、論理、和論理などの論理はビット演算に置き換えられると考えられます。

クヴェルチュ · 掲載地 2017/12/05 9:33:13

学び

[JavaScript] Javascrip{filter}T Performance Optimization

スコア

閲覧したセクション