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

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

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

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

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

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

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

2. イベントの委任

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

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

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

3. 長(zhǎng)時(shí)間の接続維持

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

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

4. マルチ DOM のマージ

フロントエンドのパフォーマンスがますます豊富になるにつれて、それに伴う問(wèn)題は、DOM が多すぎることです。一部の DOM 操作を?qū)g行すると、パフォーマンス上の問(wèn)題が発生します。 DOM が多數(shù)ある場(chǎng)合は、DOM を結(jié)合する必要があります。複數(shù)の DOM を少數(shù)に結(jié)合するか、可能であれば CANVAS を使用して表示することを検討してください。

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

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

5.WebSocket

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

6. CSS 屬性の継承

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

7.documentFragment

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

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

8. 複數(shù)のアニメーションを 1 つに結(jié)合します

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

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

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

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