、延期と非同期
私たちは、スクリプトタグを使用し、2があり、性能、JSファイルのダウンロード実行順序関連のプロパティ：延期と非同期
- 的含义【摘自延期https://developer.mozilla.org/En/HTML/Element/Script】ブール属性はスクリプトは文書が解析された後に実行されることを意図していることをブラウザに指示するように設定されている-この。
- 非同期含义【摘自的https://developer.mozilla.org/En/HTML/Element/Scriptブラウザは、可能な場合は、非同期的にスクリプトを実行する必要があることを示すために】--setこのブール属性。
1、延期を
延期するために、我々は状況について考え始めることができます。Nの連鎖外のページのスクリプトがある場合は、ページのレンダリングをブロックするスクリプトをロードするときに、頭の上に、そして、それは多くの場合、空白と言われています。シンプルな開発環境では、我々は大丈夫変更のソースコード内の外部スクリプトの場所と同じくらい長いかもしれません。あなたは、フロントエンドの同僚の同僚を開発する背景には、スクリプトの位置を調整したい場合でも、より多くの洗練された開発環境で、あなたは、通信コストや開発コストの多くを費やすことがあります。私たちは、このプロパティを延期することができます。
スクリプトはそこでも頭の上に、プロパティを延期追加した場合、それはページの一番下のスクリプトに似ている、完成された実行HTMLページの解析の後に移動します。
2.非同期
非同期のためには、HTML5これは、ページがロードされているため、その役割は、スクリプトがブロックされてロードされませんロードし、非同期スクリプトを実行することができる、新しいプロパティです。一度直ちに実行されますにロードされました。それ非同期、それは何の違いで延期？
非同期とマークされたスクリプトを延期は、HTMLの構文解析をダウンロードすることがすぐに一時停止し、両方を実行するために初期化スクリプトのニーズに対応するためのonloadイベントコールバックをサポートしていません。
実行するときに前記差が異なっています。
非同期スクリプトは、スクリプトファイルのダウンロードが完了した直後に実行され、loadイベントがトリガされる前に、それは一定の時間ウィンドウを実行します。これは、複数の非同期スクリプトの実行は、おそらく順序のページで出現の順序に従っていないことを意味します。
一方、ブラウザが複数のスクリプトは、彼らがHTMLページ順の実行、およびDOM解析の完了のための実行タイミングで表示される順番を延期することを保証し、前DOMContentLoadedイベントが発生する文書。
ロードされたリソースの残りの部分をブロックせずにロードするためのリソースを待つことになる、それはページには影響しません、のプロパティ非同期そこの状況を見てみましょう、と同じことを延期します。しかし、一つのことは、おそらく元の順序の実行に応じていないので、そこの非同期は、一度ダウンロードしたJSの状況下で、うまく実行することに留意すべきです。フロントとリアのJSに依存し、非同期である場合、それは非常に可能性が間違っています。
この記事では、非同期と延期の類似点と相違点をまとめました。
非同期とスクリプトを延期両方がパーサを一時停止することなく、すぐにダウンロードして、スクリプトに依存して初期化を実行するための一般的な必要性に対処するために、オプションのonloadハンドラをサポート両方を開始します。非同期およびスクリプトが実行されたときの周りのセンターを延期するとの違い。各非同期スクリプトは、それがダウンロードが終了した後、最初の機会に、ウィンドウのloadイベントの前に実行されます。これは、非同期のスクリプトが、彼らはページ内で発生した順序で実行されていない可能性が（そしておそらく）であることを意味します。延期スクリプトは、他の一方で、彼らはページで発生した順序で実行されることが保証されています。その実行は、解析が完全に終了した後に開始しますが、ドキュメントのDOMContentLoadedイベントの前に。
上記に基づき、私は、実際の使用状況に基づいて延期と非同期のどの機能まとめました。
同じポイント：
- ファイルをロードするときに、ページのレンダリングがブロックされていません
- インラインのスクリプトが無効です
- あなたはdocument.writeをメソッドスクリプトは、これらの二つの属性を使用して呼び出すことはできません
- スクリプトonloadイベントのコールバックがあります。
違いのポイント：
- 定義された延期のHTML4.0 HTMLバージョン; html5.0定義された非同期
- ブラウザ
特徴 クロム Firefoxの（のGecko） IE オペラ サファリ 基本的なサポート 1.0 1.0（1.7またはそれ以前） サポートされています サポートされています サポートされています 非同期属性 サポートされています 3.6（1.9.2） 10 - 3.6（1.9.2） 属性を延期 3.6（1.9.2） 3.5（1.9.1） 4 - 3.6（1.9.2）
Webkitのベースのブラウザの新しいバージョンに加えて、Firefoxは長い時間のために延期とのonload属性をサポートしてきた、とFF3.6から非同期属性を追加し始めました。IEはまた、プロパティを延期サポートしていますが、最初から非同期属性、IE9をサポートしていない、のonloadプロパティもサポートされます。
- 実行時
ダウンロードがそれ完了直後に属性非同期各スクリプトが実行され、それは、ウィンドウのloadイベントの前に実行されます。スクリプトの実行順序の場合があるので、混乱しているように見えることがあり
各スクリプトは、実行の元の順序に従って、ページが完了した後にプロパティが解決される延期、それはDOMContentLoadedの文書の前に実行されます
これらの属性を使用して選択することができる3つの可能なモードがあります。非同期属性が存在する場合、スクリプトはすぐにそれが利用可能であるとして、非同期で実行されます。非同期属性が存在しないが、延期の属性が存在する場合は、ページが構文解析を終了したときに、そのスクリプトが実行されます。どちらの属性が存在する場合、ユーザーエージェントがページを解析続行する前に、スクリプトは、フェッチされ、すぐに実行されます。
単にこれら二つの属性が可能3を持って使用して、置きます
- 非同期がtrueの場合、ダウンロードが完了した後、スクリプトを非同期に実行します。
- 非同期がfalseの場合、trueに延期ページのレンダリングが完了した後、そのスクリプトが実行されます。
- 非同期および延期の両方がfalseの場合、スクリプトはページを解析し、ページの解析には、すぐにダウンロードして実行を停止しました
- 最後に、関係なく、延期またはasync属性、あなたがマージない、などのファイルが遅延読み込みできるファイル、間の依存関係を持っているJS最初のファイルのページの並べ替えに必要な、少し個人的な助言を与えるとスプリットjsのコードポイントは、その後のページによると、これらの二つの属性を使用する必要があります。
4、考慮事項とページの最適化を延期
プラスページの前に等しい延期同等window.onloadで実行、中に完全にあるが、アプリケーションはwindow.onloadよりも柔軟です！
スクリプトは強力な機能である延期「陰の英雄」。これは、スクリプトのセクションには、すぐに実装を必要とせずにコードが含まれ、かつ、SRC属性と一緒に使用、それはこれらのスクリプトをバックグラウンドでダウンロードされ、フォアグラウンドコンテンツは、通常、ユーザーに表示されていることを確認することができ、ブラウザに指示します。
-しかし、文書がロードされ、その後、スクリプトを実行されます
：1つの一般的な方法は、パフォーマンスを最適化することで、すぐに実行するために必要なスクリプトは、「延期」属性<SCRIPT>タグを設定したとき。（ロードプロセスが機能ブロックで実行されますので、すぐにスクリプトが含まれていません。）「延期」属性を設定した後、IEがロード完了し、スクリプトを実行するのを待つ必要はありません。だから、ページがより速くロードします。一般的に、それはまた、機能、最高のは、すぐにスクリプト機能ブロックを配置することを示しているとのonloadドキュメントオブジェクトや体を処理します。いくつかのスクリプトでは、ユーザの操作に依存する必要がある場合----ボタンのクリックなどを行って、またはプロパティを使用することは非常に便利----領域にマウスを移動。しかし、いくつかのスクリプトは、ページのロードまたはロード実行が完了する必要がある、プロパティを使用するメリットはあまりを延期しませ導出しました。
延期属性のデフォルトスクリプトの下の偽です。延期プロパティの説明にDHTMLプログラミングの本によると、それはこのように書かれている：
ブラウザで解析する必要がないため、設計時に属性で使用すると、ページのダウンロードのパフォーマンスに向上させることができますし、スクリプトで実行し、ページでのダウンロードと解析を続けることができます代わりに。
言い換えれば、あなたは属性を延期するために追加のスクリプトを記述する場合、ブラウザが即座に処理スクリプトをダウンロードしますが、ページのダウンロードに続く、解決する必要はありません、これはダウンロードのパフォーマンスが向上します。
多くのそのようなケースがあります。たとえば、あなたはjavascriptの変数の多くを定義する、またはスクリプト参照の多くを書く（の.inc）ファイルは、対処する必要があり、パフォーマンスは確かに役立ちます改善、これらのスクリプトに延期プロパティに参加することを望むかもしれません。
<スクリプト言語= "javascriptの"延期> のvarオブジェクト= 新しいオブジェクト（）; .... </ SCRIPT>
延期の属性を宣言した後、我々はそれ以外の場合は、スクリプトエラーにつながる、変数のスクリプトブロック延期引用し、他の変数があるかどうかを判断する必要があります。
二つの点に注意してください：
1、のdocument.writeが直接出力を持つことになりますので、スクリプトブロック延期タイプでのdocument.writeコマンドを呼び出すことはありません。
図2は、また、任意のグローバル変数を含むか、または直ちに延期型スクリプトブロックで使用されるスクリプトを実行するために機能しません。
================説明：ゴージャスな分割ライン===============
IEの下で仕事を提供znxdsのために、私はFFとIE6、IE7、IE8以下のための比較をしました
Firefoxでは、延期には影響をインラインない;外ページの下部を延期実行されます。
IE8.0では、インラインおよび外側延期底に遅延が延期の他の非JS行の後に行われる、アクティブであります
状況IE7.0、IE8.0と一貫
頭部または身体に区別するために、インラインJSを延期に関してはIE6.0、。延期インラインjsが体内の顔に頭の中で優先され、身体の終了前に実行される体内のインラインJSを延期します。について外JSを延期、それは最後のページの実装のままです。
ブラウザの様々な外jsの一貫した性能を延期、見ることができ、頭と体の順序は同じではありません、IE6で特別なインラインJSを延期、IE7とIE8は、Firefoxでページのエグゼクティブ一番下まで遅延されます無効。
二、JavaScriptの実行順序
JSの実行順序は、実質的に順序は彼らがHTMLで表示されますが、いくつかのマイナーな変更があります。
- 最初の<HEAD>タグのJSを実行し、内部または外部の二本鎖形成するかどうか、出現の順に行われます。
- そして、スクリプト実行体、外側の列<html>タグまで。
- 次に、スクリプトで延期=「延期」を行います。（IEテスト支援、クロームとFirefoxが両方のブラウザで延期属性をサポートしていない、注文が通常のスクリプトセクションとして実行されます）。
- 最後に、実行本体のonload方法B（）。
説明：JavaScriptの実行エンジンにはないラインによってライン分析とプログラムの実施を、しかしの期間実施される分析。そして、分析を実行するためのコードの同じ部分に、タイプの機能文の定義が優先され、抽出されます。関数定義の実装後に、他のコードが順に実行されます。
例1
<スクリプト> VARハロー= 関数（）{ アラート（ 'こんにちは、zhangsan' ）; } ハロー（）; // 最初の呼び出し、出力が"こんにちは、zhangsan" VARハロー= 関数（）{ アラート（「こんにちは、リージ" ）; } こんにちは（）; // 2回目の呼び出し、出力"こんにちは、リージ" <スクリプト>
例2
<スクリプトタイプ= "テキスト/ JavaScriptを">
関数ハロー（）{
アラート（ 'こんにちは、zhangsan' ）;
}
ハロー（）; //最初の呼び出し、出力こんにちは、リシの
機能ハロー（）{
アラート（「こんにちは、リージ" ）;
}
こんにちは（）; // 2番目の呼び出し、出力こんにちは、リージ
</ SCRIPT>
二つの呼び出しが出力と同じ内容の「Hello、リージ」。同じ文が同じ名前の2の関数である、それを呼び出すなぜ、結果は同じではないでしょうか？
これは、JavaScriptの実行順序によるものです。JavaScriptの実行エンジンが実行さ段落分析によるライン分析と実装プログラムが、段落によって行をしません。しかし、また同じコードの実装の分析では、スタイルの関数の文の定義は（JS関数は最初の市民である）、常に優先され、抽出されます。関数定義の実装後に、他のコードが順に実行されます。こんにちは、最初の文は、機能コードを定義する関数の最初の呼び出しは、第2の機能定義文コードカバレッジされており、これは実施例2における理由の最初の呼び出しのハローされる前には、あろうあります定義された関数の内容を出力背後にある理由。
例3
<スクリプトタイプ= "テキスト/ JavaScriptを">
関数ハロー（）{
アラート（ 'こんにちは、zhangsan' ）;
}
ハロー（）; // 最初の呼び出し、出力こんにちは、zhangsan
</ SCRIPT>
<SCRIPT> 関数ハロー（ ）{
アラート（ 'こんにちは、リシ' ）;
}
ハロー（）; // 2番目の呼び出し、出力こんにちは、リシ
</ SCRIPT>
これは、互いに独立して、二つの異なるコードセグメントに二度呼ばれます。
参考：
ます。https：//www.cnblogs.com/JoannaQ/p/3518339.htmlで再現