マインドマップギャラリー フロントエンドのフルリンクパフォーマンスの最適化と研究開発プロセスの最適化
フロントエンドのフルリンクパフォーマンスの最適化: 研究開発および開発プロセスを最適化するためのハイブリッド開発、CDN/DNS、HTTP、Cookie、サーバー、HTTPS、HTTP-2 などを含む研究開発および開発プロセスの最適化。
2021-01-01 19:46:28 に編集されましたフロントエンドのフルリンクパフォーマンスの最適化と研究開発プロセスの最適化
4. HTTP: HTTP リクエストの数を減らすにはどうすればよいですか?
CSS スプライト
画像はDataURL、Webフォントを使用しています
JS/CSSファイルのマージ
JS/CSSリクエストコンボ
インターフェースのマージ
インターフェースストレージ LocalStorage
静的リソースストレージ LocalStorage
5. Cookie: Cookie サイズを削減する戦略と利点
戦略
メイン Web サイトのホームページにホワイトリストを設定する
ホワイトリストに登録されていない Cookie を定期的に削除する
利点
ページ間の転送サイズを削減する
Cookieを効果的に管理する
6. サーバー
キャッシュ構成および最適化ソリューション
有効期限が切れます
意味
応答ヘッダーには、応答の有効期限が切れる日付/時刻が含まれます。
0 などの無効な日付は過去の日付を表します。つまり、リソースの有効期限が切れています。
「max-age」または「s-max-age」ディレクティブが Cache-Control 応答ヘッダーに設定されている場合、Expires ヘッダーは無視されます。
文法:
有効期限: 2019 年 12 月 17 日火曜日 07:01:44 GMT
例:
有効期限: 2019 年 12 月 17 日火曜日 07:01:44 GMT
キャッシュ制御
意味
命令を指定することによってキャッシュ メカニズムを実装する一般的なメッセージ ヘッダー フィールド。キャッシュ ディレクティブは一方向です。つまり、リクエストに設定されたディレクティブが必ずしも応答に含まれるわけではありません。
文法
Cache-Control: max-age=[キャッシュ ストレージの最大期間を設定します。この期間を過ぎると、キャッシュは期限切れとみなされます (秒単位)。 Expires とは異なり、時間はリクエストの時間に相対的なものです]
例
キャッシュ制御:max-age=600
Eタグ
意味
HTTP 応答ヘッダーは、リソースの特定のバージョンの識別子です。これにより、コンテンツが変更されていない場合、Web サーバーは完全な応答を送信する必要がなくなるため、キャッシュがより効率的になり、帯域幅が節約されます。また、コンテンツが変更された場合、ETag を使用すると、リソースの同時更新が互いに上書きされるのを防ぐことができます。
特定の URL に自発的な変更がある場合は、新しい ETag 値を生成する必要があります。したがって、ETag は指紋に似ており、一部のサーバーによる追跡にも使用される場合があります。 ETag を比較すると、このリソースが変更されたかどうかをすぐに判断できますが、追跡サーバーによって永続的に保持される場合もあります。
文法:
ETag: "<etag_value>"
例
Eタグ: "<5c6ccc12-1d45>"
最終更新日
Lat-Modified は、ソース サーバーによって識別されたリソースが変更された日時を含む応答ヘッダーです。これは、受信または保存されたリソースが相互に一貫しているかどうかを判断するための検証ツールとしてよく使用されます。これは ETag よりも精度が低いため、フォールバック メカニズムです。 If-Modified-Since ヘッダーまたは If-Unmodified-Since ヘッダーを含む条件付きリクエストでは、このフィールドが使用されます。
文法
最終更新日: <日名>、<日>、<月>、<年>、<時間>: <分>: <秒> GMT
例
最終更新日:ウェブ、2019 年 2 月 20 日 03:40:02 GMT
日付
意味:
Date は、メッセージが作成された日付と時刻を含む一般的なヘッダーです。
文法
日付: <曜日名>、<日>、<月>、<年>、<時間>: <分>: <秒> GMT
例
日付:2019 年 2 月 17 日火曜日 03:40:02 GMT
状態
意味
HTTP 応答ステータス コードは、特定の HTTP 要求が正常に完了したかどうかを示します。応答は、情報応答 (100 ~ 199)、成功応答 (200 ~ 299)、リダイレクト (300 ~ 399)、クライアント エラー (400 ~ 499)、およびサーバー エラー (500 ~ 599) の 5 つのカテゴリに分類されます。
例
ステータス:200
gzip 圧縮を有効にして構成する方法
利点
テキストを圧縮(HTML/CSS/JS)
非テキスト (jpg/gif/png) については圧縮なし
圧縮率 約50%~70%
設定方法
Nginx 設定: nginx.conf ファイルに gzip が追加されます。
Apache 構成: AddOutputFilterByType および AddOutputFilter
有効性の検出
応答ヘッダー Content-Encoding: gzip があるかどうかを確認します。これは、サーバー上で gzip がオンになっていることを意味します。
7. HTTPS: サイト全体で HTTPS を有効にする方法
基本的な考え方
HTTPS (HyperText Transfer Protocol Secure) は、コンピュータ ネットワーク上の安全な通信のための転送プロトコルです。
HTTPS は HTTP 経由で通信しますが、データ暗号化には SSL/TLS を使用します。
HTTPS の主な目的は、サーバー ID 認証を提供し、データのプライバシーと整合性を保護することです。
動作原理
ブラウザが HTTPS リクエストを開始します
譲渡証明書
ブラウザが証明書を解析する
暗号化された情報を送信する
サーバーが情報を復号化する
暗号化された情報を転送する
ブラウザが情報を復号化する
アドバンテージ
SEO
安全性
埋め込む
ディーラー購入証明書
GoGetSSL
SSLs.com
SSLmate.com
ローカルテスト証明書
ローカル HomeBrew インストール: brew install mkcert
ルート証明書をローカルにインストールします: $ mkcert --install
ローカルで署名を生成: $mkcert 123.com //123.com の証明書を生成
ローカルの nginx 構成
8. HTTP-2: HTTP-2 をアップグレードする利点は何ですか?アップグレードするにはどうすればよいですか?
HTTP/2の概念
HTTP/2 (ハイパーテキスト転送プロトコル バージョン 2、当初の名前は HTTP 2.0) は、h2 (TLS/1.2 以降に基づく暗号化接続) または h2c (非暗号化接続) と呼ばれ、HTTP プロトコル バージョンの 2 番目のメジャー バージョンです。
HTTP/2 の利点
バイナリ形式でデータを転送する
多重化により、単一の HTTP/2 接続上で複数のリクエストを実行できるようになります。
ヘッダ圧縮、送信量少ない
サーバー プッシュ。サーバーはリソースをクライアントにより速くプッシュできます。
HTTP/2 サイトの利点
サーバーの負荷を軽減できる
ウェブサイトのアクセス速度の向上
ウェブサイトを安全に保つ
Nginx で HTTP/2 を有効にする
OpenSSL のアップグレード: $ openssl version
再コンパイル
$ cd nginx-xxx
$ ./configure --with-http_ssl_module --with-http_v2_module
$ メイク && インストールを行う
HTTP/2 を検証する
ブラウザでチェックして、小さな緑色のロックがあるかどうかを確認してください
ブラウザリクエストのスクリーンショット
3. DNS: 主流の DNS 最適化方法は何ですか?
意味
ドメイン ネーム システムは、Web サイトのドメイン名と IP アドレスを相互にマッピングする分散データベースであり、インターネットへのアクセスを容易にします。
クライアント処理
Android DNS モジュール (okhttp)
HTTP/2 をサポートします。HTTP/2 は、多重化テクノロジを使用して単一の接続で複数のリクエストを一度に送信することにより、単一の TCP 接続での同時実行をサポートします。
HTTP/2 が利用できない場合は、接続プールの再利用テクノロジによってレイテンシーを大幅に削減することもできます。
ダウンロードサイズを圧縮するGZIPをサポート
対応するキャッシュにより、ネットワークリクエストの繰り返しを完全に回避できます
サーバーが複数の IP アドレスで構成されている場合、最初の IP 接続が失敗すると、OkHttp は自動的に次の IP を試行します。
iOS DNSモジュール(自社開発)
アプリが起動すると、使用される可能性のあるすべてのドメイン名と IP がキャッシュされ、クライアントはキャッシュされた結果を取得する必要がありません。
キャッシュにこのドメイン名のキャッシュがある場合は、キャッシュされた IP が直接返されます。
このドメイン名がキャッシュにない場合は、HTTPDNS SERVER に再度適用すると、このコールバックで結果が返されます。
フロントエンド処理
ブラウザーの同時実行制限、複数のドメイン名に設定された配布
ユーザーアクセス: Java、PHP、およびその他の API インターフェイス
ページとスタイル: HTML/CSS/JS
画像: jpg、png、gif など
2. CDN: CDN キャッシュを適切に構成するにはどうすればよいですか?
意味
コンテンツ配信ネットワーク (CDN) は、各ユーザーに最も近いサーバーを使用して、ユーザー配布ネットワークにファイルをより速く、より確実に送信します。
アドバンテージ
スピードアップ: ユーザーにデータを送信するために、より近くのよりスムーズなサーバー ノードがユーザーに割り当てられます。
低コスト: サーバーはさまざまな場所に配置され、相互接続トラフィックが削減され、帯域幅コストが削減されます。
高可用性: サーバーに障害が発生した場合、近くのエリアにあるサーバーが自動的に呼び出されます。
CDN 原点回帰
バックトゥオリジンとは、ブラウザーが CDN クラスター上の静的ファイルにアクセスすると、ファイル キャッシュの有効期限が切れ、CDN クラスターに直接侵入してオリジナル マシンにアクセスすることを意味します。
CDNキャッシュ
レベル 3 キャッシュ: ブラウザーのローカル キャッシュ、CDN エッジ ノード キャッシュ、CDN オリジン サイト キャッシュ
キャッシュ設定: キャッシュ時間が短すぎると、CDN エッジ ノードのキャッシュが頻繁に失敗し、頻繁にオリジンが返され、オリジン サイトの負荷が増加します。また、キャッシュ時間が長すぎると、アクセスが遅くなり、ファイルが更新されます。速度が遅く、ユーザーのローカル キャッシュが時間内に更新されないため、ビジネスの状況によって異なります。
さまざまな静的リソースタイプのキャッシュ時間
HTML: 3 分
JS、CSS: 10分、1日、30日
CDN グレースケール リリース
原則: 一部の地域および一部の地域の一部の事業者では、静的リソースが最初に解放され、検証後に完全に解放されます。
実装: ドメイン名に関して、グレースケール化する必要がある都市とオペレーターを解決するための特別な VIP を設定し、グレースケール都市とグレースケール化するオペレーターに対して別のオリジン サイト マシンを構成します。これらのユニークなマシン
CDNは大規模なプロモーションを準備中
コンピューター室の帯域幅を増やす
オペレーターのトラフィックを増やす
災害復旧: CDN アプリケーションのキャッシュ時間は 10 分から 1 時間に設定されており、メジャー プロモーション後に復元されます。
1. ハイブリッド開発
ミニプログラムの核心と利点の紹介
ビジョン
すぐに使える: ユーザーはスキャンまたは検索してアプリを開くことができます
すぐに使えます: アプリのインストールが多すぎることを心配する必要はありません
技術的な利点
H5 はアプリ開発よりも開発の敷居が低い
H5 よりも優れており、ネイティブのエクスペリエンスに近い
カメラ、位置情報、ネットワーク、ストレージなどの豊富なネイティブ機能。
上部のドロップダウン、検索、スキャンコード、その他の入り口は使いやすく、使用後は消えてしまうため、シンプルで便利です
アプリのようにダウンロードする必要はなく、直接開いて終了するだけで、ホットアップデートをサポートします。
基礎となるカーネル
ビジネスの背景
アプリプラットフォーム側
トラフィックの収益化
ミニプログラムエコロジー
授業アプリ配信市場
エンタープライズアプリケーション側
モバイルトラフィックは枯渇しつつあり、新しいトラフィックはボーナスです
顧客獲得が難しいという課題を解決し、新規顧客獲得コストを削減
開発コストを大幅に削減
ビジネスにおける試行錯誤の機会が増える
選択の提案
初リリース:2017年1月(WeChatミニプログラム)
Github の開始: クローズドソース
アクティブなコミュニティ: OK
コンポーネント: 非常に豊富
学習曲線: 非常に低い
ネイティブパフォーマンス: OK
包括的な提案: プラットフォーム製品は販売者にトラフィックを出力できるようになりました。RN や Flutter と比較して、複数のアプリがビジネスの相互運用性を実現します。
Flutter コアの概要と利点
ビジョン
画面上のどこにでもピクセルを描画できる、美しい建築体験のための便利なツールキット
技術的な利点
一度書いて各端末に展開: Web、Android/iOS、Mac/Linux/Windows、Fuchsia OS
最下層には Skia グラフィックス エンジンが使用されており、グラフィックス パフォーマンスはネイティブ アプリケーションと同等です。
全画面アプリや 2D ゲームのようなインターフェイス
高速、ネイティブ ARM バイナリを使用、事前にコンパイル、JVM は不要
基礎となる原則
選択の提案
2017年5月
Github 開始: 8.16w (2019 年末)
コミュニティは全体的に活発です
コンポーネントは特殊なウィジェットであり、十分な機能がありません
学習曲線は比較的高く、再び Dart 言語に慣れる必要があります
ネイティブのパフォーマンスが最高
包括的な提案: パフォーマンス、ビジネスがマルチターミナル指向であること、アプリ チームに十分な人員がいることを考慮して、以下を選択することをお勧めします。