私の理解では、スクリプトを実行するために解析を停止する必要がないため、スクリプトはdeferedではなくasyncedにする必要があります（これらのグラフを使用しています）。解析を停止する必要がある場合、それはページコンテンツが正しく表示されるまでに時間がかかることを意味しますか？もしそうなら、なぜasyncこれまでよりも優れているのdeferでしょうか？
例：自分のサイトでGooglereCAPTCHAを使用しています。Googleから、終了</head>タグの直前にスクリプトを挿入するように求められました。
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
ページの読み込みが完了する前にこのスクリプトを実行する必要があるのはなぜですか？私はdeferそれをすべきではありませんか？
了解しました。インターネットを何時間も精査した後、ようやく答えが返ってきました。この素晴らしいブログ記事：
ASYNCでロードされたスクリプトは、リソースのダウンロードが完了するとすぐに解析および実行されます。一方、DEFERスクリプトは、HTMLドキュメントの解析が完了するまで実行されません（AKA、DOM Interactive、またはperformance.timing.domInteractive）。
..。
ASYNCウォーターフォールとDEFERウォーターフォールを比較すると、DEFERを使用すると、DOM Interactiveがより早く起動し、レンダリングをより迅速に進めることができることがわかります。
しかしながら：
ASYNCとDEFERはHTMLパーサーをブロックしませんが、レンダリングをブロックすることができます。これは、レンダリングが完了する前に解析および実行され、ブラウザーのメインスレッドを引き継ぐときに発生します。仕様には、レンダリングが完了するまで待たなければならないということは何もありません。
したがって、基本的に、これからの私の理解は、レンダリング（解析とある程度並行して発生しますが）はで高速deferになりますが、レンダリングプロセス全体ですべてのJavaScriptが実行されるため、最終的にはページの読み込みに同じくらいの時間がかかります。ユーザーは物事がより早く現れるのを見ることができるので、これはユーザーにとって少し満足のいくものです。ただし、本当に読み込み速度を向上させたい場合は、可能な場合は、読み込み後にスクリプトを読み込む必要があります。
結論：のasync代わりに使用する理由はないようですdefer。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加