実戦DHTML性能の最適化、カスタムドロップダウンコントロールの改善
実戦DHTML性能の最適化、カスタムドロップダウンコントロールの改善
まず、このプレゼンテーションで使用するコードを紹介します.私のプロジェクトでは、システムのデフォルトのselectの代わりに、カスタムのドロップダウン矢印とカスタム色の枠線を使用して、カスタムスタイルのドロップダウンボックスを実装します.この機能を実現するにはtableシミュレーションで実現する必要がある.では,js法を用いてこのシミュレーション過程を実現し,initSelect(id,width,height)法にカプセル化した.
setSelect(id,index)を提供してあるオプションの選択を行い、その他のいくつかの方法を提供し、すべての機能は少なくともIEとFireFoxに互換性がある.
当初は勝手に書いていたので、コードがすべて完成した後、性能がかなり低下していることがわかりました.生年月日のような3つのドロップダウンボックスは数百ミリかかります.
最適化プロセスを3回に分けて行います
最初のステップ
最適化のテクニックの一つは循環体を優先的に最適化することであり、私は循環体内の不良なやり方を最適化し、例えば
このステップはコードinitSelect 2を生成し、祥見パッケージ内のs.js、以下同
ステップ2
上の小さな変更を通じて、いくつかの時間を節約することができますが、大きな変更はありません.私たちが達成しなければならない目標を最適化することから遠いです.では、今静かに考えてみましょう.論理を修正すべきです.
initSelectではcreateElementでTRを作成しtableのrowsコレクションに追加する方式を採用しているためhtmlの作成と解析に時間がかかるため効率が悪く,配列方式に改良する
これによりDOMはHTMLを1回解析するだけで効果が得られ,300 msから数十ミリ秒に速度が3倍に向上した.
このステップは、コードinitSelect 3を生成します.
ステップ3
では、さらに最適化できますか.答えは肯定的です.私たちの最初の2つのステップの重点は循環体であり、今は大局に着目しなければならない.方法全体でinnerHTMLが何度も使用されているため、これは非常に遅い操作であり、マイクロソフトはinnerTextを使用してinnerHTMLの代わりにできるだけ使用することをお勧めしているが、明らかにここには向いていない.またinnerTextはW 3 C規格に属さないためfireFoxではサポートされていないことを指摘しなければならない.
私の前の勝手なDHTMLテクニックでは、insertAdjacentElementがinsertAdjacentHTMLよりも効果的であることが指摘されていますが、今回はinsertAdjacentElementを捨ててinsertAdjacentHTMLを使用することにしました.これにより、HTML解析を一度に下げることができるので、複数のノードを1つのinsertAdjacentHTMLで完成させることにしました.InsertAdjacentElementではなく、複数のinnerHTMLに合わせて値を割り当てます.これらの調整を行った後、私たちのコードは再びスピードアップされ、効果は明らかではありませんが、10%を超える改善があります.
このステップは、コードinitSelect 4を生成します.
参照時間:
initSelect 313
initSelect2 297
initSelect3 140
initSelect4 94
後記
実はこの方法はプロジェクト開発の初期にありましたが、当時使っていたのは
このカスタムドロップダウンボックスを使用する必要がある場合はselect.jsとs.cssだけで、最適化されたプレゼンテーションはdemo 1のファイル(コードが不完全で、プレゼンテーションのみ)を参照してください.
全文が終わる
まず、このプレゼンテーションで使用するコードを紹介します.私のプロジェクトでは、システムのデフォルトのselectの代わりに、カスタムのドロップダウン矢印とカスタム色の枠線を使用して、カスタムスタイルのドロップダウンボックスを実装します.この機能を実現するにはtableシミュレーションで実現する必要がある.では,js法を用いてこのシミュレーション過程を実現し,initSelect(id,width,height)法にカプセル化した.
setSelect(id,index)を提供してあるオプションの選択を行い、その他のいくつかの方法を提供し、すべての機能は少なくともIEとFireFoxに互換性がある.
当初は勝手に書いていたので、コードがすべて完成した後、性能がかなり低下していることがわかりました.生年月日のような3つのドロップダウンボックスは数百ミリかかります.
最適化プロセスを3回に分けて行います
最初のステップ
最適化のテクニックの一つは循環体を優先的に最適化することであり、私は循環体内の不良なやり方を最適化し、例えば
for(var i=0;i<sel.options.length;i++)
－－》
for(var i=0,j=a.length;i<j;i++)
sel.options[i].value;
－－》
a[i].value;このステップはコードinitSelect 2を生成し、祥見パッケージ内のs.js、以下同
ステップ2
上の小さな変更を通じて、いくつかの時間を節約することができますが、大きな変更はありません.私たちが達成しなければならない目標を最適化することから遠いです.では、今静かに考えてみましょう.論理を修正すべきです.
initSelectではcreateElementでTRを作成しtableのrowsコレクションに追加する方式を採用しているためhtmlの作成と解析に時間がかかるため効率が悪く,配列方式に改良する
var arr = new Array(a.length);
for (var i=0,j=a.length;i<j; i++)
{
arr[i] = "<tr><td title='" + a[i].text + "' value='" + a[i].value + "'>" + a[i].text + "</td></tr>";
}
oCell.innerHTML = "<div id=\"O" + id + "\" class=\"select\" onselectstart=\"return false\" onmouseover=\"HoverOptions(event);\" onmouseout=\"OutOptions(event);\" onclick=\"ClickOptions(event, 'O" + id + "');\">\
<table cellsapcing=\"0\" cellspadding=\"3\" border=\"0\" width=100%>\
<tbody>" + arr.join() + "</tbody>\
</table>\
</div>";これによりDOMはHTMLを1回解析するだけで効果が得られ,300 msから数十ミリ秒に速度が3倍に向上した.
このステップは、コードinitSelect 3を生成します.
ステップ3
では、さらに最適化できますか.答えは肯定的です.私たちの最初の2つのステップの重点は循環体であり、今は大局に着目しなければならない.方法全体でinnerHTMLが何度も使用されているため、これは非常に遅い操作であり、マイクロソフトはinnerTextを使用してinnerHTMLの代わりにできるだけ使用することをお勧めしているが、明らかにここには向いていない.またinnerTextはW 3 C規格に属さないためfireFoxではサポートされていないことを指摘しなければならない.
私の前の勝手なDHTMLテクニックでは、insertAdjacentElementがinsertAdjacentHTMLよりも効果的であることが指摘されていますが、今回はinsertAdjacentElementを捨ててinsertAdjacentHTMLを使用することにしました.これにより、HTML解析を一度に下げることができるので、複数のノードを1つのinsertAdjacentHTMLで完成させることにしました.InsertAdjacentElementではなく、複数のinnerHTMLに合わせて値を割り当てます.これらの調整を行った後、私たちのコードは再びスピードアップされ、効果は明らかではありませんが、10%を超える改善があります.
このステップは、コードinitSelect 4を生成します.
参照時間:
initSelect 313
initSelect2 297
initSelect3 140
initSelect4 94
後記
実はこの方法はプロジェクト開発の初期にありましたが、当時使っていたのは
for(var i=0;i<sel.options.length;i++)
{
td.innerHTML += "<tr><td>" + sel.options[i].text + "</td></tr>";
}このカスタムドロップダウンボックスを使用する必要がある場合はselect.jsとs.cssだけで、最適化されたプレゼンテーションはdemo 1のファイル(コードが不完全で、プレゼンテーションのみ)を参照してください.
全文が終わる