JavaScriptコードの仕様とパフォーマンスの仕上げ

1. パフォーマンス

J のパフォーマンスに関しては、注意すべきことがたくさんあります。

• グローバル検索を避ける

Js のパフォーマンスを最適化するために最も重要なことは、グローバル検索に注意を払うことです。スコープ検索では、まずローカル スコープを検索し、次に上位レベルのスコープに移動してグローバル スコープが見つからなくなるまで検索するため、パフォーマンスが低下します。グローバル スコープの検索の消費量は、この関数のローカル スコープの消費量より大きくなければなりません。例えば：

リーリー

​

このコードはループ内で document.getElementByid("dom") を呼び出します。ドキュメントはループの外で 1 回だけ実行されるため、ドキュメントをローカル変数に割り当てる必要はありません。代わりに、ループ内の値を に代入します。ローカル変数を使用するため、ループするたびにグローバル ドキュメント オブジェクトを見つけるために再実行する必要はありません。

リーリー

​

原則として、グローバル オブジェクトが複数回呼び出されるとき (特にループ内で)、グローバル オブジェクトは最終的にローカル変数に割り当てられます。 もちろん、何十回も呼び出した後では、パフォーマンスの違いは明らかではありませんが、プログラマにとっては次のとおりです。パフォーマンスを最適化した書き込みを可能な限り実行する必要があります。

• ステートメントを使用しないでください

この表現は現在では基本的に使われないので、これ以上は述べません。

• 不必要な属性検索を回避する

簡単に言うと、変数には値が格納されますが、この変数を呼び出す際のパフォーマンスの消費は最小限ですが、オブジェクトの属性の値を取得する際のパフォーマンスの消費は比較的高くなります。例えば：

リーリー

​

このコードには、プロパティの検索効率が特に悪い箇所が 6 つあります。次のように変更するのが最適です。

リーリー

​

この最適化により効率が大幅に向上します。

• 最適化ループ

1) 反復を減らす: ほとんどのループは 0 から開始し、ループを最大値から減らす方が効率的です。

2) 終了条件の簡素化：ループするたびに終了条件を判定するため、終了条件を簡素化することでループ効率も向上します。

3) ループ本体を簡素化する: ループ本体は最も頻繁に実行されるため、ループ本体の最適化を確実にする必要があります。

• JSコード文字列の解析を避ける

js コード内の js コード文字列を解析する場合、コードを解析するためにパーサーを再起動する必要があり、これにより比較的大きなパフォーマンスの消費が発生するため、js コード ワードを構築する eval や関数などの関数は使用しないようにしてください。

setTimeout が文字列を渡す場合の文字列関数。

• ネイティブ方式の方が速いため、ネイティブ方式を使用するようにしてください。

• switch ステートメントが高速になります。

• ビット演算子の方が高速です。

2. コード仕様

• コードのコメント:

1) 関数とメソッド: 各関数またはメソッドには、関数、関数の入力および出力を説明するコメントが含まれている必要があります。

2) 複雑なアルゴリズム: アルゴリズムの論理的思考を理解できるように、複雑なアルゴリズムにはコメントを追加する必要があります。

3) ハック: 互換性コードにもコメントを追加する必要があります。

4) 大きなコード ブロック: 単一のタスクを完了するために使用される複数行のコードの前に、タスクを説明するコメントを付ける必要があります。

• HTML/JavaScriptの分離

HTML は構造であり、js は動作層です。コードを記述するときは、HTML と js の間の相関関係を減らすように努める必要があります。たとえば、次のようなメソッドがあります。 html ページ script タグで js コードを宣言し、html タグで onclick イベントをバインドし、js で html コードを書き直すと、HTML と js が密接に結合しすぎます。

HTML レンダリングは、できる限り js から分離してください。js を使用してデータを挿入する場合は、通常、ページにタグを直接挿入したり非表示にしたりして、ページ全体がレンダリングされるまで待つことができます。次に、js を使用してタグを表示します。

将html和js解耦可以在调试过程中节省时间，更加容易确定错误的来源，也减轻维护难度。

• 解耦css/JavaScript

JavaScript和css也是非常紧密相关的，js经常对页面的样式做动态修改。为了让他们的耦合更松散，可以通过js修改对应的class样式类。

• 解耦应用逻辑/事件处理程序

在实际开发中我们经常在一个事件函数出来将要处理的所有代码都放在这个事件中，例如：

function handleKeyPress(event){

   event=EventUtil.getTarget(event);   if(event.keyCode===13){var target=EventUtil.getTarget(event);var value=5*parseInt(target.value);if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}

}

 

这里就是把逻辑处理代码和事件处理代码放到一起，这样会让调试不好调试，维护难度变高，而且要是突然修改要新增加一个事件做同样类似的逻辑处理，那就要复制一份逻辑处理代码到另一个事件函数中。较好的方法是将应用逻辑和事件处理程序分离开。例如：

function validateValue(value){

 value=5*parseInt(value); if(value>10){

 document.getElementById(“error-msg”).style.display=”block”;

}

}function handleKeyPress(event){

  event=EventUtil.getEvent(event);  if(event.keyCode===13){   var target=EventUtil.getTarget(event);

   validateValue(target.value);

}

}

 

这样事件处理和逻辑处理就分离开了，这样做有几个好处，可以让你更容易更改触发特定过程的事件，其次可以在不附加到事件的情况下测试代码，使其更易创建单元测试或是自动化应用流程。

事件和应用逻辑之间的松散耦合的几条原则：

1. 勿将event对象传给其他方法；只传来着event对象中所需要的数据；

2. 任何可以在应用层面的动作都应该可以在不执行任何时间处理程序的情况下能正常运行。

3. 任何时间处理程序都应该处理事件，然后将处理转交给应用逻辑。

• 避免全局变量

这样会让脚本执行一致和可维护，最多创建一个全局变量。类似jQuery一样，所以方法属性都在$对象当中，避免对全局变量造成过多的污染。

• 尽量使用常量

数据和使用它的逻辑进行分离要注意一下几点：

1.  重复值

2. 用户界面字符串

3.  url

4. 任意可能会更改的值

• 其他优化

1. 多变量声明时用一条语句逗号隔开声明

2. 对dom的操作的优化

3. 对dom进行html代码插入尽量在最后一次添加到dom对象中。

4. innerHTML的效率要比appendChild的效率高，以为innerHTML会创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构，而非基于JavaScript的DOM调用，由于内部方法是编译好的而非解释执行，所以执行快的多。

5. 使用事件委托减少绑定的事件数量。

6. 尽量少用到返回HTMLCollection语句。