Vue プロジェクトのパフォーマンスの最適化

プログラミング 2023-08-25 18:04:33 訪問数: null

Vue プロジェクトのパフォーマンスの最適化

Vue プロジェクトのパフォーマンスの最適化

1. コーディング段階

  • data 内のデータを最小限に抑えます。data 内のデータはゲッターとセッターを追加し、対応するウォッチャーを収集します。

  • v-if と v-for は使用シナリオを区別するため、v-if と v-for を一緒に使用しないでください。

  • v-for トラバーサルは項目にキーを追加する必要があります。キーは一意性を保証し、同時に vif を使用することは避けます。

  • 計算とメソッドにより使用シナリオが区別される

  • ルートの遅延ロード、画像の遅延ロード、長いリストの動的ロード

  • オンデマンドでサードパーティモジュールをインポート

  • 短時間の一括操作 (ズーム、スクロール) には手ぶれ補正機能、スロットル機能を使用します。

  • イベントの破壊

  • SPA ページはキープアライブ キャッシュ コンポーネントを使用します

  • コンポーネントの読み込みを遅延すると、ページ リソースが複数の部分に分割され、使用時にオンデマンドで読み込まれるため、最初の読み込みの消費量が削減されます。

  • コードが簡素化され、コンソールが削除され、再利用可能なメソッドとコンポーネントが抽出されます。

  • DOM の再描画を避けるため、インライン スタイルを記述しないでください。

2. SEOの最適化

  • サーバーサイドレンダリング SSR
  • 事前にレンダリングされた

3. パッケージの最適化

  • 圧縮コード
  • ツリーシェイク/スコープ昇降
  • CDN を使用してサードパーティ モジュールをロードする
  • マルチスレッドパッケージング happypack
  • SplitChunks は共通ファイルを抽出します
  • ソースマップの最適化

Vue プロジェクトのパフォーマンスの最適化

1. コードレベルでの最適化

  • v-if と v-show は使用シナリオを区別します

  • 使用シナリオの違いを計算して監視する

  • v-for トラバーサルでは項目にキーを追加する必要があり、v-if を同時に使用することは避けてください。

  • 長いリストのパフォーマンスの最適化。リストが純粋にデータ表示のみを目的としている場合は、変更はありません。Object.freeze()仮想スクロールvue-virtual-sroller

  • 再描画とリフローを減らす

  • イベントの破壊

  • 画像の遅延読み込みvue-lazyload

  • ルーティングの遅延読み込み

  • サードパーティ製プラグインのオンデマンド導入

  • キープアライブキャッシュの適切な使用

  • 手ぶれ補正、スロットリングアプリケーション

  • html、css、jsの最適化

2. Webpack レベルでの最適化

  • 小さい画像をbase64に変換
  • 画像の圧縮 (image-webpack-loader)
  • 冗長コードを ES6 から ES5 に削減
  • SplitChunks は共通ファイルを抽出します
  • テンプレートのプリコンパイル
  • ソースマップの最適化
  • ビルド結果出力分析: webpack-bundle-analyzer
  • Vue プロジェクトのコンパイルの最適化

3. Web基盤技術の最適化

  • gzip 圧縮を有効にする: Web クライアントは、HTTP リクエストのヘッダーを通じてAccept-Encoding圧縮のサポートを識別できます。
  • ブラウザキャッシュ（強力なキャッシュ、ネゴシエーションキャッシュ）
  • 静的リソースは CDN を使用します (CDN の主な機能は、コンテンツをさまざまな場所にキャッシュし、負荷分散テクノロジを使用して、コンテンツを取得するためにユーザーのリクエストを最も適切なキャッシュ サーバーに送信することです)。
  • HTTPリクエストの数を減らす
  • JavaScript と CSS を縮小する
  • バックグラウンド分散展開、負荷分散
  • サーバーサイドレンダリング SSR
  • 事前にレンダリングされたprerender-spa-plugin

4. 非フレームワークコードの最適化

  • 再描画や再配置を減らす
  • CSSをページの上部に配置し、JavaScriptを下部に配置します
  • DNSクエリを減らす

HTML パフォーマンスの最適化

    1. HTML タグは常にそうしてきました。ブラウザの判断時間を短縮
    1. JS によって後続のページの表示がブロックされるため、script タグを HTML ファイルの最後に移動します。
    1. iframe の使用を減らします。iframe は http リクエストを追加し、コンテンツが空であってもページの読み込みを妨げるため、読み込みに時間がかかります。
    1. ID とクラス、命名を簡素化します。キーワードを含む接続記号には「_」の代わりに「-」を使用します。
    1. 大文字と小文字を統一してください。これはブラウザのキャッシュに有益です。ブラウザは大文字と小文字を区別しませんが、w3c 標準では小文字が使用されます。
    1. スペースをクリアします。スペースはコードを表示するのに役立ちますが、各スペースは 1 文字に相当します。スペースが多いほど、ページ サイズは大きくなります。Google や baidu などの検索エンジンのホームページでは、考えられるすべてのスペース、改行が削除されています。 、などの文字を使用すると、Web ページの送信を高速化できます。DW ソフトウェアの助けを借りて、HTML のタグ間のスペースをバッチで削除し、サブライム テキストの Ctrl+A を押してから、Shift+Tab を押したままにしてすべてのタグを左揃えにし、先頭のスペースをクリアすることができます。この線
    1. 不要なネストを減らし、できるだけフラットにします。ブラウザのコンパイラはタグを見つけると、その終了タグの検索を開始し、一致するまでそのコンテンツは表示されないため、ネストされたページが多数ある場合、ページは非常にゆっくりと開かれます。
    1. コメントが多すぎるとスペースを占有するだけでなく、キーワードが多すぎると検索エンジンの検索に影響を与えるため、コメントを減らしてください。
    1. テーブル レイアウトの代わりに css+div を使用し、strong、b、i などの書式設定コントロール タグを削除し、CSS コントロールを使用します。
  • 10. コードは構造化され、セマンティックである必要があります。
  • 11. CSS と JavaScript を別のファイルに分離してみる

CSSパフォーマンスの最適化

    1. 継承のさらなる使用、複数の子要素に共通のスタイル、スタイルを継承できる場合は親要素に記述します
    1. 再描画と再配置の回数を最小限に抑える
    1. セレクターの命名規則、ID による高速検索
    1. 領域をアニメーション化して個別のレイヤーを有効にする

    • 1） 定位： position: absolute/relative

    • 2） 変更の意志: xxx;

    1. CSS ファイルをマージして圧縮して http リクエストを減らし、ツールや自動構築を使用できます。
    1. 画像に CSS スプライトを使用する

JSパフォーマンスの最適化

  • \1. jsを結合して圧縮する
  • \2. DOM での操作を減らし、再描画や再配置を回避します。
  • \3. リクエストの数を減らし、ネットワーク リソースを節約します。
  • \4. 機能関数をカプセル化して再利用を実現する
  • \5. ループ文での変数の定義を避ける
  • \6. クロージャーは注意して使用してください
  • \7. 機能制限、手ぶれ補正機能

HTML パフォーマンスの最適化

  • \1. HTML タグは常に存在します。ブラウザの判断時間を短縮
  • \2. JS によって後続のページの表示がブロックされるため、script タグを HTML ファイルの末尾に移動します。
  • \3. iframe の使用を減らします。iframe はページの読み込みを防ぐために http リクエストを追加します。コンテンツが空であっても読み込みに時間がかかります。
  • \4. ID とクラスは理解できることをベースに命名を簡略化し、キーワードを含む接続詞の接続記号には「_」の代わりに「-」を使用します。
  • \5. ブラウザのキャッシュに役立つように、大文字と小文字を統一してください。ブラウザは大文字と小文字を区別しませんが、w3c 標準では小文字が使用されます。
  • \6. スペースをクリアします。スペースはコードを表示するのに役立ちますが、各スペースは 1 文字に相当します。スペースが多いほど、ページ サイズが大きくなります。Google や baidu などの検索エンジンのホームページでは、表示できるすべてのスペースが削除されています。 Web ページの送信速度を向上させることができるキャリッジ リターンおよびその他の文字。DW ソフトウェアの助けを借りて、HTML のタグ間のスペースをバッチで削除し、サブライム テキストで Ctrl+A を押してから、Shift+Tab を長押ししてすべてを左揃えにし、行頭のスペースをクリアすることができます。
  • \7. 不要なネストを減らし、できるだけフラットにします。ブラウザのコンパイラがタグを見つけると、その終了タグを探し始め、一致するまで内容が表示されないため、ネストが多い場合は開きます。ページは非常に遅くなります。
  • \8. コメントが多すぎるとスペースを占有するだけでなく、キーワードが多いと検索エンジンの検索に影響を与えるため、コメントを減らします。
  • \9. テーブル レイアウトの代わりに css+div を使用し、strong、b、i などの書式設定コントロール タグを削除し、CSS コントロールを使用します。
  • \10. コードは構造化され、セマンティックである必要があります。
  • \11. css と javascript を別のファイルに分けてみる

CSSパフォーマンスの最適化

  • \1. 複数の子要素の共通スタイルである継承をもっと活用し、スタイルを継承できる場合は親要素に記述します

  • \2. 再描画と再配置の回数を最小限に抑える

  • \3. セレクターの命名規則、ID による高速検索

  • \4. アニメーション領域が別のレイヤーを開きます

    • 1） 定位： position: absolute/relative

    • 2） 変更の意志: xxx;

  • \5. CSS ファイルをマージして圧縮し、http リクエストを減らします。ツールや自動構築を使用できます。

  • \6. CSS スプライトを使用して画像を処理する

JSパフォーマンスの最適化

    1. jsをマージして圧縮する
    1. DOM での操作を減らし、再描画や再配置を回避します。
    1. リクエストの数を減らし、ネットワーク リソースを節約します。
    1. 機能関数をカプセル化して再利用を実現
    1. ループステートメントでの変数の定義を避ける
    1. クロージャーは注意して使用してください
    1. スロットリング機能、手ぶれ補正機能

フロントエンドの最適化

1. 負荷の最適化 (http リクエストの数を削減)

  • 画像の結合: スプライト画像やスプライト画像など、画像の数が多い場合に、それらを 1 つの大きな画像に結合して、http リクエストの数を減らすことができます。頻繁に変化する画像は適さない可能性があり、比較的安定して変化する画像が考えられます。http リクエストの数を減らすことに加えて、大きな画像を結合するとキャッシュを最大限に活用してパフォーマンスを向上させることもできます。
  • CSS スタイル シートと JS スクリプトをマージして圧縮します。これらの共通の目的は、http 接続の数を減らすことです。
  • オンデマンドでロードされる UI ライブラリ
  • ルーティングコンポーネントの遅延ロード
  • 不要なリクエストを削除し、コードを開発して作成するか、システムのアップグレード後に残った無効なリクエスト接続を作成します。
  • 最初の画面の読み込み: 最初の画面での表示が速いと、ユーザーのページ速度の認識が大幅に向上するため、最初の画面での高速表示に対応する最適化を行う必要があります。
  • キャッシュを最大限に活用する: サーバーに送信されるリクエストの数を減らし、ネットワーク リソースを節約するには、すべての静的リソースをサーバー側に配置してキャッシュし、可能な限り長いキャッシュを使用する必要があります。
  • プリロード: ロードは大規模なリソース ページに使用でき、リソースがロードされた後にページが表示されますが、ロード時間が長すぎると、エクスペリエンスが低下します。
  • サードパーティ リソースの非同期読み込み: サードパーティ リソースは制御できず、ページの読み込みに影響を与えるため、サードパーティ リソースは非同期で読み込む必要があります。

2. 画像の最適化

  • できるだけPNG 形式の画像を使用してください。サイズが比較的小さく、ツールで圧縮できます。オンラインにする前に最適化することをお勧めします。
  • 画像の遅延読み込み画像の遅延読み込み
  • img や iframe などのタグの空の src 属性は避けてください。空の src は現在のページをリロードし、速度と効率に影響します。
  • 画像に DataURL を使用しないようにしてください。DataURL 画像は画像圧縮アルゴリズムを使用しないため、ファイルが大きくなり、レンダリング前にデコードする必要があるため、読み込みが遅くなり時間がかかります。

3. CDN を使用する

CDN: 中央のメディアサーバーからエッジサーバーにコンテンツを配信するネットワークシステム、つまりコンテンツ配信ネットワークを実現します。CDN は、ネットワーク遅延とパケットロス率が低く、負荷を分散し、帯域幅を節約し、Web サイトのパフォーマンスを向上させることができます。ユーザーが近くにあるすべての情報を入手できるようにすることで、コンテンツの必要性を高め、ネットワークの混雑状況を解決し、Web サイトにアクセスするユーザーの応答速度を向上させます。

Web サイトにとってセキュリティが重要な場合は、パブリック CDN を使用しないでください。CDN からファイルをリモートでリクエストすると、アクセス ソース情報も送信され、ユーザーまたはシステム情報を収集するために一部のリモート js ファイルが変更される可能性があるためです。 https プロトコルを使用する場合、選択できる CDN はさらに制限されます。

4. Gzip (コード圧縮) をオンにする

Gzip はデータ圧縮です。フロントエンドの本番環境では、js、css、画像などのファイルが圧縮されます。データ送信量を減らすことで、送信時間の短縮、サーバーのネットワーク帯域幅の節約、およびフロントエンドの最終的なパフォーマンスが向上します。

圧縮時間、プロセス、説明

画像

5. スタイルシートとJSファイルの最適化

  • ヘッダーにインラインで含まれるスタイルとスクリプトは、ページのレンダリングをブロックします。通常、CSS スタイル シート ファイルをファイルの先頭に配置し、リンクを使用してインポートし、CSS スタイル シートを次のようにダウンロードできるようにします。できるだけ早く。
  • js スクリプト ファイルに対応して、ページ上のスタイルとスクリプトのブロックを最小限に抑えるために、通常はスクリプトを最後に配置し、非同期で読み込みます。

6. 不要なCookieを減らす

Cookie はクライアント側に保存され、HTTP リクエストとともにブラウザとサーバー間で送信されます。対応するドメイン名のリソースにアクセスするときに HTTP リクエストを通じてサーバーに送信されるため、読み込み速度に影響を与えるため、不要なCookieを削減します。

7. スクリプトの最適化

  1. 複雑なアニメーション効果の場合は、絶対配置を使用してドキュメント フローから外し、DOM 要素のループを避け、位置左、右... の代わりにtransform:translateを使用してリフローと再描画を最小限に抑えます。

  2. スクリプトを元に戻して、同時ダウンロードへの影響を軽減します。

  3. .length の値をキャッシュする: 各 .length 計算では、変数を使用して値を保持します。

  4. イベント委任を使用してみてください。イベント リスナーを子ノードごとに個別に設定するのではなく、その親ノードに設定し、バブリング原則を使用して各子ノードを設定してバッチ バインディング イベントを回避し、メモリ消費と DOM 操作を削減します。

  5. ID セレクターを使用してみてください。ID セレクターは要素を選択するのが最も速く、一意性、柔軟性、優先順位という利点があります。

8. フロントエンドコード構造の最適化

  • ビューポートの設定: HTML ビューポートを使用すると、ページのレンダリングを高速化できます。

  • DOM ノードの設計を減らす: DOM ノードが多すぎると、ページのレンダリングに影響します。

  • 可能な限り css3 アニメーションデザインを使用するように設定します。 setTimeout の代わりに requestAnimationFrame アニメーションを合理的に使用します。

  • 高頻度イベントを最適化するように設定する: スクロール、タッチムーブなどのイベントは、手ぶれ補正やスロットリングなどの機能を使用して、可能な限り制限する必要があります。

  • WEB フォントのデザインを乱用しないでください。WEB フォントはダウンロード、解析、現在のページの再描画が必要であり、使用は最小限に抑える必要があります。

  • ファイルの命名規則は統一的かつ意味のあるものでなければならず、同じ種類のファイルは同じフォルダに分類されます。

9、SEOの最適化

  • タイトル: タイトルの文字数は長すぎず、Webサイトの核となるキーワードやテーマに関連する内容を記載するのが一般的です。
  • 説明: 説明はページ全体の包括的な説明です。その機能と重要性はタイトルに次ぐものです。説明はより魅力的でなければなりません。会社のブランド名や電話番号、ターゲットキーワードを含む必要があります。
  • キーワード: キーワードを最適化すると、ユーザーがキーワードを検索するときに、検索したいコンテンツや Web サイトを正確に見つけられるようになり、必要としているより多くの人に Web サイトが表示されるようになります。
  • ウェブサイト コード: ウェブサイト コードは、Baidu スパイダーの時間を節約するためにできる限り合理化する必要があります。これは大規模なウェブサイトにとって特に重要です。

vue の最初の画面読み込みの最適化を実現

  • 頻繁に変更されないライブラリをindex.htmlに配置し、cdn経由でインポートします。

  • エントリーファイルのサイズを減らす: 遅延ロードをルートする

  • 静的リソースのローカル キャッシュ: フロントエンドによる localStorage の合理的な使用

  • オンデマンドでロードされる UI フレームワーク

  • 画像リソースの圧縮：オンラインフォントアイコン、スプライト画像

  • 軽量ツールライブラリを使用する

  • コンポーネントの繰り返しパッケージ化: CommonsChunkPlugin の構成

    // 假设moment.js文件是一个常用的库，现在很多文件都使用了该文件，这就造成了重复加载
// 解决方案： 在webpack的config文件中，修改CommonsChunkPlugin的配置。
minChunks: 3 //把使用3次及以上的包抽离出来 放进公告依赖文件,避免了重复加载

  • GZip 圧縮を有効にする:compression-webpack-plugin プラグイン

    nmp i compression-webpack-plugin -D //安装 compression-webpack-plugin 

// 并在vue.config.js 中引入并修改webpack配置 在服务器上我们也要做相应的配置。
const CompressionPlugin = require('compression-webpack-plugin') 
configureWebpack: (config) => {
      
      
        if (process.env.NODE_ENV === 'production') {
      
      
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
      
      
                plugins: [new CompressionPlugin({
      
      
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
      }
}

  • SSR (サーバーサイド レンダリング) を使用する: コンポーネントまたはページはサーバー経由で HTML 文字列を生成し、それをブラウザーに送信して (Vue では nuxt.js の使用を推奨します)、サーバーサイド レンダリングを実現します。

DNS 解決を最適化するにはどうすればよいですか?

DNSの正式名はDomain Name System であり、ドメイン ネーム システムであり、域名相互IP地址にマッピングする分散データベースです。

Web サイトのブラウザーの最初のドメイン名 DNS 解決検索プロセスは次のとおりです。

ブラウザ キャッシュ - システム キャッシュ - ルーター キャッシュ - ISP DNS キャッシュ - 再帰的検索

1. DNS リクエストのクエリ数を減らす (フロントエンド)

DNS クエリも応答時間を消費します。Web ページのコンテンツが異なるドメインからのものである場合、クライアントが初めてこれらのドメインを解決するまでに一定の時間がかかります。ただし、DNS クエリの結果はキャッシュされるため、ローカル システムとブラウザを一定期間使用すると、DNS クエリは通常、最初のアクセスの速度にのみ影響します。

2. DNS プリフェッチを実行します: DNS プリフェッチ (フロントエンド)

  • DNS プリフェッチ (DNS プリフェッチ) は、後でロードされるファイルやユーザーが開こうとしているリンク ターゲットなどのリソースを要求する前に、ドメイン名の解決を試みます。ドメイン名の解決とコンテンツの読み込みはシリアル ネットワーク操作であるため、この方法によりユーザーの待ち時間が短縮され、ユーザー エクスペリエンスが向上します。

  • DNS プリフェッチは、開発者が DNS 解決の遅延を隠すのに役立ちます。HTML の link 要素は、dns-prefetch の rel 属性値によってこの機能を提供し、href 属性でクロスドメインとなるドメイン名を参照します。

    DNS プリフェッチを設定するにはどうすればよいですか?

    X-DNS_prefetch-Control を設定: on|off

    on : DNS 事前解決を有効にします。ブラウザーが DNS 事前解決の機能をサポートしている場合、このラベルが適用されない場合でも、ブラウザーは事前解決を実行します。
    off : DNS 事前解決をオフにします。この属性は、ページ上のリンクがユーザーによって制御されていない場合、またはこれらのドメインにデータをまったく送信したくない場合に役立ちます。

3. DNSキャッシュ時間の延長（運用保守）

DNS クエリ プロセスには約 20 ミリ秒かかります。DNS クエリ プロセス中、ブラウザは何もせず、空白のままになります。DNS クエリが多数ある場合、Web ページのパフォーマンスに大きな影響を与えるため、DNS キャッシュが必要です。

ブラウザごとにキャッシュ メカニズムは異なります。DNS レコードの IE のデフォルト キャッシュ時間は 30 分、DNS レコードの Firefox のデフォルト キャッシュ時間は 1 分、DNS レコードの Chrome のデフォルト キャッシュ時間は 1 分です。

長いキャッシュ時間: 繰り返される DNS ルックアップを減らし、時間を節約します。

短いキャッシュ時間: サーバー IP の変更を適時に検出して、アクセスの正確性を保証します。

4. CDN を使用してドメイン名を高速化する (運用と保守)

おすすめ

転載: blog.csdn.net/qq_37831545/article/details/129393915
おすすめ
ランキング
Web側のオンラインクラウド編集ソリューション
2つのシナリオでのJVMチューニングケース（基本テンプレートの概要-G1）-ピット概要ハイライト21を踏む（週に1回更新）
Node Sass は現在の環境のバインディングを見つけることができませんでした
RabbitMQのコマンドラインの使用方法は、手動でキューrabbitmqadminを作成します
币圈韭菜十大致命操作（八）热爱幻想，无视现实
Wide Face+YOLOV7 顔検出
shrioの研究ノート
Eclipseは「：不明なMavenの設定の問題」を示します
6512. [3.18] GDOI2020シミュレーションツリーとパス
不像总结的总结
アーカイブ
もっと
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)

コードワールド

© 2018 codetd.com