Webアプリケーションのパフォーマンスの向上(一)

Webアプリケーションのパフォーマンスを向上させ、
ボトルネックを特定し、クライアントコンテンツの速度を速める.
Webユーザーとして、ページのロードやリフレッシュの速度が成功に重要であることを知っています.
この文書では、Webアプリケーションのパフォーマンスに影響を与える要因をよりよく理解できます.これらの問題を認識し、クライアントコンテンツのボトルネックを見つけることを学びます.JavaScript、DOM、CSS、Dojoウィジェットのパフォーマンスの問題を探ります.
 
  
 
JavaScriptのパフォーマンスと関数
JavaScriptでは、機能が必要な場合に関数を使用します.関数の代わりに文字列を使用する場合もありますが、できるだけ関数を使用することをお勧めします.JavaScriptでは、関数は使用前にプリコンパイルされます.
例えば、インベントリ1のevalの方法を見てみましょう.
リスト1.evalメソッド文字列をパラメータとして使用

function square(input) {   var output;   eval('output=(input * input)');   return output; }

eval法は平方値を計算し、結果を出力するが、性能はよくない.この例では、output=(input*input)をevalメソッドのパラメータとして使用し、JavaScriptプリコンパイルは利用できません.
インベントリ2は、このタスクを完了するためのより良い方法を示しています.
リスト2.関数をパラメータとして使用するEvalメソッド

function square(input) {   var output;   eval(new function() { output=(input * input)});   return output; }

文字列の代わりに関数を使用して、新しいメソッドのコードがJavaScriptコンパイラによって最適化されることを確認します.
関数のスコープ
JavaScript関数の役割ドメインチェーンの各役割ドメインには、いくつかの変数が含まれています.役割ドメインチェーンを理解することが重要であり、それを利用することができます.インベントリ3は、関数役割ドメインのサンプルを示しています.
リスト3.関数のスコープ

function test() {   var localVar = “test”;   test1(this. localVar); var pageName = document.getElementById(“pageName”); }

 
 
文字列関数JavaScriptで最も望ましくない関数は文字列接続です.私は通常+号を使って接続を実現します.インベントリ4は、このような例を示している.
リスト4.文字列接続

var txt = “hello” + “ ” + “world”;

この文は、接続結果を含むいくつかの中間文字列を作成します.これにより、バックグラウンドで文字列を連続的に作成および破棄することで、文字列接続のパフォーマンスが極めて低下します.初期のブラウザでは、このような操作は最適化されていません.StringBufferクラスを作成して、インベントリ5に示すように実装することをお勧めします.
リスト5.StringBufferオブジェクト

function StringBuffer() { this.buffer = []; }  StringBuffer.prototype.append = function append(val) {  this.buffer.push(val);  return this; }  StringBuffer.prototype.toString = function toString () {  return this.buffer.join(“”); }

値ではなく文字列オブジェクトのすべての属性とメソッドを定義します.文字列値のプロパティまたはメソッドを参照すると、ECMAScriptエンジンは、メソッドの実行前に同じ値を持つ新しい文字列オブジェクトを暗黙的に作成します.このオブジェクトは、特定のリクエストにのみ使用され、文字列値を使用するメソッドが後で再作成されます.この場合、それらのメソッドが複数回呼び出される文字列に対して新しい文が使用されます.新しい文字列オブジェクトの例をインベントリ6に示します.
リスト6.新しい文字列オブジェクトを作成する例

var str = new String(“hello”);

StringObject.IndexOf比StringObject.matchは速い.単純文字列マッチングを検索する場合は、正規表現ではなくindexOfをできるだけ使用します.他に選択肢がない場合を除き、長い文字列の一致(10 KB以上)は避けてください.文字列の特定の部分のみで一致すると判断した場合は、文字列全体ではなくサブ列で比較します.         
DOM性能
この章では、DOMのパフォーマンスを向上させるために調整できるいくつかの内容について簡単に説明します.
再描画(Repaint)
以前は見えなかった内容が見えるようになると、DOMは再描画され、逆も同じです.再描画は再描画とも呼ばれます.この動作では、ドキュメントのレイアウトは変更されません.エレメントのサイズ、シェイプ、または位置を変更せずに、外観だけを変更すると再描画がトリガーされます.
たとえば、要素に枠線を追加したり、背景色を変更したりすると、再描画がトリガーされます.再描画のパフォーマンスのコストが大きい.すべての要素を検索して、表示する要素と表示する要素を決定する必要があります.
リフロー(Reflow)
還流は比重描画のより顕著な変化である.リフロー:

DOMツリーを操作します.

レイアウトに影響するスタイルが変わります.

要素のclassName属性が変更されます.

ブラウザウィンドウサイズが変更されました.

エンジンは、関連する要素を還流して、各部分がどこに表示されているかを決定します.子要素も親要素の新しいレイアウトを反映するように還流されます.DOMの要素の後ろの要素も、初期のリフロー時に移動する可能性があるため、新しいレイアウトを計算するためにリフローされます.先祖元素も孫元素の大きさの変化によって還流される.最後に、すべての内容が再描画されます.ドキュメントに要素を追加するたびに、ブラウザはページに戻り、すべてのコンテンツがどのように配置され、どのように表示されるかを計算します.追加されたものが多ければ多いほど、還流回数が多くなります.要素を個別に追加する回数を減らすことができれば、ブラウザのリフロー回数が少なくなり、実行も速くなります.             
CSS性能
Cascading Style Sheets(CSS)を先端に置きます.スタイルシートを一番下に置くと、最後にロードされます.数秒前、ページは空白で、ブラウザはスタイルシートのロードを待っていたが、ページには静的なテキストさえ表示されなかった.
Internet Explorerでは、@importは下部でを使用するのと同じ効果です.使用しないことをお勧めします.
省略形のプロパティ
略語属性を使用して、各属性に1つの宣言ではなく、1つの宣言で1回にいくつかの属性を設定します.略語プロパティを使用すると、ファイルサイズを小さくし、メンテナンス量を削減できます.
たとえば、背景、枠線、枠線の色、枠線スタイル、枠線側(上部枠線、右側枠線、下部枠線、左側枠線)、枠線幅、フォント、ページ余白、輪郭、塗りつぶし属性を設定できます.
CSSセレクタ
CSSセレクタは、右から左に移動することによってマッチングされる.インベントリ7に示されるように、ブラウザは、親要素IDがaElementであるかどうかを決定するために、ページ内のアンカー要素を巡回しなければならない.
リスト7.セレクタが右から左に一致しています

#aElement > a{

    font-size: 18px;

}

コードから>が除去されると、インベントリ8に示すように、パフォーマンスはさらに悪化する.ブラウザは、ドキュメント全体のすべてのアンカーをチェックします.これにより、アンカーの親要素のみをチェックするのではなく、文書ツリーに沿ってID aElementの祖先要素を上に検索します.チェックしている要素がaElementの子孫でない場合、ブラウザはドキュメントのルートまで祖先要素のツリーに沿って検索します.
リスト8.>がない場合、パフォーマンスはさらに悪化します.

#aElement a{     font-size: 18px; }