フロントエンドのパフォーマンスに対するサードパーティスクリプトの影響

サードパーティのスクリプトは、ページの読み込み速度を大幅に遅くし、メインスレッドの負担を増加させ、最初の画面の遅延、ゆっくりと相互作用の応答、サーバー要求の増加、詰まりのレンダリングを行います。 1.同期読み込みスクリプトはページレンダリングをブロックし、空白のページ表示を引き起こします。 2。サードパーティのスクリプトは、追加のリクエストをトリガーし、ページレンダリングをさらに遅らせることができます。 3.スクリプトの品質は制御できないため、互換性の問題やサービスの失敗がページ機能に影響を与える可能性があります。緩和策には、非同期の荷重を非同期読み込みまたは延期し、非批判的なスクリプトの読み込みの遅延、薄いスクリプトリソースのマージ、定期的にスクリプトのパフォーマンスの監視、タイムアウトの読み込みとダウングレード戦略の設定、合理的なトレードオフと技術的最適化によるパフォーマンスの損失の削減が含まれます。

特にページの読み込み速度とユーザーエクスペリエンスの点で、フロントエンドのパフォーマンスに対するサードパーティスクリプトの影響を過小評価することはできません。それらは豊富な機能とデータ分析機能をもたらしますが、多くの場合、パフォーマンスのボトルネックになります。

サードパーティのスクリプトは、ページの読み込みを遅くします

最も明らかな問題は、サードパーティのスクリプトがページの負荷時間を大幅に増加させることです。広告、統計ツール、ソーシャルメディアプラグインなどは、追加のJavaScriptファイルを導入する場合があります。これらのファイルはダウンロードする必要があるだけでなく、貴重なメインスレッドリソースを占有して、解析および実行する必要もあります。
たとえば、ページに複数の追跡スクリプトが埋め込まれている場合、各スクリプトの平均サイズは100kbの場合、全体的な読み込み時間は大幅に増加します。さらに悪いことに、一部のスクリプトは追加のネットワークリクエストをトリガーし、ページレンダリングをさらに遅くします。

一般的な効果は次のとおりです。

• ホーム画面上のコンテンツの表示が遅れました
• ユーザーインタラクションの応答が遅くなります
• サーバー要求の負担を増やします

スクリプトブロックレンダリングプロセス

多くのサードパーティスクリプトはデフォルトで同期してロードされます。つまり、ブラウザは、ページのレンダリングを続ける前にこれらのスクリプトをダウンロードして実行するのを待つ必要があります。この「ブロッキングレンダリング」動作により、すべてのキースクリプト処理が完了するまで、ユーザーは空白ページを表示できます。
典型的な例は、いくつかの広告アライアンスによって提供されるJSスニペットです。これは、 <script src="..."></script>デフォルトで直接ページのヘッドに直接使用し、ページ全体を数秒間貼り付けます。

この問題を軽減する方法は次のとおりです。

• asyncまたはdefer属性を使用して非同期にスクリプトをロードします
• 非批判的なスクリプトの怠zyなロード
• スクリプトをマージまたは合理化します

サードパーティの依存は不確実性をもたらします

サードパーティのスクリプトの品質と安定性を完全に制御することはできません。一部のサービスプロバイダーは、スクリプトコンテンツを更新して、予期しない互換性の問題やメモリリークをもたらす場合があります。さらに、サードパーティのサービスが失敗した場合、ページ全体の機能をドラッグすることもあります。
たとえば、ソーシャル共有ボタンのCDNは一時的に利用できません。これにより、ページ内の関連する関数が失敗し、他のモジュールの通常の動作に影響を与えるJavaScriptエラーさえ引き起こします。

リスクを減らすために、次の測定値をとることができます。

• サードパーティのスクリプトのパフォーマンスを定期的に監視します
• ロードタイムアウトメカニズムを設定します
• 代替またはダウングレード戦略

マイナスの影響を減らす方法

サードパーティのスクリプトによって引き起こされるパフォーマンスの損失を最適化する鍵は、合理的な選択と技術的手段を組み合わせることです。すべてのスクリプトをロードする必要はなく、すべてのスクリプトをすぐに実行する必要もありません。
たとえば、最初に不必要なスクリプトまたは低価格のスクリプトを削除してから、残りのスクリプトを怠zyまたは条件付きでロードできます。さらに、Webワーカーを使用していくつかの非UI操作を実行すると、メインスレッドへの圧力も軽減できます。

基本的にそれだけです。サードパーティのスクリプトの数と読み込み方法を制御すると、ページの全体的なパフォーマンスを効果的に改善できます。

以上がフロントエンドのパフォーマンスに対するサードパーティスクリプトの影響の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。