【フロントエンドの話】フロントエンド最適化の詳細を解説する_html/css_WEB-ITnose

フロントエンド開発が Web サイト開発者の補助的なスキルではなくなり、ますます多くの企業が注目していることを嬉しく思います。私がこの業界に入り始めた頃を思い出してみると、当時は ASP Web サイト (非 ASP.NET) が普及しており、Web サイトの 80% は ASP で作成されていました。Web ページは、フロントエンドを備えた ASP ファイルである可能性があります。コードとバックエンドコードが混在しています。現在はフロントエンドとバックエンドが分離されており、フロントエンドはバックエンドの実装にあまり注意を払わずに表示に集中できます。ただし、フロントエンドの開発は非常に速く、表示環境は複雑で変化しやすいため、フロントエンド開発者はより幅広い知識を習得する必要があります。

このチャットでは、全体を切り口として、比較的広い視点（JS、CSS、ネットワーク送信、HTML5などを含む）からいくつかのフロントエンド最適化手法を紹介する予定です。 (個人的な知識と経験が限られているため、記事で述べた点に加えて、ゼロを整数に変える特性を持つ他の最適化手法があるはずです。皆さんもぜひ追加してください。この記事は更新されます。時々)

ゼロから全体への変換とは何ですか?平たく言えば、壊れたものを一つの全体として統合するということですが、その全体を操作することで、一つ一つ壊れたものを操作する効果も得られるのです。たとえば、リンゴを 4 個くれたら、両手に持って歩き回ることができますが、リンゴを 10 個くれて、それをすべて手に持ったら、リンゴの世話をしなければならないので、歩くのが遅くなるかもしれません。落ちるのが怖いけど、もう一つ袋をくれて、その中にリンゴを10個入れたら、全部丸くなって、どこにでも持ち運べるよ。

OK、ここまでは言っておきましたが、フロントエンドで切り上げる必要がある箇所を数え始めましょう。

1.atlas/sprite Strategies/elf Map/Sprite Map

これらは、画像リソースを作成する際に、いくつかの小さな画像要素を 1 つの画像に集める画像コレクションの名前です。使用される場合、いくつかのパラメーターは、大規模な画像コレクション内の必要な画像要素を表示するために使用されます。たとえば、この大きな画像のアイコンが DIV の背景として必要な場合、大きな画像を DIV の背景として設定するだけでなく、特定の小さな画像を表示するには背景画像の位置を変更する必要もあります。 。

例: Web サイトのスプライト アセットは次のとおりです:

2. イベントの委任

インタビュー中によく質問されるのは、ページ構造が BODY であるということです。外側に 1 万個のサブ DIV があり、各 DIV にはテキストが含まれており、これらのテキストは異なります。要件は、DIV をクリックすると、アラート ボックスがポップアップして DIV 内のテキストを表示することです。あなたは何をしますか。

30% の人は、$("body>div").click(...) のように、シンプルに見えて効率的であると考えて、JQuery を使用してイベントをバインドします。また、20% の人はネイティブを作成します。ステートメントをトラバースして、各 DIV にクリック イベントを追加します。10% の人は、ページがスクロールするときに、画面上のトリガー ポイントの Y 座標を取得し、その高さを保存すると回答しました。ページのスクロールの高さに合わせて高さを加算し、各 DIV の高さで割って、どの要素がクリックされたかを確認し、この要素のコンテンツをポップアップします。 (または他の同様の方法)

上記の回答に回答した面接官は、この質問に対して減点されます。正解は、クリック イベントを外部要素に追加するだけです (この質問は BODY です)。クリック イベントをトリガーするソース要素 (DIV など) については、この要素のテキスト コンテンツをポップアップするだけです。

3. 長時間の接続維持

これはフロントエンドだけでなくバックエンドにも関係します。ほとんどの Web ページは、リソース (画像、スタイル シート ファイル、JS ファイルなど) を取得するために http を使用します。一部のサーバーは、リクエストが来ると接続を確立してからコンテンツを出力します。出力が完了すると接続が切断され、次のリクエストに備えて接続が再確立されます。 Web ページが 100 個のファイルを要求する必要がある場合、サーバーは 100 個の接続を確立および切断します。確立と切断にはそれぞれ時間がかかり (データの転送時間よりも長い場合もあります)、ページのレンダリング時間が確実に増加します。サーバー上でキープアライブを有効にすると、サーバーの負荷が軽減されるだけでなく、ページを開く時間が短縮されます。

以下の図に示すように、実際にコンテンツを受信する時間 (受信) は非常に短く、ほとんどの時間は待機 (待機) とブロック (ブロック) に費やされていることがわかります。

4. マルチ DOM のマージ

フロントエンドのパフォーマンスがますます豊富になるにつれて、それに伴う問題は、DOM が多すぎることです。一部の DOM 操作を実行すると、パフォーマンス上の問題が発生します。 DOM が多数ある場合は、DOM を結合する必要があります。複数の DOM を少数に結合するか、可能であれば CANVAS を使用して表示することを検討してください。

例: 一部の要件では、フロントエンド開発者がこの種の日付ピッカーを作成する必要があります

DOM を使用してオプション (1970 年など) をインストールする場合、ボタンに関係なく、日付オプションだけを見ると、必要な DOM は 44+12+31=87 になる可能性があります。モバイル ブラウザの場合、DOM の数は少なくなります。 、 よりいい 。製品が後で考えて、日付に加えて、時間、分、秒のオプションを追加したらどうなるでしょうか?これには、44+12+31+24+60+60=231 個の DOM が必要です。ただし、各フィールド (年、月、日) が非常に縦長のコンテナー (DIV など) にのみ含まれている場合は、内容を改行で折り返すことができ、値はいくつかのアルゴリズムを通じて取得されます。 DOMの数がかなり減っていませんか？ 87 個の DOM から 3 個の DOM に。一桁少ない。

5.WebSocket

証券 Web サイトなど、多くの Web ページにはリアルタイムのデータ更新の要件があります。ページの更新を避けるために、AJAX を使用して長いポーリングが実行され、サーバーからデータが時々 (1 秒など) 取得されます。これにより、大量のリクエスト接続が発生し、フロントエンドだけでなくバックエンドにも大きな負荷がかかります。幸いなことに、HTML5 によって WebSocket が導入され、Web ページはサーバーとの長時間の接続を維持し、長時間の接続を通じてデータのリアルタイム更新を維持できます。

6. CSS 属性の継承

CSS は親要素の CSS でいくつかの共通属性を定義でき、子要素は継承を通じてこれらの要素を取得します。場合によっては、継承を適切に使用すると、CSS ファイルのサイズを大幅に削減できることがあります。

7.documentFragment

「リスト ページには 1,000 個の DOM を挿入する必要があります。どうやって行うのですか?」 これは私が他の人によく尋ねる質問です。

多くの場合、DOM をページに追加すると、ページが再構築されます。トラバーサルを使用してそれらを 1 つずつ追加すると、毎回ページが再レンダリングされるため、パフォーマンスが低下します。良い方法は、追加する要素を最初にキャッシュし、それらをすべて一度に追加することです。一般的には documentFragment をキャッシュに使用しますが、長い文字列 (HTML コード文字列) をキャッシュに使用するものもあります。

8. 複数のアニメーションを 1 つに結合します

CSS3 アニメーションを実行するときに、要件でマルチステップ アニメーションが必要な場合 (たとえば、DIV を Y 軸に沿って 30 度回転し、次に、DIV を Y 軸に沿って 30 度回転します) X 軸に沿って 30 度回転した後、Z 軸に沿って 30 度回転すると、これらのアニメーションをマージし、アニメーション キーフレームを使用してこれらのステップを分離できます。複数ステップの DOM 操作のコストを節約します。

9. マルチファイルの圧縮とマージ

JS および CSS ファイルの圧縮は、フロントエンドがネットワーク送信量を削減する効果的な方法です (圧縮は通常、余分なスペースと改行を削除し、置換することによって行われます)変数名またはメソッド名。YUI Compressor は優れたツールです)

複数の小さな JS または CSS ファイルを 1 つの大きなファイルにマージするこのアプローチにより、リクエストの数が大幅に削減されます。