スタディナイン、JSパフォーマンスコード最適化の概要

JSパフォーマンステスト：Benchmark.jsに基づくhttp://jsperf.com/で完了

基本的に、数理統計と分析のために多数の実行サンプルを収集します

指示：

1）Githubでログインします

2）個人情報の入力（オプション）

3）詳細なテストケース情報（タイトル、スラッグ）を入力します

4）コードを入力する準備をします（通常はDOM操作で使用されます）

5）必要なセットアップコードと分解コードを入力します

6）テストコードスニペットを入力します

1.グローバル変数の使用には注意が必要です

グローバル変数を注意して使用する理由

1.グローバル変数は、すべてのスコープの最上位であるグローバル実行コンテキストで定義されます

2.グローバル実行コンテキストは、プログラムが終了するまで常にコンテキスト実行スタックに存在します

3.同じ名前の変数がローカルスコープに表示されると、グローバルを覆い隠したり汚染したりします

2つ目は、グローバル変数をキャッシュする

使用中に回避できないローカル変数をキャッシュする

3つ目は、プロトタイプオブジェクトを介してメソッドを追加することです。

let fn1 = function () {
    this.foo = function () {
        console.log(11111)
    }
}

let f1 = new fn1()


let fn2 = function () {}
fn2.prototype.foo = function () {
    console.log(11111)
}

let f2 = new fn2()

プロトタイプオブジェクトの新しいインスタンスオブジェクトに必要なメソッド

4、閉鎖トラップを避けます

1.閉鎖機能：

1）外側は内側への参照を持っています

2）外部スコープの内部スコープのデータにアクセスします

2.閉鎖について：

1）クロージャは強力な構文です

2）クロージャーの不適切な使用は、コンテンツの漏洩を招きやすい

3）閉鎖のために閉鎖しないでください

3、ex：function foo（）{

el = document.getElementById（ "btn"）;

el.onclick = function（）{

console.log（el.id）

}

el = null //クロージャトラップを解決します。

}

5、属性アクセス方法の使用を避けます

function Person() {
    this.name = 'icoder'
    this.age = 18
    this.getAge = function () {
        return this.age
    }
}

const p1 = new Person()
const a = p1.getAge()

function Person() {
    this.name = 'icoder'
    this.age = 18
}
const p2 = new Person()
const b = p2.age

1. JSは属性アクセス方法を必要とせず、すべての属性は外部から表示されます

2.属性アクセス方法を使用すると、アクセス制御なしで定義のレイヤーのみが追加されます。

6、Forループの最適化

let arrList = []
arrList[10000] = 'icoder'

for (let i = 0; i < arrList.length; i++) {
    console.log(arrList[i])
}

for (let i = arrList.length; i; i--) {
    console.log(arrList[i])
}

セブン、最適循環方式を採用

forEach（）が最高で、2番目に、for ... inが最悪です

8.ドキュメントの断片化最適化ノードが追加されました

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优化节点添加</title>
</head>
<body>
  <script>

    for (let i = 0; i < 10; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      document.body.appendChild(oP)
    }

    const fragEle = document.createDocumentFragment()  //创建一个文档碎片
    for (let i = 0; i < 10; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      fragEle.appendChild(oP)
    }

    document.body.appendChild(fragEle)

  </script>
</body>
</html>

9つのクローン最適化ノード操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>克隆优化节点操作</title>
</head>
<body>
  <p id="box1">old</p>

  <script>

    for (let i = 0; i < 3; i++) {
      let oP = document.createElement('p')
      oP.innerHTML = i 
      document.body.appendChild(oP)
    }

    let oldP = document.getElementById('box1')
    for (let i = 0; i < 3; i++) {
      let newP = oldP.cloneNode(false) //这里传入false表示只克隆当前节点，true为克隆当前以及其所有子节点。
      newP.innerHTML = i 
      document.body.appendChild(newP)
    }

  </script>

</body>
</html>

10.新しいオブジェクトコードのリテラル置換-04 / app07.html

let a1 = [1, 2, 3]

let a2 = new Array(1,2,3)

let a3 = new Array(3)
a3[0] = 1
a3[1] = 2
a3[2] = 3

スタディナイン、JSパフォーマンスコード最適化の概要

おすすめ