DHTML を高速化するための一連のテクニック

著者：Eve Cole 更新時間：2009-06-20 16:59:57

Microsoft のダイナミック HTML (DHTML)? Internet Explorer 4.0の場合
Web 作成者や開発者が新しいプログラミングモデルを利用できるようにするために導入されました。それ以来、Web 制作者は
この強力な機能を最大限に活用して、動的なコンテンツ、スタイル、配置を提供し、Web ユーザーが
豊富なインタラクティブ機能を体験してください。 DHTML の柔軟性は、通常、複数の実装方法があることを意味します。
あなたのアイデア。 Internet Explorer の HTML 解析および表示コンポーネントの処理方法を理解する
仕事を完了するための最適な方法を決定するのに役立ちます。この記事では、DHTML の機能の一部について説明します。
パフォーマンスに大きな影響を及ぼし、ページのパフォーマンスを向上させるためのヒントをいくつか提供します。

DHTML のバッチ変更

DHTML Web ページでパフォーマンスを向上させる最も効果的な方法は、
内容の変更。 Web ページを更新するにはいくつかの方法があり、理解しておくことが重要です。コンケ
ユーザーのフィードバックから判断すると、Web 作成者は HTML テキストブロックを使用することも、DHTML を使用することもできます。
個々の HTML にアクセスするためのオブジェクトモデル (英語) または W3C ドキュメントオブジェクトモデル (DOM) (英語)
要素。 HTML コンテンツを変更すると、Internet Explorer の HTML が解析されて表示されます。
すべての表示コンポーネントはページの内部表現を再編成し、ドキュメントのレイアウトとドキュメントを再計算する必要があります。
これらの変更をストリーミングして表示します。実際のパフォーマンスは Web ページのコンテンツと加えた変更によって決まりますが、
、しかし、これらの操作は比較的高価です。個別の代わりに HTML テキストブロックを使用する場合
要素にアクセスするには、HTML パーサーを呼び出す必要があり、追加のパフォーマンスオーバーヘッドが発生します。 HTMLを受け入れる
テキストのメソッドとプロパティには、insertAdjacentHTML (英語) および PastHTML (英語) が含まれます。
text) メソッド、および innerHTML (英語) 属性と externalHTML (英語) 属性も同様です。

ヒント 1: スクリプト関数で HTML コンテンツを変更します。デザインに使用している場合
複数のイベントハンドラーがある場合 (マウスの動きに応答するなど)、更新を一元化する必要があります。
変化。

HTML の解析とコンポーネントの表示に関するもう 1 つの重要な事実は、スクリプトが制御を返す (例:
スクリプトイベントハンドラーが終了したとき、または setTimeout (英語) などのメソッドが呼び出されたとき)、
このコンポーネントはレイアウトを再計算し、Web ページを表示します。これで、Internet Explorer について理解できました。
以下の変更に対処する方法により、Web ページのパフォーマンスが向上します。

ヒント 2: HTML 文字列を作成し、ドキュメントに複数の変更を加えるのではなく、1 つの変更を加えます。
回が更新されました。 HTML コンテンツが必要ない場合は、使用を検討してください。
innerText (英語) プロパティ。

次の例では、innerHTML プロパティが設定されるたびに、遅いメソッドが HTML を呼び出します。
アナライザ。パフォーマンスを向上させるには、まず文字列を作成してから、それを innerHTML に割り当てます。
財産。

遅い：

divUpdate.innerHTML = "";
for (var i=0; i<100; i++)
{
divUpdate.innerHTML += "これは遅い方法です!";
}

素早い：

var str="";
for (var i=0; i<100; i++)
{
str += "文字列を使用するため、この方法の方が高速です!";
}
divUpdate.innerHTML = str;

innerText を使用する

DHTML オブジェクトモデルは、innerText (英語) 属性を通じて HTML 要素のテキストにアクセスします。
W3C DOM は独立した子テキストノードを提供します。 innerText 属性を介して直接
DOM createTextNode (英語) メソッドを呼び出すよりも速く、要素のコンテンツを永続的に更新します。

ヒント 3: innerText プロパティを使用してテキストコンテンツを更新します。

次の例は、innerText プロパティを使用してパフォーマンスを向上させる方法を示しています。

遅い：

var ノード;
for (var i=0; i<100; i++)
{
ノード = document.createElement( "SPAN" );
node.appendChild( document.createTextNode( "createText を使用する
Node() ") );
divUpdate.appendChild(ノード);
}

素早い：

var ノード;
for (var i=0; i<100; i++)
{
ノード = document.createElement( "SPAN" );
node.innerText = "innerText プロパティを使用する";
divUpdate.appendChild(ノード);
}

DOM を使用して単一の要素を追加する

前述したように、HTML テキストのアクセスメソッドを適用すると、HTML パーサーが呼び出されます。
パフォーマンスが低下します。したがって、createElement（英語）とinsertAdjacentを使用します
Element (英語) メソッドは、insertAdjacentHTML メソッドを 1 回呼び出すよりも速く要素を追加します。

ヒント 4: createElement メソッドと insertAdjacentElement メソッドを呼び出すよりも速く呼び出します。
insertAdjacentHTML メソッドは高速です。

DHTML 更新をバッチ処理し、insertAdjacentHTML メソッドを 1 回呼び出すと改善される可能性があります
パフォーマンスが向上しますが、DOM から要素を直接作成する方が効率的な場合もあります。以下のシナリオでは、次のことができます
両方の方法を試して、どちらが速いかを判断してください。

遅い：

for (var i=0; i<100; i++)
{
divUpdate.insertAdjacentHTML( "beforeEnd", " 挿入を使用する
AdjacentHTML() " );
}

素早い：

var ノード;
for (var i=0; i<100; i++)
{
ノード = document.createElement( "SPAN" );
node.innerText = "insertAdjacentElement() を使用する ";
divUpdate.insertAdjacentElement( "beforeEnd", ノード );
}

SELECT 要素内のオプションの拡張

HTML テキストメソッドを使用した前のルールの場合、多数の OPTION (英語)
例外は、要素が SELECT (英語) に追加される場合です。このとき、innerHTMLを使用します。
プロパティは、createElement メソッドを呼び出してオプションのコレクションにアクセスするよりも効率的です。

ヒント 5: innerHTML を使用して、SELECT 要素に多数のオプションを追加します。

文字列連結操作を使用して SELECT 要素の HTML テキストを構築し、これを使用します。
innerHTML 属性を設定するためのヒント。特に多数のオプションの場合、文字列連結操作も
パフォーマンスに影響を与えます。この場合、配列を作成し、Microsoft JScript join を呼び出します。
(英語) OPTION要素のHTMLテキストの最終連結を行うメソッド。

遅い：

変数オプション;
divUpdate.innerHTML = "<SELECT ID='selUpdate'>";
for (var i=0; i<1000; i++)
{
opt = document.createElement( "オプション" );
selUpdate.options.add(opt);
opt.innerText = "アイテム" + i + "アイテム";
}

素早い：

var str="<SELECT ID='selUpdate'>";
for (var i=0; i<1000; i++)
{
str += "<OPTION> 番目" + i + " item</OPTION>";
}
str += "";
divUpdate.innerHTML = str;

もっと早く：

var arr = 新しい配列(1000);
for (var i=0; i<1000; i++)
{
arr[i] = "<OPTION> 番目" + i + " item</OPTION>";
}
divUpdate.innerHTML = "<SELECT ID='selUpdate'>" + arr.join() + "
";

DOMでテーブルを更新する

DOM メソッドを使用してテーブルの行とセルを挿入することは、insertRow (英語) と insert を使用するよりも優れています。
Cell (英語) メソッド (DHTML テーブルオブジェクトモデルの一部) の方が効率的です。特に
大きなテーブルを作成する場合、効率の違いはさらに明白になります。

ヒント 6: DOM メソッドを使用して大きなテーブルを作成します。

遅い：

var 行;
var セル;
for (var i=0; i<100; i++)
{
行 = tblUpdate.insertRow();
for (var j=0; j<10; j++)
{
セル = row.insertCell();
cell.innerText = "行 " + i + " 、セル " + j + " ";
}
}

素早い：

var 行;
var セル;
var tbody = tblUpdate.childNodes[0];
tblUpdate.appendChild(tbody);
for (var i=0; i<100; i++)
{
row = document.createElement( "TR" );
tbody.appendChild(行);
for (var j=0; j<10; j++)
{
cell = document.createElement( "TD" );
row.appendChild(セル);
cell.innerText = "行 " + i + " 、セル " + j + " ";
}
}

一度書いたら何度でも使える

Web サイトでスクリプトを使用して一般的な操作を実行する場合は、次の機能の追加を検討してください。
複数の Web ページで再利用できるように、別のファイルに配置できます。そうすることで、それだけでなく、
コードの保守性が向上し、スクリプトファイルをブラウザのキャッシュに保持できるため、
ユーザーがサイトにアクセスしたときにローカルにダウンロードする必要があるのは 1 回だけです。よく使用されるスタイルルールを別個に置く
ファイルでも同じ利点が得られます。

ヒント 7: 頻繁に使用するコードをアクションまたはスタンドアロンファイルに組み込んでスクリプトを再利用する

スクリプトの再利用をより有効に活用するには、頻繁に使用されるスクリプト操作を DHTML アドインに配置します。
コードまたは要素の動作 (英語)。ビヘイビアーは、スクリプトを再利用する効率的な方法を提供し、
HTML からアクセスされるコンポーネントを作成すると、独自のオブジェクト、メソッド、プロパティ、イベントを使用して、
拡張 DHTML オブジェクトモデル。 viewlink (英語) 機能を使用しない動作の場合、次のことができます。
Internet Explorer 5.5 の軽量動作機能の使用を検討してください。
より効率的なコードのカプセル化。また、スクリプトコードが SCRIPT (英語) の場合
ブロックで使用すると、より高いパフォーマンスが得られます。

動的属性をあまり使用しないでください

動的プロパティ (英語) は、Web 作成者に式をプロパティ値として使用する方法を提供します。
式は実行時に評価され、その結果の値が属性に適用されます。これは強力な機能です。これ
この機能を使用すると、ページ上のスクリプトの量を減らすことができますが、式は定期的に再評価する必要があるため、
この式は他のプロパティ値に関連していることが多いため、パフォーマンスに悪影響を与える可能性があります。この種の
これは、プロパティの配置に特に当てはまります。

ヒント 8: 動的プロパティの使用を制限します。

データバインディングはうまく機能します

データバインディング (英語) は、データベースクエリの結果を結合できる強力な機能です。
Web ページ上の HTML 要素にバインドされたフルーツまたは XML データアイランド (英語) コンテンツ。あなたは持っていません
データを抽出するためにサーバーに戻る必要があり、データの並べ替えとフィルタリング機能、およびさまざまなデータを提供できます。
データビュー。会社のデータを折れ線グラフ、棒グラフ、円グラフで表示する Web ページを想像してください。
グラフ、事業所別、製品別、販売段階別にデータを並べ替えるボタンもあり、
この関数を実装するには、サーバーに 1 回アクセスするだけで済みます。

ヒント 9: データバインディングを使用して、データのリッチクライアントビューを提供します。

ドキュメントオブジェクトにexpando属性を設定しないでください。

Expando (英語) 属性は任意のオブジェクトに追加できます。このプロパティは非常に便利です。
現在の水曜日のページ内に情報を保存し、DHTML オブジェクトモデルを拡張する別の方法を提供します。
法。たとえば、clicked 属性を DHTML 要素に割り当て、この属性を使用してユーザーにプロンプトを表示することができます。
ユーザーがクリックした要素。イベントを発生させるとき、expando 属性を使用して次のことを行うこともできます。
イベントハンドラーは、より多くのコンテキスト情報を提供します。 Expando 属性をどのように使用するかに関係なく、
これらをドキュメント (英語) オブジェクトに設定しないように注意してください。こうすれば、訪れたときに
このプロパティを要求する場合、ドキュメントは追加の再計算操作を実行する必要があります。

ヒント 10: window (英語) オブジェクトに Expando 属性を設定します。

遅い：

for (var i=0; i<1000; i++)
{
var tmp;
window.document.myProperty = "アイテム" + i + "アイテム";
tmp = window.document.myProperty;
}

素早い：

for (var i=0; i<1000; i++)
{
var tmp;
window.myProperty = "アイテム" + i + "アイテム";
tmp = window.myProperty;
}

クラスとスタイルルールの切り替えを避ける

クラスとスタイルのルールの切り替えは、全体の再計算と調整が必要な非常にコストのかかる操作です。
ドキュメントのレイアウト。 Web サイトでスタイルシートを使用してコンテンツの代替ビューを提供する場合、次のことができます。
要素のスタイルを変更するのではなく、変更する要素のスタイル (英語) オブジェクトを直接変更することを検討します。
クラスに関連付けられた className (英語) 属性または styleSheet (英語) オブジェクト。

ヒント 11: コンテンツの外観を変更する場合は、スタイルオブジェクトを直接変更します。

親を見つける前にテキスト範囲を折りたたむ

TextRange (英語) オブジェクトは、ユーザーが選択した、または HTML 要素から取得した要素を表します。
BODY（英語）などのテキスト領域。 parentElement (英語) メソッドを呼び出すことで、
テキスト範囲の親を識別できます。複雑なテキスト範囲の場合は、parentElement を呼び出します。
メソッドの前に、最初に Collapse (英語) メソッドを呼び出す方が効率的です。

ヒント 12:parentElement メソッドにアクセスする前に、テキスト範囲を折りたたんでください。

http://www.microsoft.com/china/msdn/?MSCOMTB=ICP_MSDNからの抜粋