[]でJavaScriptスクリプトタグ延期と非同期

A、非同期と定義延期

非同期の彼らの定義を見て、それを延期、望遠鏡リトルレッドブックを回すので、の紹介です

1.1延期

この属性を使用すると、スクリプトが実装でページの構造に影響を与えないであろうことを示しています。ページ全体を実行する前に、完全に解析されるまで、つまり、スクリプトが遅延されます。そのため、中に<script>設定要素延期プロパティ、すぐにダウンロードするには、ブラウザを伝えるのと同等、しかし、遅延実行。

HTML5仕様のスクリプトは、第1の遅延スクリプトは、最初に第2の遅延スクリプトが実行されますので、彼らが表示される順序で実行され、両方のスクリプト前にDOMContentLoaded実行イベント。実際には、スクリプトは必ずしもでは必ずしも、順序の実施を遅らせないであろうDOMContentLoad、トリガ前に、実行時間、それが唯一の遅延スクリプトを含めるのがベストです。

DOMContentLoadedイベントがMDNを読むことができます理解していない、と>>>プレゼンテーション詳細な例がある[DOMContentLoaded]（https：//でデveloper.mozilla.org/zh-CN/docs/Web/API/Document/DOMContentLoaded_event）

1.2非同期

このプロパティは、deferスクリプトの動作を変更するために使用されているプロセスと同様。同様にdefer類似し、asyncそれは外部スクリプトファイルにのみ適用され、すぐにファイルをダウンロードするには、ブラウザに指示します。しかし、defer違いは次のようにマークされているasyncスクリプトは、その順序に従って実行を保証するものではありません。

2番目のスクリプトファイルは、最初のスクリプトファイルの前に実行することができます。だから、確認し、両者の間の非常に重要な依存しません。指定asyncプロパティの目的は、ページが非同期で他のコンテンツをロードされているので、ダウンロードのページを待つと2つのスクリプトを実行することではありません。

要約すると、これら2つのプロパティがスクリプトタグは、非同期読み込みが発生しますが、実行のタイミングは同じではありません。segmentfault答え上のマップを参照
ここに画像を挿入説明
ブルーラインは、ネットワークの読み取りを表し、赤い線は、おそらくすべてのスクリプトのため、実行時間を表し、緑の線は、HTML構文解析HTML灰色の線がブロック時間、状態をレンダリングするかもしれないすべてのshow DOMを表し;

それはasync順不同であり、そしてdeferまた決定順序の実装async比較分析は、Baiduのか、Googleに他のライブラリのスクリプトに依存しないこのタイプの分析を適用します。図から通常見ることができ<script>、負荷を構文解析ラベルが同期され、私たちは多くの場合、どうなるかであるDOMのレンダリング、ブロックすることができ<script>、書き込み<body>に延長によって引き起こされたリソースのロードを防ぐために、下の理由の一つに黒と白の、もう一つの理由は、そのJSのDOM操作であるかもしれないので、前にすべてのDOM完成レンダリングを実行します。

1.3は本当にケースですか？

しかし、この図（サーチとほぼ唯一の答えは）厳格ではない、これが唯一のケース仕様で、ほとんどのブラウザは、最適化の実現に説明します。

↓それがどのように行われるかで見クロム

「WebKitの技術インサイダー」：

ユーザーがWebページのURLを入力すると、WebKitがそのリソースローダ負荷URLに対応するページを呼び出します。
ロード・モジュールは、ネットワーク接続が要求を送信し、確立し、応答を受信さに依存しています。
WebKitの受信されたデータや各種Webリソースは、いくつかのリソースは、同期または非同期取得してもよいです。
HTMLページは、一連の単語（トークン）にインタプリタに引き渡されました。
建設インタプリタノード（ノード）の言葉、形成されたDOMツリー。
ノードは、JavaScriptコードの場合は、JavaScriptエンジンが解釈して実行を呼び出します。
JavaScriptコードは、DOMツリーの構造を変更することがあります。
そのような画像、CSS、ビデオ、などの他のリソースに依存するノードの必要性は、それらをロードするために、リソース・ローダを呼び出す場合、彼らは非同期であり、かつ妨げる現在のDOMツリーの作成を続行しません。それは、JavaScriptのリソースURLである場合（非同期にマークされていません）、あなたが作成したJavaScriptのリソースJavaScriptエンジンの負荷まで、現在のDOMツリーの作成を停止し、DOMツリーの後に実行を継続する必要があります。

だから、人気の用語は、クロムのブラウザは、HTML文書を要求する最初のだろう、それが遭遇するまで、リソース・ローダ非同期ネットワーク要求は、DOMは、同じレンダリング時間を適切なリソースを呼び出す<script>ラベルは、メインプロセスが停止しますときこのリソースを待ってレンダリングロードされ、その後、その後、DOMの解析を進める、パースJSにV8エンジンを呼び出します。レート場合、私は理解してasyncプロパティがロードされ、実行分離するために別のプロセスを開くことと等価であり、deferであり、され<script>に配置され<body>、同じ効果の底。

第二に、実験的な状況として、

2.1デモ

テストに我々が持っている上記の結論を検証するために、

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
        <link href="http://cdn.staticfile.org/foundation/6.0.1/css/foundation.css" rel="stylesheet">
        <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.js"></script>
    	<script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore.js"></script>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    </head>
    <body>
        ul>li{这是第$个节点}*1000
    </body>
    </html>

簡単なデモは、各CDN、1000年李を作成し、本体から2ヶ月CSS3 JSを挙げています。これは、リソースと、タイムラインを確認クロム外用を調整することにより、追加の関連する特性を意味します。

配置2.2 `<head>`以内

ここに画像を挿入説明
非同期リソースのロードが、ブロックされる<body>レンダリングはすぐにスクリプトを実行するためには、黒と白になります

配置された2.3 `<body>`の底

ここに画像を挿入説明
以下のような資源の非同期読み込み、<body>コンテンツのレンダリングが完了し、JSの実行順序をロードされています

2.4に配置された`<head>`ヘッドと使用します`async`

ここに画像を挿入説明
リソースの非同期ロード、および完成ローディングは誰が速い人で、すぐに実装するためのリソースをJS、そしてないようにすべき

2.5に配置され`<head>`、ヘッドと使用します`defer`

ここに画像を挿入説明
その後、JSのDOMレンダリング後の実行順序後のリソースの非同期読み込み、

2.6が中に配置される`<head>`ヘッドと使用`async`と`defer`

ここに画像を挿入説明
パフォーマンスとasync一貫性のある、交換位置に、脳内でこれら2つの属性が穴を開け、カバレッジFOUNDの効果を確認する必要はありませんが、一貫しています= =

要約すると、WebKitのエンジンは、推奨される方法はにまだある<script>で書き込み<body>下、あなたはBaiduのGoogleアナリティクスまたは全くニンニクや他の独立したライブラリを使用する必要がある場合は使用することができますasyncあなたの場合は、プロパティを<script>ラベルに書かれなければならない<head>頭中古延期プロパティすることができ

第三に、互換性

caniuseでは、asyncIEで<= 9は、他のブラウザのOKをサポートしていません。deferIE <9のサポートではなく、バグが存在します=、他のブラウザのOK;現象がこの問題で説明されて、お薦めの「望遠鏡」であります一つだけdeferの理由。だから、両方の属性をするために指定されasyncた時間を有効にサポートされていないdeferが、deferいくつかのケースでは、まだバグがあります。

延期の属性は、サポート延期（とない非同期）が代わりにデフォルトで同期ブロッキング行動の延期行動にフォールバックすることを原因レガシーWebブラウザに、非同期属性が指定されている場合でも指定することができます。

結論

asyncチェーンのみに適用され、非同期実行スクリプトの規定は
-ダウンロードページの解析をブロックしていません
-外観の順序で実行されることはありません、最初のダウンロードは、最初に実行される完了です
-時間の実行、それが可能に解析されていないページです
deferスクリプトの規定の実施を遅らせ、チェーンのみに適用される
ページの解析をブロックしない-
完了後DOMContentLoaded HTML構文解析の前に実行を-
-出現順に実行されます

実際、いわば、最も安全な方法はにある、<script>で書き込み<body>下、互換性の問題が存在しない、無黒と白の問題、何の実行順序の問題はありませんが、いずれにも従事していない、後ろに座るとリラックスdeferしてasync〜花友人

@傘

公開された134元の記事・ウォン称賛80 ・ビュー30000 +

プライベートの手紙の懸念