javascript ローカル変数を使用してグローバル変数を置き換える ページ 1/2_javascript スキル

なぜこんなことをするのですか？これには何か根拠があるのでしょうか？これを行わないと、パフォーマンスにどの程度の損失が発生しますか?この記事では、これらの質問に対する答えを探り、変数の読み取りおよび書き込みのパフォーマンスにどのような要素が関係しているかを根本的に理解します。
著作権記述
この記事は、Nicholas C. Zakas が 2009 年 2 月 10 日に個人 Web サイトで公開した「JavaScript Variable Performance」を翻訳したものです。 》。原文が唯一の正式版であり、この記事は原著者 (Nicholas C. Zakas) の承認を受けた簡体字中国語翻訳です。翻訳者 (Mingda) は翻訳の正確性を確保するために多大な努力を払っており、翻訳の内容が原文に完全に忠実であることを約束します。ただし、省略や不正確な点が含まれる可能性がありますので、修正していただければ幸いです。 。翻訳ノートの内容は非公式であり、翻訳者の個人的な見解のみを表しています。

以下は原文の翻訳です :
JavaScript のパフォーマンスを向上させる方法に関して、最もよく聞かれる提案は次のとおりです。グローバル変数 (グローバル変数) ではなく、可能な限りローカル変数 (ローカル変数) を使用してください。これは、Web 開発で 9 年間働いてきた私にとって、一度も疑問に思ったことのないアドバイスであり、JavaScript のスコープと識別子解決 (識別子解決) メソッドの処理に基づいています。

まず、関数を作成するプロセスは、実際にはオブジェクトを作成するプロセスであることを明確にする必要があります。各関数オブジェクトには [[Scope]] と呼ばれる内部プロパティがあり、関数の作成時のスコープ情報が含まれています。実際、[[Scope]] 属性はオブジェクトのリスト (変数オブジェクト) に対応しており、リスト内のオブジェクトには関数内からアクセスできます。たとえば、グローバル関数 A を作成した場合、A の [[Scope]] 内部プロパティには 1 つのグローバル オブジェクト (Global Object) のみが含まれます。また、A に新しい関数 B を作成した場合、B の [[Scope] ] 属性には次のものが含まれます。 2 つのオブジェクトがあり、関数 A の Activation Object オブジェクトが前にあり、グローバル オブジェクト (Global Object) が後ろにあります。

関数が実行されると、実行可能オブジェクト (Execution Object) が自動的に作成され、スコープ チェーン (Scope Chain) にバインドされます。スコープ チェーンは、識別子解決のための次の 2 つの手順を通じて確立されます。

1. まず、関数オブジェクト [[Scope]] の内部プロパティ内のオブジェクトをスコープ チェーンに順番にコピーします。

2. 次に、関数が実行されると、新しい Activation Object オブジェクトが作成されます。このオブジェクトには、 this の定義、パラメーター (引数)、およびローカル変数 (名前付きパラメーターを含む) が含まれます。この Activation Object オブジェクトはスコープ チェーンの先頭に配置されます。

JavaScript コードの実行中に識別子が見つかると、識別子の名前に基づいて実行コンテキスト (実行コンテキスト) のスコープ チェーン内で識別子が検索されます。スコープ チェーン内の最初のオブジェクト (関数のアクティブ化オブジェクト) から開始して、見つからない場合はスコープ チェーン内の次のオブジェクトを検索し、識別子の定義が見つかるまで同様に検索します。スコープ内の最後のオブジェクト、つまりグローバル オブジェクトが見つからない場合は、エラーがスローされ、変数が未定義であることをユーザーに通知します。これは、ECMA-262 標準で説明されている関数実行モデルと識別子解決 (Identifier Resolution) プロセスであり、ほとんどの JavaScript エンジンが実際にこの方法で実装されていることがわかります。 ECMA-262 はこの構造体の使用を義務付けているわけではなく、関数のこの部分についてのみ説明していることに注意してください。

識別子の解決プロセス (識別子解決) を理解すると、主に検索プロセスが大幅に短縮されるため、ローカル変数が他のスコープの変数よりも速く解決される理由が理解できます。しかし、どれくらい速くなるのでしょうか？この質問に答えるために、さまざまなスコープの深さで変数のパフォーマンスをテストする一連のテストをシミュレートしました。

The first test is to write the simplest value to a variable (the literal value 1 is used here). The result is shown in the figure below, which is very interesting:

There is no difference from the result It is difficult to see that when the process of identifier resolution requires deep search, there will be a performance loss, and the degree of performance loss will increase as the depth of the identifier increases. Unsurprisingly, Internet Explorer performed the worst (but to be fair, there were some improvements in IE 8). It is worth noting that there are some exceptions here, Google Chrome and the latest midnight version of WebKit have a very stable access time to variables and do not increase with increasing scope depth. Of course, this should be attributed to the next generation JavaScript engines they use, V8 and SquirrelFish. These engines perform optimizations when executing code, and it's clear that these optimizations make accessing variables faster than ever before. Opera also performed well, being much faster than IE, Firefox and the current version of Safari, but slower than browsers based on V8 and Squirrelfish. The performance of Firefox 3.1 Beta 2 is a bit unexpected. The execution efficiency of local variables is very high, but as the number of scope layers increases, the efficiency is greatly reduced. It should be noted that I am using the default settings here, which means that the Trace function is not turned on in Firefox.