序文
フロントは、さまざまなリソースを含め、巨大であり、HTML、CSS、Javascriptを、画像、フラッシュ、など。フロントエンドの最適化は、別の方法を持っているのあらゆる側面のためのリソースに複雑です。だから、フロントエンドの最適化の目的は何ですか？
クライアントの観点から、[最適化は、より高速なページロードを行うユーザーに、よりタイムリーな応答を操作することができ、それは、よりユーザーフレンドリーな体験を提供します。
サーバーの観点から2、最適化は、ページリクエストの数を減らすことができたり、要求により占有帯域幅を削減するために、かなりのリソースを節約できます。
要するに、ユーザーエクスペリエンスを向上する権利だけではなく、サイトを最適化し、かなりの資源を節約することができるようにします。
私は三つの主要な点に編成前面を最適化するための多くの方法は、最初は、あるHTTP要求レベル秒であり、プログラムコードレベル、および第三のは、最も近いソースレベルに応じて要求元。
A、HTTP要求レベル
この戦略は、基本的にすべてのフロントエンドの人が知っている、だけでなく、最も重要かつ最も効果的。彼らはより多くの終わりに何が起こるか？まず第一に、各要求のコスト、コストもリソースのコストを含む時間の両方が含まれるがあることを要求、彼らはHTTPリクエストを削減したいと言います。完全な要求がDNSルックアップを通過する必要があり、接続がサーバーを待っていると、サーバは「長い」データ等Aと複雑なプロセス、およびHTMLを解決するために、最終的には、ブラウザのニーズを受けて、データを送信し、（確立されたTCPチャネル、3ウェイハンドシェイク）確立されています、DOMツリーを生成するのに対応したレンダリングレンダリングのCSSは、還流し、再描画JS一連のユーザーに対応するページを形成します。
主な方法は、HTTPリクエストの数を低減するため、次のとおりです。
HTTPリクエストの数を減らし1.（量子化）
（1）画像要求の最適化：それは要求の数になると、要求は、ページの絵は確かに逃げることができない、と絵が要求、絵の量、我々はCSSスプライト画像を使用することができるため、要求を送信されることをAに統合されますダ・マップは、その後、要求に使用する画像に対応する背景位置を介して取得、これはリクエストに複数の画像のリクエストは間違いなくそれを考えることができるので、もちろん、これはまた、帯域幅が要求によって占め増加します米国とその少し不足している;第二は、BASE64の絵で、base64でエンコードされた画像は、画像の大きなサイズは、変換するので、要求の数を消費しますが、できるだけ以上10K base64で画像を使用しないように注意していないですより大幅にコードの品質に影響を与えるのbase64コード、最後のものがあり、フォント、アイコン、アイコン、フォントフォーマットIconfontで、このアイコンはリクエストによって消費されていませんが、通常は我々のプロジェクトのこの段階で満たすことができます最も小さなアイコン→ Alibabaのアイコンライブラリ
（2）資源は、圧縮と合併：もしあなたができる、外部スクリプト、スタイルの合併の可能な限り多くのものに。また、CSSは、Javascriptを、画像圧縮は圧縮が多くのスペースを節約することができ、多くの場合、後に、適切なツールを用いて行うことができます
（3）画像遅延ロード（遅延ロード画像）：確かに私たちが知っている、淘宝網のように、この絵の花びらは、特に大規模なサイトでは、ユーザー負荷、それを現在のページの絵を与えるんですか？明らかに不可能、この絵のために多くのページは、画像のための要求の数に折り目を軽減するために、処理遅延ロードされているが、ここで注目すべきは、HTTPリクエストの数を減らすことですあなたは写真が遅延ロードによってロードする必要はありませんさせることができますという意味ではありません要求を送信していますが、ページを入力すると、負荷によって遅延ロードメカニズムは、画像の現在のページがリクエストを送信するのではなく、あなたの写真の一部を提供します。ユーザーは、次のロード以降のピクチャまでスクロールし続けた場合にのみ。その結果、ときにユーザが最初の画面の内容にのみ関心であり、残りの画像がリクエストに保存されている場合。応答データのバックエンドの画像を取得するためのフロントエンドである原則の実現、およそ簡単に、画像のアドレスは、最初のimgノートの場合はdata-src、プロパティに、srcプロパティが空の場合、JSモニターのユーザーからページをスクロールし、限り、ウィンドウの表示領域に、現在のピクチャがされるようdata-srcに画像アドレスでsrc映像表示の実現
（4）HTTPキャッシュの合理的なセット：キャッシュが大幅にHTTPリクエストを減らすことができ、強力な力と適切なキャッシュ設定です。自宅で、例えば、ときに、ブラウザのキャッシュ時にアクセスが、データの500以上のKの合計を50の要求の合計を発行することがない仮定、およびときブラウザアクセスをキャッシュされている第二の訪問はわずか10リクエスト、20の合計でありますKデータ。（ページを更新するために直接F5は、その効果は同じでない場合、要求の数が、この場合には同じですが、要求されたサーバのキャッシュリソースが304応答であるが、ヘッダなしボディ、帯域幅を節約することができますことに留意されたい）
、どのように我々合理的なセットと考えますか？例えば、リソースは直接によって提供することができる画像にはほとんど変化は長い頭に期限切れにHTTPヘッダーを有効期限、変更が頻繁にではなく、資源になるかもしれ最終-Modifed要求の検証を行うために使用することができます。可能な限りそのリソースがキャッシュ内に長くなることができるように。これは主に、設定をバックエンドですが、これはマーク・ツー・バックの応答を伴うだろう、合理的なセットは、あまりにも多くのページのロードアップフロントとリア側との対話、速度を減らすことができます
2.パーセント削減HTTPリクエストブロードバンド（定性）
（1）資源が（以前、ここまたはそれについての書き込み、あなたが連結の量を削減するための要求を理解することができ、量子化は、すでにこれを言及し、圧縮はブロードバンドリクエストのシェアが減少）圧縮と合併：あなたができる場合は、のできるだけ外部スクリプト、スタイルが1以上に、マージされます。また、CSSは、Javascriptを、画像圧縮は圧縮が多くのスペースを節約することができ、多くの場合、後に、適切なツールを用いて行うことができます
、大きな画像を遅らせるためにバインドされている要求のユーザーエクスペリエンスに影響を与えますが、プロジェクトは確かにいくつかの大きな画像を読み込まないようしていない、我々は、ボリュームを描くことができます（2）大きい画像（大容量）の要求を避けます適切な圧縮は、そのようなファジー歪みなど画像の品質に影響しないように注意し、これらの写真のこの一般的なUIデザイナが処理されます。同社は、労働者のように明確な区分がない場合には、もちろん、（そう意志のフロントエンドのジョブを完了する必要があるかもしれません行う、行うことができます今のソフトウェア）ありますが、あなたが対処方法を知っているか、時間や品質問題の出現を圧縮しない場合、我々はSVG形式の画像を、使用することをお勧めしますだけでなく、他の小さなフォーマットの画像に比べてボリューム、最も重要なのは、歪みのない拡大されています！
第二に、プログラム・コード・レベル
コード最適化レベル、コードのメンテナンスの仕様を強化するだけでなく、プログラマの重要な品質ですが、また、パフォーマンスの向上（高品質のコードは、あなたの手紙のパフォーマンスに影響を与えることができない！）、あまりビープライライさんを参照してくださいいくつかの方法は何ですか。
1.スタイルとスクリプトコードの場所
（1）は、最終的にCSSやJSスクリプトセットHEADを入れて：どこか、などBODYとしてのCSSは、ブラウザをダウンロードして解析することができなかった場合、これは、我々はすべての①その理由は→こちらを知っている必要がありますCSSは、すでに状態にCSS CSSの状態のないページからのジャンプにつながったページをレンダリングし始めている、ユーザ体験は比較的貧弱です。②HTTP1.1のブラウザのHTTPリクエストされた後、ダウンロードが完了CSS後に低い位置に配置されたCSSはブラウザが遅れてレンダリングするようになります場合はまた、一部のブラウザでは、ページをレンダリングするために開始します同時に、それはより速くロード・リソースへの可能な特徴は、しかしJSスクリプトがするまでブロックされた状態で、このようなスクリプトがロードされる前に、それは画像の背後にある、スタイルや他のスクリプトなどShiqueブロックの他のリソースを、ロードされましたスクリプトの後にロードが始まり、完成搭載しています。スクリプトがより前方位置に配置されている場合は、ページ全体の読み込み速度は、それによって、ユーザーエクスペリエンスに影響を与える影響を受けることになります。そこにこの問題を解決するために多くの方法があり、最もシンプルかつ信頼性の高い方法は、同時ダウンロードの影響を低減するために、可能な限りのスクリプトに次の動きです。
2. HTML
（1）HTML5セマンティックノートの使用の合理化、およびタグのネストされた混沌、無用のノートを減らす、あなたは関係ある何フロントエンドのパフォーマンスの最適化を求めてすべきですか？（より複雑な場合にはより多くの損失が通過するよりパフォーマンスになると、DOM構造）DOM構造設計が合理的であることに注意してください、それはブラウザの速度解析HTML DOMツリーを削減する、コンクリートはこの記事→を見ることができるリターンを再描画
（2）新しいAPIは、HTML5のWebストレージを備えているので、重要なのWebストレージ、便利なオフラインWebアプリケーションです。また、クッキーに関して新しいAPIも高い安全性、高効率、大きなスペースの利点があります。各要求はクッキーを運ぶので、要求に対応する番号、およびセッションストレージとローカルストレージはそれを最適化することができますので、まだそれらを消費します。
3.CSS
ほとんどの人々の心の中で（1）、ブラウザの感触の種類は、例えば、右行為に左からCSSセレクタを解析し#pic A { color: #444; }、それは最初ので、効率が高くなります解決することであるならば、左から右に、そのようなセレクタをスコープIDの選択は、実質的に、ルックアップ定義置くが、左に事実決意ブラウザセレクタで右から行われます。上記のセレクタとして、ブラウザは、ノードラベルのそれぞれの先祖を見つけるために横断しなければならない、効率が想像として高いとして以前のようではありません。ので、ブラウザがCSSを解析しているので、それから、私たちは、CSSスタイルではないのを書くべきではありませんHTML、CSS、DOMツリーを上記のように深いネストは、このパフォーマンスの最適化が関与する場合、ブラウザで解決されたが、そこにある、常に（HTMLやCSSの構造のどちらか）あまりにも深くなりネストされた書き込みブラウザのパースが遅くなるダウンをしましょう。
アニメ自体は、ブラウザを再でしょう、文書の流れがある場合、それはレイアウトの隣に影響を与えるだろう、動いているので、（2）アニメーションでは、アニメーション自体は、これページ絶えず再描画逆流を減らす、文書の流出させるべきです関連する計算要素のサイズと位置のこの部分;第二変換できるように、CSS3のハードウェアアクセラレーションを使用することで、不透明度は、これらのアニメーションを還流再描画→これらについて原因は、この記事を見ることができませんフィルタ戻り再描画するために内部が非常に言いました明確な
4.Javascript
（1）減速動作DOMノード：
DOM操作は、DOM DOMコレクション動作の追加、変更、または削除要素としてクラスアクションスクリプト最も抵抗性でなければなりません。スクリプトが含まれている場合は、DOM操作の多数は、次のことに注意する必要があります。
。HTMLコレクション（HTMLコレクタ、返品のコンテンツ情報の配列である）
スクリプトdocument.imagesで、document.forms最も通常の配列としてそれを使用する場合、getElementsByTagNameの（）は、コレクションのHTMLCollection型をしている返します。それはlengthプロパティを持っているので、使用には、あなたは各要素にアクセスするためにインデックスを使用することができます。これは、結果の静的なセットではありませんので、しかし、配列よりもアクセス性能上、たくさん悪化する、それだけで特定のクエリを表し、クエリは、クエリの結果を更新するために、コレクションにアクセスするたびに再実行されています。いわゆる「コレクションへのアクセスは、」読み取りlengthプロパティ、コレクションのアクセス要素のコレクションが含まれています。
あなたがHTMLコレクションを横断する必要があるときに、パフォーマンスを向上させるために、その後の配列へのアクセスを、それを試してみて。lengthプロパティを横断するとき配列にない場合は、例えば、極力それにアクセスしてください、ローカル変数のメンバーに保存され、その後、ローカル変数を使用することができます。
B。リフロー＆リペイント
上記の点に加えて、これらのリソースを消費する必要があるため、DOM操作も、ブラウザリフローとリペイントを考慮する必要があります
ヴューは/詳細特異的に入らない比較動作前後DIFF DOMのために異なるアルゴリズムを介して動作、ボトムフレームに反応としてC。フレームワークは、仮想DOMの段階であります
（2）アクセス可変データ：
データを直接含むにはjavascriptの量（文字列、正規表現）、変数、配列とオブジェクトの属性、及び前記ローカル変数への直接アクセスの量が最速であり、オブジェクトのプロパティのアレイにアクセスします頭上に大きなアクセスの必要性。：場合は、以下の条件、ローカル変数にデータを置くことが推奨される
すべてのオブジェクトのプロパティへの訪問回以上。
すべてのアレイメンバー上のB時間は、アクセスに100回以上。
また、オブジェクトの深さだけでなく、可能性の配列を減らす必要があります検索。
（3）は、（コンテンツの一部を設計するために関連する問題に、この点で）見つけるために、スコープチェーンを減らす：
以前に問題を見つけるために、スコープチェーンの話、そしてこれは、循環に注意すべき特定の問題です。してくださいあなたは変数にローカル変数を横断して、グローバル変数がスコープ内にあるので、グローバル変数のために特に重要であり、その変数の書き換え、年末を横断する前にキャッシュにこのサイクルの範囲にアクセス変数にない必要がある場合連鎖の頂点、訪問はほとんどを見つけることである回数、我々はこれらの二つの用法↓比較
①非効率的な言葉遣いを：
// 全局变量
var globalVar = 1;
function myCallback(info){
for( var i = 100000; i--;){
//每次访问 globalVar 都需要查找到作用域链最顶端，本例中需要访问 100000 次
globalVar += i;
}
}
②より効率的な執筆：
// 全局变量
var globalVar = 1;
function myCallback(info){
// 局部变量缓存全局变量
var localVar = globalVar;
for( var i = 100000; i--;){
// 访问局部变量是最快的
localVar += i;
}
// 本例中只需要访问 2次全局变量
// 在函数中只需要将 globalVar中内容的值赋给localVar
globalVar = localVar;
}
また、スコープチェーンを低減することもクロージャの使用を減らすことになります。
（4）文字列連結
新しいメモリを開いて、新しい文字列変数を生成し、各ランをステッチ新しい変数に結果を割り当てるようCONCATENATEストリング効率にJavaScriptで使用「+」記号は、比較的低いです。これに対して、より効率的なアプローチでは、この方法を参加の配列を使用することで、すぐにその最終的な結果を得るために、joinメソッドを呼び出して、配列内の文字列をスプライスする必要があります。しかし、アレイの使用の特定のオーバーヘッドを持っているので、より多くのようにするとき、文字列場合は、この方法を使用することを検討することができます必要なステッチ、2番目は、完全なテンプレートの構文ES6 KOされ、この「+」の実践スプライシング、便利で効率的なことで
（5）レイジー負荷のJavascript（オンデマンドでロードされるように、このような非同期ローディングVueの構文として、理解することができる、符号分割結合WebPACKの）
人気のあるJavascriptのフレームと、より多くのサイトは、フレームから使用されています。帯域幅の浪費と無駄な時間を過ごした実行-しかし、フレームワークは、多くの場合、あなたは資源の無駄であることを主張する必要はありませんスクリプトをダウンロードした場合、これらの機能は、すべてのページを必要とされていない達成するための多くの機能が含ま。現在の練習は1トラフィックが特に重いページは、フレームワークの専用のミニバージョンを合わせている人のためのものです、2種類があり、もう一方は遅延ロードです。第二の方法は、最初にロードされたコアモジュールの実装でYUI、YUIを使用することで、他のモジュールがロードされるまで待機する必要な場合にのみ使用することができます。Vueの構文は、ルーティング設定で非同期にロードされ、SPA単一ページのアプリケーションは、非常に一般的です
（6）増加コードの利用：
Aコードの再利用（コードカバレッジ）がどのようなものですか。？
私は何かの人気、特に自己グールを言うでしょう。コードカバレッジは、何が実際に活性化を使用している（緑色であるアクティベーションコード、および赤色はアクティベーションコードを保留している）現在ロードされてページの文書を指し
B。方法を確認するには？
ピクチャー・ショー愛ファンタスティックアートホームショーカバレッジテストにそれを使用してロードされたときにiQIYI最初の画面がロードされた後、あなたは、赤いボックスのうち70％のコードカバレッジを見ることができ、非常にNB、55以上がありますかなり良いです。
C。どのように最適化するため、どのように？
ワン→ページ現在ロードされたコードは、他の無関係なページ、または不注意でドーピングされたと一緒にスプライシングによって複数のモジュールをページを避けるため、各モジュールが同じリソースを要求されていない、リソースが繰り返し要求が発生します。
→非同期コード第二には、ロジックとユーザーの相互作用に、非同期処理のコード、コードを使用すると、利用率を向上させることができ、カバレッジ、我々は相互作用に成功トリガされたときに、対応する非同期コードが緑色になり、および非同期コードによって試験することができますカバレッジを向上させることができ、最終的な決定権今や最適化されたフロントエンドキャッシュは単に、このレベルを考慮するだけでなく、コードの利用のレベルを心配することはできません。
まだリリースされていないサード→最近の重いのVue3.0？ことを言っていない、もちろん、振るされているが、そのすべての人ので、このためほとんど理解パートナーはVue3.0は、この機能が強力であることができ、彼は自動的に使用中のコードページを認識することができない、機能「ツリーツリー揺れを振る」最適化を知っている必要がありますあまりにもありますそうでない場合は、すべての後に、トレンドを維持ヴューをアップグレードしていないこと、焼きたての里芋は非常に暑いです、それは時間がかかり、あなたはVue3.0開発を使用していない場合はWebPACKのは、これを構成するには、それはまた木振っ機能によって達成することができますこれは、→を参照することができWebPACKの公式文書
第三に、最寄りのレベルに応じて、要求元のソース
名前はそれほど気にしない、私がプレイ混乱です。ちょうどライン上で次の意味するものを知っています。
（1）CDNアクセラレーション：このサービスは通常、単に行にお金を置き、専門のサプライヤーを持っている;メインは、広州でのプロジェクトのユーザーとして、要求元（、リクエストデータを達成することである、CDNは、このIPアドレスを取得するために解決しますソースに応じて送信要求後のアドレス要求）は、（CDNによる受信要求が後で最も近いサーバから迅速に割り当てたIPアドレスを行い、クライアントに対応する対応データを返す配置される）応答データを返します。
エピローグ
要約を行うために最適化フロントエンドへのさまざまな方法の三つの側面からこの記事では、これらの方法は基本的に、フロントエンドの開発者は、開発プロセスのお手伝いをする意欲を学び、実践することができます;もちろんのも可能な方法を最適化しますはい〜、私は言及しなかったか、明るい兄フィギュアそのうちの礼儀ので、給油、彼らは知らないです
免責事項：この記事はCC 4.0 BY-SAの著作権契約書に従って、ブロガーオリジナル記事です、複製、元のソースのリンクと、この文を添付してください。
このリンクします。https：//blog.csdn.net/Umbrella_Um/article/details/102546329
