ホームページ > 記事 > ウェブフロントエンド > JS パフォーマンス最適化手法の例を共有する

JS パフォーマンス最適化手法の例を共有する

小云云オリジナル: 2018-03-13 15:58:191340ブラウズ

スクリプトはページ要素コードの後に配置する必要があります

現在のJavaScriptコードが埋め込まれているか外部リンクファイルにあるかに関係なく、ページのダウンロードとレンダリングは停止し、スクリプトの実行が完了するまで待つ必要があります。 JavaScript の実行プロセスに時間がかかるほど、ブラウザがユーザー入力に応答するまでの待ち時間も長くなります。スクリプトのダウンロードおよび実行時にブラウザがブロックされる理由は、スクリプトによってページまたは JavaScript の名前空間が変更され、後続のページのコンテンツに影響を与える可能性があるためです。

グローバル検索を避ける

    function search() {
        //当我要使用当前页面地址和主机域名
        alert(window.location.href + window.location.host);
    }
    //最好的方式是如下这样  先用一个简单变量保存起来
    function search() {
        var location = window.location;
        alert(location.href + location.host);
    }

型変換

般最好用”" + 1来将数字转换成字符串，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

("" +) > String() > .toString() > "

"
    var myVar = "3.14159",
    str = "" + myVar, //  to string  
    num=+myVar,       // to number
    i_int = ~ ~myVar,  //  to integer  
    f_float = 1 * myVar,  //  to float  
    b_bool = !!myVar,  /*  to boolean - any string with length 
                            and any number except 0 are true */
    array = [myVar];  //  to array
"

Multiプルタイプ宣言

JavaScript では、すべての変数を単一の var ステートメントを使用して宣言できます。これは、スクリプト全体の実行時間を短縮するために結合されたステートメントです。上記のコード形式も非常に標準化されており、簡単です。見てみると明らかです。
createElement の代わりに template 要素を複製します

多くの人は、必要に応じて JavaScript で document.write を使用することを好みます。 HTML を直接挿入するには、p または span を指定し、ページに独自の HTML コードを挿入するようにその innerHTML を設定するなどのコンテナ要素を見つけることができます。実際には、文字列を使用して HTML を直接記述します。 1: コードの有効性が保証できない、2: 文字列の操作効率が低いため、ドキュメント内に既製のテンプレートノードがある場合は、cloneNode() メソッドを使用する必要があります。なぜなら、createElement() メソッドを使用した後、複数の要素の属性を設定するには、 cloneNode() を使用して属性設定の数を減らす必要があるためです。同様に、多数の要素を作成する必要がある場合は、最初にテンプレートノードを準備する必要があります。
```
    var frag = document.createDocumentFragment();
    for (var i = 0; i < 1000; i++) {
        var el = document.createElement(&#39;p&#39;);
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);
    //替换为：
    var frag = document.createDocumentFragment();
    var pEl = document.getElementsByTagName(&#39;p&#39;)[0];
    for (var i = 0; i < 1000; i++) {
        var el = pEl.cloneNode(false);
        el.innerHTML = i;
        frag.appendChild(el);
    }
    document.body.appendChild(frag);
```
クロージャを使用するときは注意してください

クロージャのケース
```
document.getElementById(&#39;foo&#39;).onclick = function(ev) { };
```
ループ時に制御条件と制御変数を組み合わせます
```
for ( var x = 0; x < 10; x++ ) {};
```
このループに何かを追加する前に、JavaScript が実行するいくつかの操作があることがわかります。エンジンは反復ごとに実行する必要があります: 1: x が存在するかどうかを確認する 2: x が 10 未満であるかどうかを確認する 3: x を 1 ずつ増やす

改善
```
var x = 9;
do { } while( x-- );
```
null との比較を避ける

JavaScript は弱く型付けされているため、自動型チェックは行わないので、null と比較するコードを見つけた場合は、次の手法で置き換えてみてください:

1. 値が参照型である必要がある場合は、instanceof 演算子を使用してそのコンストラクターをチェックします。値が基本型である必要がある場合は、typeof を使用してその型を確認します 3. オブジェクトに特定のメソッド名を含める場合は、typeof 演算子を使用して、指定された名前のメソッドがオブジェクトに存在することを確認します
オブジェクトの所有権を尊重する

JavaScript はいつでも任意のオブジェクトを変更できるため、デフォルトの動作は予期しない方法でオーバーライドされる可能性があるため、オブジェクト、そのオブジェクト、またはそのメソッドの保守に責任がない場合は、次のことを行う必要があります。具体的には:

1. インスタンスまたはプロトタイプに属性を追加しないでください。 2. インスタンスまたはプロトタイプにメソッドを追加しないでください。 3. 既存のメソッドを再定義しないでください。 4. 実装されているメソッドを繰り返し定義しないでください。自分が所有していないオブジェクトは絶対に変更しないでください。オブジェクトの新しい関数を作成するには、次の方法があります。 1. 必要な関数を含む新しいオブジェクトを作成し、それを使用して関連オブジェクトと対話します。カスタム型を作成し、変更が必要な型を継承して、カスタム型に関数を追加します

リテラルを使用する

    var aTest = new Array(); //替换为
    var aTest = [];
    var aTest = new Object; //替换为
    var aTest = {};
    var reg = new RegExp(); //替换为
    var reg = /../;
    //如果要创建具有一些特性的一般对象，也可以使用字面量，如下：
    var oFruit = new O;
    oFruit.color = "red";
    oFruit.name = "apple";
    //前面的代码可用对象字面量来改写成这样：
    var oFruit = { color: "red", name: "apple" };

ネガティブ検出を短縮する

    if (oTest != &#39;#ff0000&#39;) {
        //do something
    }
    if (oTest != null) {
        //do something
    }
    if (oTest != false) {
        //do something
    }
    //虽然这些都正确，但用逻辑非操作符来操作也有同样的效果：
    if (!oTest) {
        //do something
    }

JavaScriptオブジェクトを解放する

随着实例化对象数量的增加，内存消耗会越来越大。所以应当及时释放对对象的引用，让GC能够回收这些内存控件。对象：obj = null 对象属性：delete obj.myproperty 数组item：使用数组的splice方法释放数组中不用的item

巧用||和&&布尔运算符

    function eventHandler(e) {
        if (!e) e = window.event;
    }
    //可以替换为：
    function eventHandler(e) {
        e = e || window.event;
    }
    
    
    
    if (myobj) {
        doSomething(myobj);
    }
    //可以替换为：
    myobj && doSomething(myobj);

switch语句相对if较快
每条语句末尾须加分号

JS パフォーマンス最適化手法の例を共有する

関連記事