defer 属性を使用した外部ライブラリの最適化: ページ速度の向上

Web サイトを構築するとき、開発者は機能を強化するために外部ライブラリに依存することがよくあります。これらのライブラリは不可欠ですが、各外部スクリプトには追加の HTTP リクエストが必要であり、その解析、評価、実行によりページ上のメイン コンテンツのレンダリングがブロックされる可能性があるため、パフォーマンスに影響を与える可能性があります。これらのスクリプトがレンダリング プロセスをブロックしないように、開発者は外部スクリプトをリンクするときに async または defer 属性を使用できます。

延期の役割
defer 属性により、HTML 解析が完了するまでスクリプトが実行されなくなります。これは、ページの最初のレンダリングを高速化するのに役立ちます。ただし、遅延外部ライブラリを使用すると、特定の機能 (スライダー、カルーセル、アニメーションの初期化など) が期待どおりに実行できない場合があります。これは、遅延スクリプト内のコードは HTML が完全に解析された後にのみ実行されるため発生しますが、必要な外部ライブラリが時間内に利用できない場合があります。

DOMContentLoaded とロード イベントを理解する
外部ライブラリに依存するカスタム コードが正しく実行されるようにするには、コードが実行されるタイミングを慎重に管理する必要があります。 2 つの JavaScript イベントは、遅延スクリプトを処理する場合に特に役立ちます

DOMContentLoaded: このイベントは、スタイルシート、画像、またはその他の外部リソースのロードを待たずに、最初の HTML ドキュメントが完全にロードおよび解析されたときに発生します。これは、コードが準備ができている DOM 構造にのみ依存する場合に便利です。

document.addEventListener('DOMContentLoaded', function() { 
// Initialize your script once the DOM is fully parsed 

console.log("DOM is ready, but external resources might still be loading."); 
});

load: スタイルシート、画像、外部スクリプトなどのすべての依存リソースを含むページ全体が完全に読み込まれると、load イベントが発生します。このイベントにより、コードを実行する前に、必要な外部リソースがすべて利用可能であることが保証されます。

window.addEventListener('load', function() { 
// Execute code when the entire page and resources are loaded 

console.log("All resources including external scripts are fully loaded."); 
});

<script defer src="https://example.com"></script>
<script defer src="https://example2.com"></script>
<script>
    // Wait for the entire page, including scripts, to load
    window.addEventListener('load', function() {
        // Initialize example2 library with predefined configuration after all resources are fully loaded
        example2(somePredefinedConfig).functionCall();
    });
</script>

以上がdefer 属性を使用した外部ライブラリの最適化: ページ速度の向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。