[vue]パフォーマンスの最適化について

序文

パフォーマンス最適化の部分では、主にWebサイトのパフォーマンス最適化に関するプログラマーの理解を調べます。
パフォーマンスの最適化で良い仕事をする方法、どの操作がパフォーマンスの最適化の問題を引き起こすか、パフォーマンスの最適化の指標は何かなど、すべてプログラマーの注目に値します。

1.復興の理解

Webサイトのリファクタリングとは、外部の動作を変更せずに、構造を単純化し、読みやすさを追加し、Webサイトのフロントエンドで一貫性を維持する動作を指します。つまり、UIを変更せずに、Webサイトを最適化して、拡張しながら一貫したUIを維持します。

従来のWebサイトの場合、リファクタリングには通常、次の側面が含まれます。

• テーブルレイアウトをDIV + CSSに変更します。
• Webサイトのフロントエンドを最新のブラウザと互換性のあるものにします。
• モバイルプラットフォームを最適化します。
• 検索エンジン向けに最適化します。

詳細なWebサイトのリファクタリングでは、次の側面を考慮する必要があります。

• コード間の結合を減らす
• コードを柔軟に保ちます。
• 仕様に厳密に従ってコードを記述します。
• 拡張可能なAPIを設計します。
• 古いフレームワークと言語（VBなど）を置き換えます
• ユーザーエクスペリエンスを向上させます。
• 速度を最適化します。
• JavaScript、CSS、画像などのフロントエンドリソースを圧縮します（通常はサーバーによって解決されます）。
• プログラムのパフォーマンスを最適化します（データの読み取りや書き込みなど）。
• CDNを使用して、リソースの読み込みを高速化します。
• JavaScriptDOMを最適化します。
• HTTPサーバーのキャッシュファイル。

2.ページ（大規模なeコマースWebサイト）に多数の画像があり、ページの読み込みが非常に遅い場合、ユーザーエクスペリエンスを向上させるために、これらの画像の読み込みを最適化するためにどのような方法を使用できますか？

• 画像の遅延読み込みの場合、ページにスクロールバーイベントを追加して、画像が表示領域にあるか、表示領域に入ろうとしているのかを判断し、最初に読み込むことができます。

• スライドショーやアルバムファイルなどの場合は、画像プリロード技術を使用して、現在表示されている画像の前の画像と次の画像を最初にダウンロードします。

• 画像がCSS画像の場合は、CSSスプライト、SVGスプライト、アイコンフォント、Base64などのテクノロジーを使用できます。

• 画像が大きすぎる場合は、特別にコード化された画像を使用できます。ロードするときは、ユーザーエクスペリエンスを向上させるために、非常に小さいサムネイルが最初にロードされます。たとえば、Googleのwebp形式の画像を使用すると、WebP形式の画像のサイズは同じ品質のJPEG形式の画像よりも40％小さくなります。

• 画像の表示領域が実際の画像のサイズよりも小さい場合は、ビジネスニーズに応じてサーバー側で画像を圧縮する必要があります。画像を圧縮した後、画像のサイズは表示されている画像と同じになります。

3.パフォーマンス最適化の問題。

パフォーマンスは、次のレベルで最適化できます。

• キャッシュの使用率：Ajaxのキャッシュ、CDN、外部JavaScriptおよびCSSファイルキャッシュの使用、Expiresヘッダーの追加、サーバー側でのEtagの構成、DNSルックアップの削減など。
• リクエスト数：スタイルとスクリプトを組み合わせ、CSS画像スプライトを使用し、オンデマンドで最初の最初の画面の外に画像リソースを読み込み、静的リソースの読み込みを遅らせます。
• 帯域幅の要求：ファイルを圧縮し、GZIPを開きます。
• CSSコード：CSS式、高度なセレクター、およびワイルドカードセレクターの使用は避けてください。
• JavaScriptコード：ハッシュテーブルを使用して検索を最適化し、グローバル変数を少なくし、DOM操作の代わりにinnerHTMLを使用し、DOM操作の数を減らし、JavaScriptのパフォーマンスを最適化し、setTimeoutを使用してページの応答損失を回避し、DOMノード検索の結果をキャッシュします。 withの使用を避け（withは独自のスコープを作成し、スコープチェーンの長さを増やします）、複数の変数宣言をマージします。
• HTMLコード：画像やiFrameなどの空のsrc属性は避けてください。src属性が空の場合、現在のページが再読み込みされ、速度と効率に影響します。HTMLタグにStyle属性を書き込まないようにしてください。

4.モバイル端末のパフォーマンスを最適化するにはどうすればよいですか？

• CSS3アニメーションを使用して、ハードウェアアクセラレーションをオンにしてみてください。
• 必要に応じて、クリックイベントの代わりにタッチイベントを使用します。
• CSS3グラデーションシャドウ効果の使用は避けてください。
• transform：translateZ（0）を使用して、ハードウェアアクセラレーションをオンにすることができます。
• Floatを乱用しないでください。Floatはレンダリング時に比較的大量の計算を行うため、できるだけ使用しないでください。
• Webフォントを乱用しないでください。Webフォントは、現在のページでダウンロード、解析、および再描画する必要があるため、できるだけ使用しないでください。
• setTimeoutの代わりにrequestAnimationフレームアニメーションを合理的に使用します。
• CSSプロパティ（CSS3トランジション、CSS3 3D変換、不透明度、キャンバス、WebGL、ビデオ）を適切に使用して、GPUレンダリングをトリガーします。過度に使用すると、電話機の消費電力が増加します。

5. Webサイトのファイルを最適化するにはどうすればよいですか？

ファイルをマージおよび圧縮してファイルを最小限に抑えることができます。CDNを使用してファイルをホストできるため、ユーザーはより高速にアクセスできます。複数のドメイン名を使用して静的ファイルをキャッシュできます。

ページの読み込み時間を短縮する6つの方法。

具体的な方法は以下のとおりです。

（1）写真を最適化する

（2）画像の保存形式を選択します（たとえば、GIFは提供する色が少なく、色の要件が高くない場所で使用できます）

（3）CSSの最適化（CSSの圧縮とマージ）

（4）URLの後にスラッシュを追加します

（5）画像の高さと幅をマークします（ブラウザがこれら2つのパラメータを見つけられない場合は、画像のダウンロード時にサイズを計算する必要があります。画像が多い場合、ブラウザは常にページを調整する必要があります。これはそうではありません。速度に影響するだけでなく、ブラウジングエクスペリエンスにも影響しますブラウザが高さと幅のパラメータを知っている場合、画像を一時的に表示できない場合でも、画像のスペースがページ上で空になり、後続のコンテンツの読み込みが続行されます、それによって読み込み時間を最適化し、ブラウジング体験を改善します）。

セブン、ウェブサイトのフロントエンドのパフォーマンスを向上させる

スプライトマップをマージしてHTTPリクエストを削減し、HTML、CSS、JavaScriptファイルを圧縮し、CDNを使用して静的ファイルをホストし、localstorageキャッシュとmainfestアプリケーションキャッシュを使用します。

8.パフォーマンスを最適化する方法

（1）HTTPリクエストの数を減らし、CSS Sprite、JavaScriptとCSSのソースコード、および画像のサイズを制御し、WebページGzip、CDNホスティング、データキャッシュ、および画像サーバーを使用します

（2）フロントエンドテンプレートのJavaScriptとデータを使用して、HTMLタグによる帯域幅の浪費を減らし、Ajaxリクエストの結果をフロントエンドの変数とともに保存します。ローカル変数を操作するたびにリクエストが不要になるため、リクエストの数。

（3）DOM操作の代わりにinnerHTMLを使用して、DOM操作の数を減らし、JavaScriptのパフォーマンスを最適化します。

（4）設定する必要のあるスタイルが多い場合は、直接スタイルを操作するのではなく、classNameを設定してください。

（5）使用するグローバル変数を減らし、DOMノード検索の結果をキャッシュし、I / O読み取り操作を減らします。

（6）動的プロパティとも呼ばれるCSS式の使用は避けてください。

（7）画像をプリロードし、スタイルシートを上部に配置し、スクリプトを下部に配置して、タイムスタンプを追加します。

（8）ページのメインレイアウトでテーブルを使用しないでください。コンテンツが完全にダウンロードされるまでテーブルは表示されません。表示速度はDIV + CSSレイアウトよりも遅くなります。

9つ目は、Webパフォーマンスの最適化方法をいくつか挙げてください。

（1）ソースコードと画像の圧縮（JavaScriptは難読化された圧縮を使用し、CSSは通常の圧縮を実行し、JPG画像は特定の品質に応じて50％〜70％に圧縮され、PNG画像は24色から8色に圧縮されて一部のPNGが削除されますフォーマット情報など）。

（2）適切な画像形式を選択します（色の数はほとんどJPG形式ですが、PNG形式はめったにありません。サーバーがWebPをサポートしていると判断できる場合は、WebPまたはSVG形式を使用してください）。

（3）静的リソースを統合します（HTTPリクエストを減らします）

（4）複数のCSSを1つのCSSに結合し、画像をスプライト画像に結合します。

（5）サーバー側でGzip圧縮をオンにします（テキストリソースに非常に効果的です）。

（6）CDN（公共図書館の共有キャッシュ）を使用します。

（7）静的リソースキャッシュ時間を延長します。

（8）ページの先頭にCSSを配置し、ページの下部にJavaScriptコードを配置します（ページのレンダリングをブロックしたり、ページが長時間空白で表示されたりしないようにするため）。

10. CSSの場合、パフォーマンスを最適化する方法は？

（1）display属性を正しく使用してください。display属性はページのレンダリングに影響しますので、以下の点に注意してください。

	display:inline后不应该再使用 width、 height、 margin、 padding和float 。
	display:inline- block后不应该再使用 float。
	display:block后不应该再使用 vertical-align。 
	display:table后不应该再使用 margin或者float。

（2）フロートを乱用しないでください。

（3）フォントサイズを宣言しすぎないでください。

（4）値が0の場合、単位は不要です。

（5）各種ブラウザプレフィックスを標準化し、以下の点に注意してください。

	浏览器无前缀应放在最后。
	CSS动画只用（ -webkit-无前缀）两种即可。
	其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）

（6）セレクターを正規表現のように見せないでください。高度なセレクターは読みやすく、実行に時間がかかります。

（7）IDおよびクラスセレクターを使用してスタイルを設定してみてください（style属性を使用してインラインスタイルを設定することは避けてください）

（8）CSS3アニメーションを使用してみてください。

（9）再描画とリフローを減らします。

11. HTMLのパフォーマンスを最適化する方法は？

（1）リソースの読み込み、オンデマンドの読み込み、非同期の読み込みの場合

（2）初めてロードされるリソースは1024KBを超えない、つまり小さいほど良い。

（3）HTML、CSS、およびJavaScriptファイルを圧縮します。

（4）DOMノードを減らします。

（5）空のsrcを避けます（空のsrcは、一部のブラウザーで無効な要求を引き起こします）。

（6）30 *、40 *、50 *のリクエストエラーを回避する

（7）Favicon.icoを追加します。アイコンicoが設定されていない場合、デフォルトのアイコンにより404または500リクエストが送信されます。

12. JavaScriptのパフォーマンスを最適化するにはどうすればよいですか？

具体的な方法は以下のとおりです。

（1）キャッシュDOMの選択と計算。

（2）バッチバインディングイベントを回避するために、イベント委任モードを使用するようにしてください。

（3）クリックの代わりにtouchstartとtouchendを使用します。

（4）setTimeOutの代わりにrequestAnimationFrameアニメーションを合理的に使用します。

（5）キャンバスアニメーションを適切に使用します。

（6）複数のレンダリングが発生する高頻度のイベント（TouchMove、Scrollイベントなど）でビューを変更しないようにしてください。

13.サーバー側を最適化する方法は？

具体的な方法は以下のとおりです。

（1）Gzip圧縮を有効にします。

（2）リソースのキャッシュ時間を延長し、リソースの有効期限を合理的に設定し、長期間更新されない静的リソースの有効期限を設定します。

（3）Cookieヘッダー情報のサイズを小さくします。ヘッダー情報が大きいほど、リソースの送信速度が遅くなります。

（4）画像またはCSSおよびJavaScriptファイルはCDNによって高速化できます。

14.サーバー側のインターフェースを最適化する方法は？

具体的な方法は以下のとおりです。

（1）インターフェースのマージ：ページが3つ以上のデータインターフェースを要求する必要がある場合は、HTTP要求の数を減らすために、それらを1つにマージすることをお勧めします。

（2）データ量を減らす：インターフェースから返されるデータから不要なデータを削除します。

（3）キャッシュされたデータ：最初のロード要求の後、データがキャッシュされます。最初以外の要求の場合、最後に要求されたデータが最初に使用されます。これにより、最初以外の要求の応答速度を向上させることができます。

15.スクリプトの実行を最適化するにはどうすればよいですか？

スクリプトの処理が不適切な場合、ページの読み込みとレンダリングがブロックされるため、使用する際は注意が必要です。

（1）ページの先頭にCSSを記述し、ページの最後または非同期操作でJavaScriptプログラムを記述します。

（2）画像やiFrameなどの空のsrcは避けてください。空のsrcは現在のページを再読み込みし、速度と効率に影響を与えます。

（3）画像サイズのリセットは避けてください。画像サイズのリセットとは、ページ、CSS、JavaScriptファイルなどで画像サイズを複数回リセットすることを指します。画像サイズを複数回リセットすると、画像が複数回再描画され、パフォーマンスに影響します。

（4）画像にDataURLを使用しないようにしてください。DataURL画像は画像圧縮アルゴリズムを使用しないため、ファイルが大きくなり、デコード後にレンダリングする必要があります。読み込みに時間がかかり、時間がかかります。

16.レンダリングを最適化する方法は？

具体的な方法は以下のとおりです。

（1）HTMLを介してビューポートメタタグを設定することにより、ビューポートは次のコードに示すようにページのレンダリングを高速化できます。
<meta name="viewport" content="width=device=width,initial-scale=1">
（2）DOMノードの数を減らすDOMノードが多すぎるとページのレンダリングに影響するため、DOMノードの数をできるだけ減らす必要があります。

（3）可能な限りCSS3アニメーションを使用し、setTimeoutの代わりにrequestAnimationFrameアニメーションを合理的に使用し、キャンバスアニメーションを適切に使用します（5要素未満のCSSアニメーション、および5要素を超えるキャンバスアニメーション（iOS 8ではwebGLを使用できます） ）。

（4）Touchmoveを高頻度のイベント用に最適化します。スクロールイベントは複数のレンダリングを引き起こす可能性があります。

requestAnimationFrameを使用してフレームの変更を監視し、正しい時間にレンダリングし、変更に応答する時間間隔を増やし、再描画の回数を減らします。

トリガーの数を減らすには、スロットリングモード（操作スロットリングまたは時間スロットリングに基づく）を使用します。

（5）GPUの速度を向上させ、CSSのプロパティ（CSS3トランジション、CSS3 3D変換、不透明度、キャンバス、WebGL、ビデオ）を使用してGPUレンダリングをトリガーします。

17. DNSキャッシュを設定するにはどうすればよいですか？

ブラウザのアドレスバーにURLを入力した後、ブラウザは最初にドメイン名（ホスト名）に対応するサーバーのIPアドレスを照会する必要があります。これには通常20〜120ミリ秒かかります。

DNSクエリが完了する前に、ブラウザはサーバーIPを認識できないため、データをダウンロードしません。パフォーマンスの考慮事項に基づいて、ISPオペレーター、LANルーター、オペレーティングシステム、およびクライアント（ブラウザー）はすべて、対応するDNSキャッシュメカニズムを備えています。

（1）IEは30分間キャッシュします。これは、レジストリのDnsCacheTimeoutアイテムを介して設定できます。

（2）Firefoxは1分間混合され、network.dnsCacheExpirationを介して構成されます。

（3）Chromeで、[設定]→[オプション]→[詳細オプション]を順番にクリックし、[プリフェッチされたDNSを使用してWebページの読み込み速度を向上させる]オプションをオンにして、キャッシュ時間を設定します。

18.リソースアクセスの失敗はいつ発生しますか？

開発プロセス中に、多くの開発者がアイコンを設定せず、サーバーのルートディレクトリにデフォルトのFavicon.icoが保存されなかったため、リクエスト404が表示されたことが判明しました。通常、アプリのWebビューでFavicon.icoを開きます。このFavicon.icoは読み込まれませんが、多くのページを共有できます。

ユーザーがブラウザでFavicon。icoを開くと、取得は失敗します。通常、アイコンがデフォルトで存在し、ファイルができるだけ小さく、キャッシュの有効期限が長くなるように設定してください。さらに、検出要求が失敗する原因となるキャッシュの有効期限が切れたリソースを迅速にクリーンアップする必要があります。

19. jQueryのパフォーマンスを最適化する方法は？

最適化の方法は次のとおりです。

（1）最新バージョンのjQueryライブラリを使用します。

JQueryライブラリの新しいバージョンはそれぞれ、以前のバージョンに対するバグといくつかの最適化を修正し、いくつかの革新も含まれるため、パフォーマンスを向上させるために最新バージョンのjQueryライブラリを使用することをお勧めします。ただし、バージョンを変更した後は、コードをテストすることを忘れないでください。結局のところ、完全な下位互換性がない場合があります。

（2）適切なセレクターを使用します。

jQueryは、非常に豊富なセレクターの選択肢を提供します。セレクターは、開発者が最も一般的に使用する関数ですが、異なるセレクターを使用すると、パフォーマンスの問題が発生する可能性もあります。iセレクター、クラスセレクターなどの単純なセレクターを使用し、iセレクターをネストしないことをお勧めします。

（3）jQueryオブジェクトを配列として使用します。

jQueryセレクターを使用して得られた結果はjQueryオブジェクトです。ただし、jQueryライブラリを使用すると、インデックスと長さが定義された配列を使用しているように感じることができます。パフォーマンスの観点から、コードを高速化するために、$。each（）の代わりに単純なforループまたはwhileループを使用することをお勧めします。

（4）すべてのJavaScriptイベント（クリック、マウスオーバーなど）は、親ノードにバブルアップします。同じコールバック関数を複数の要素にバインドする必要がある場合は、イベント委任モードを使用することをお勧めします。

（5）join（）を使用して文字列を連結します。

「+」を使用して文字列を連結する代わりに、join（）を使用して長い文字列を連結します。これは、特に長い文字列を処理する場合に、パフォーマンスを最適化するのに役立ちます。

（6）HTML5のdata属性を適切に使用します。

HTML5のdata属性は、データの挿入、特にフロントエンドとバックエンド間のデータ交換に役立ちます。jQueryのdata（）メソッドは、HTML5属性を効果的に使用してデータを自動的に取得できます。

20.モバイル端末のCSS3アニメーションエクスペリエンスを向上させる方法は何ですか？

（1）次のコードのように、3Dデフォーメーションを使用してGPUアクセラレーションをオンにするなど、ハードウェア機能を可能な限り使用します。

-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)；

CSSアニメーションプロパティはページ全体のリフロー、再描画、および再編成をトリガーするため、translate3dを介して500Xを右に移動する要素のアニメーションの流暢さは、leftプロパティを使用して達成されるアニメーションの移動よりも大幅に優れています。通常、ペイントは最もパフォーマンスを消費します。ペイントをトリガーするCSSアニメーションプロパティの使用はできるだけ避けてください。

アニメーションの実行中（通常はアニメーションの開始時）にちらつきがある場合は、次のように処理できます。

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;

（2）ボックスシャドウとグラデーションはできるだけ使用しないでください。特に要素で同時に使用する場合は、ページのパフォーマンスに深刻な影響を与えることがよくあります。

（3）次のコードに示すように、再配置を減らすために、アニメーション要素をドキュメントフローからできるだけ遠ざけます。

position:fixed；
position:absolute;