Web フロントエンド設計パターン -- 表示パフォーマンスを向上させるための Dom 再構築_jquery

1. デザイン シーン


ホームページには、遅延読み込み中にすべての非表示のフレーム アイテムを表示する製品参照セクションがあります (図に示すように、私の当初の目的は2 行の画像を表示しましたが、読み込みが停止し、以下のいくつかの非表示の要素が表示されました)。全体的な画像は粗くて乱雑で、Web ページ全体が完全に読み込まれてスムーズに実行されるまでに 5 秒以上の時間がかかりました。極めて性的なオンライン印刷 Web サイトは非常に致命的であり、ユーザーに非常に悪い Web エクスペリエンスを与え、Web サイトの不安定性が原因であると考えられています...

現時点では、当社はこの会社を責めることはできません。サーバーの調子が悪い、ネットワークの速度、カードなどのせいで、おそらく上司に殴られたり、ボーナスを差し引かれたりすることになるでしょう...
だから、ウェブサイトのパフォーマンスを改善するしかありません...

2. デザイン目標
ページ読み込み時の不要な要素を減らし、軽量な Web ページを構築します...

3. 解決策
この場合、最初のデザイン案は間違いなく隠しフレーム方式です。これは、4 つのラベル タブ (アルバム、ハンドバッグ、壁掛けカレンダー、パッケージ) に対応するための最も使いやすい方法です。ページに Div がロードされ、ロード時に最初のタブ (ピクチャ アルバム) の Div が表示され、マウス ホイールをタブ上でスライドすると、対応するタブ ラベルの Div が表示され、他のタブ ラベルの Div が表示されます。 hidden...
だからこそ、前夜に読んだ Web デザイン パターンに関する本のことを思い出しました。ページ要素の更新を使用して Dom ツリーを再構築するほうが、フレームを隠すよりも優れていることがよくあります。パフォーマンスははるかに高くなります... そこで、現時点での私のアイデアは、Dom ツリーを再構築することです...

Web ページのソース コードは非常に単純です。 重要なのは id= を持つ Div です。 「tabcontent」。重要なのは、その中の要素の変換が上記の 4 つの

タグに依存することです。これにより、ページが更新される必要がなくなります。わざわざ非表示にしたり表示したりして、最初にすべての要素をロードして続行します。実装コードは次のとおりです。 。 。
このように、tabcontent1、tabcontent2、tabcontent3、tabcontent4 という 4 つの ID があり、これらは id="tabcontent" の Div に連続的にローテーションされます。試してみると、パフォーマンスは確かにはるかに高くなります...

コードをコピーします コードは次のとおりです。

• 梱包箱
ピクチャーアルバム

• ハンドバッグ


• Tri-ページを折りたたむ

コードをコピーします

コードは次のとおりです: /隠すタグ 関数タブ(i)

{

var num,ids,ordnum;
switch(i)
{
case 1:{ append(1,1) ,"f") ; ブレーク;}
ケース 2:{ append(2,5,"s"); ブレーク;}
ケース 3:{ append(3,9,"t"); }
case 4:{ append(4,13,"fo"); Break;}
}
}

//データを更新します
function append(i,j, type)
{
var str="

";
str ="

";
str ="

";
str ="

";
str =" ";
str ="/ a>";
str ="" ;
str =""; >str ="

";
str ="

str ="

";
$("#tabcontent").html(str);
}


This should be the end, but I suddenly remembered a question. This approach is actually the same as the hover idea in jQuery, and here is the polling of the Dom element update, which means that every time the mouse moves the label There must be some data to be sent and received. It has no impact on the small piece of data above. However, it is not feasible to use this method in a large Case because its Dom element update may be a data stream of more than ten kb or even dozens of kb. , which undoubtedly brings great challenges to the performance of the Web page...

Therefore, I made another small change, that is, using Dom to reconstruct the hidden frame usage, in the page for the first time When loading, the Div corresponding to the first tag is loaded first, that is, the Div corresponding to the album. When the mouse moves to other tab tags, the element corresponding to the tag is appended (if the element exists, remove the hidden element) And display, if not present, append), and hide the Div tags corresponding to other Tab tags... This method has a name, called "Multi-stage download...", so that there is no need to update the elements every time, the code is as follows ...

Copy code The code is as follows:

//Hide tags
function tabs (i)
{
for(var j=1;j{
$("#tabcontent" j).hide();
}
$("#tabcontent" i).show();
var num,ids,ordnum;
var len= $("#tabcontent" i).length;//This sentence is very important, it is Eliminate the judgment of repeatedly loading elements (if the element exists, there is no need to append it again)
if(len==0)
{
switch(i)
{
case 1 :{ append(1,1,"f"); break;}
case 2:{ append(2,5,"s"); break;}
case 3:{ append(3,9, "t"); break;}
case 4:{ append(4,13,"fo"); break;}
}
}
}

//load Enter data
function append(i,j,type)
{
var str="

";
str ="

";
str ="

";
str ="

";
str ="";
str ="";
str ="";
str ="";
str ="

";
str ="

div>";
str ="

";
$("#tabcontent").append(str);
}

4. Design summary
The performance of the website has been improved. There will be no delay caused by overloading of page elements during the first load, nor due to the Dom tree. The page display performance is low due to constant updates...

As shown in the figure:


Source code download/201010/yuanma/DomForm.rar