Web フロントエンド設計パターン -- 表示パフォーマンスを向上させるための Dom 再構築_jquery
ホームページには、遅延読み込み中にすべての非表示のフレーム アイテムを表示する製品参照セクションがあります (図に示すように、私の当初の目的は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 に連続的にローテーションされます。試してみると、パフォーマンスは確かにはるかに高くなります...
コードをコピーします
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 ="
";
$("#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 ...
//Hide tags
function tabs (i)
{
for(var j=1;j<5;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 ="
![](img/" j ".png)
"; str ="
![](img/" ( j) ".png )
"; str ="
![](img/" ( j) ".png)
"; str ="
"; str ="
str ="
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
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7384
15
1628
14
1357
52
1267
25
1216
29
JavaScriptの文字列文字を交換します
Mar 11, 2025 am 12:07 AM
JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi
8見事なjQueryページレイアウトプラグイン
Mar 06, 2025 am 12:48 AM
楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます
独自のAjax Webアプリケーションを構築します
Mar 09, 2025 am 12:11 AM
それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました
モバイル開発用のモバイルチートシート10個
Mar 05, 2025 am 12:43 AM
この投稿は、Android、BlackBerry、およびiPhoneアプリ開発用の有用なチートシート、リファレンスガイド、クイックレシピ、コードスニペットをコンパイルします。 開発者がいないべきではありません！ タッチジェスチャーリファレンスガイド（PDF） Desigの貴重なリソース
ソースビューアーでjQueryの知識を向上させます
Mar 05, 2025 am 12:54 AM
jQueryは素晴らしいJavaScriptフレームワークです。ただし、他のライブラリと同様に、何が起こっているのかを発見するためにフードの下に入る必要がある場合があります。おそらく、バグをトレースしているか、jQueryが特定のUIをどのように達成するかに興味があるからです
10 jQueryの楽しみとゲームプラグイン
Mar 08, 2025 am 12:42 AM
10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム
独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？
Mar 18, 2025 pm 03:12 PM
記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。
jQuery Parallaxチュートリアル - アニメーションヘッダーの背景
Mar 08, 2025 am 12:39 AM
このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください
