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 = "";
for (var i=0; i<1000; i++)
{
str += "";
}
str += "";
divUpdate.innerHTML = str;

もっと早く：

var arr = 新しい配列(1000);
for (var i=0; i<1000; i++)
{
arr[i] = "";
}
divUpdate.innerHTML = "