この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

JavaScript コードへの Lightning Locker の影響のベンチマーク

Lightning Locker が有効な場合と無効な場合の JavaScript コードのベンチマークを実行し、相対的なパフォーマンス総計値を表示します。

このベンチマークにより、コンポーネントをテストするアプリケーションを作成することなく、Lightning Locker が有効な場合と無効な場合のパフォーマンスの違いを確認できます。

例

例を見てください。一連のネストしたループのパフォーマンスについて研究しましょう。

次のコードをコードコンソールに張り付けます。

1function build(count) {
2    var table = document.createElement("table");
3    for (var contact = 0; contact < count; contact++) {
4        for(var day = 0; day < 7; day++) {
5            var tr = document.createElement("tr");
6            var td = document.createElement("td");
7            td.textContent = contact;
8            tr.appendChild(td);
9            for(var hour = 6; hour < 22; hour++) {
10                td = document.createElement("td");
11                td.className = "officeDivider";
12                tr.appendChild(td);
13
14                td = document.createElement("td");
15                td.className = "officeHourIn";
16                tr.appendChild(td);
17
18                td = document.createElement("td");
19                td.className = "officeHourIn";
20                tr.appendChild(td);
21
22                td = document.createElement("td");
23                td.className = "officeHourIn";
24                tr.appendChild(td);
25
26                td = document.createElement("td");
27                td.className = "officeHourIn";
28                tr.appendChild(td);
29            }
30            table.appendChild(tr);
31        }
32    }
33    return table;
34};
35
36build(10);

[Benchmark (ベンチマーク)] をクリックします。
結果ウィンドウの [FASTEST] 列には、Lightning Locker が無効な場合に 6.56 倍の速さでコードが実行されることが示されています。この速度の違いがセキュリティのコストであり、このパフォーマンス損失を受け入れることができるかどうかは、各事例によって異なります。

このベンチマークアクションにより、コードを調整し、実行時に変更がどのように影響するかを確認できます。計算が集中するコードのセクションを最適化する場合、この迅速な反復プロセスが役立ちます。

向上したパフォーマンスの例

Lightning Locker のオーバーヘッドを軽減する方法を示すため、HTML の文字列を使用する同じテーブルを作成し、ベンチマークを実行して、違いを評価します。

次のコードをコードコンソールに張り付けます。

1function build(count) {
2    var html = "<body>"
3    for (var contact = 0; contact < count; contact++) {
4        for (var day = 0; day < 7; day++) {
5            html += "<td>" + contact + "</td>";
6            for (var hour = 6; hour < 22; hour++) {
7                html += "<td class='officeDivider'></td>";
8                html += "<td class='officeHourIn'></td>";
9                html += "<td class='officeHourIn'></td>";
10                html += "<td class='officeHourIn'></td>";
11                html += "<td class='officeHourIn'></td>";
12            }
13        }
14    }
15    html += "</body>";
16    return html;
17};
18
19var div = document.createElement('div');
20div.innerHTML = build(10);

[Benchmark (ベンチマーク)] をクリックします。

この例のループ内に document.createElement() などの DOM API コールがないため、build() 関数のパフォーマンスは、Locker が有効であるか無効であるかに関係なく似ています。Lightning Locker が無効な場合、コードは 1.11 倍の速さで実行されます。複数の DOM API コールが含まれる前の例では 6.56 倍の速さでした。

一般に、簡単な JavaScript は DOM API よりもはるかに高速であり、DOM へのコードセクションの接続頻度が高いほどコードの実行時間が遅くなります。Locker のほとんどのオーバーヘッドの原因は DOM API にあります。ここでは、DOM への接続回数を減らすことでコードを加速化します。これにより、Locker 全体のオーバーヘッドも大幅に軽減されます。

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)

JavaScript コードへの Lightning Locker の影響のベンチマーク

例

向上したパフォーマンスの例

関連項目: