HTML 5のscriptのasync属性
3358 ワード
HTML4.01のscriptラベルプロパティ
HTML4.01 scriptラベルには、5つのプロパティが定義されています.
charsetはオプションです.srcがコードを導入する文字セットを指定します.ほとんどのブラウザはこの値を無視します.
deferはオプションです.遅延スクリプトの実行は、scriptラベルをページbodyラベルの下部に入れることに相当します.IEと比較的新しいバージョンのFirefoxを除き、他のブラウザではサポートされていません.
languageは廃棄されました.ほとんどのブラウザでは、この値は無視されます.
srcはオプションです.接尾辞名を制限せずに導入する外部コードファイルを指定します.
type必須.スクリプトのコンテンツタイプ(MIMEタイプ)を指定します.現実的には通常この値を指定しなくてもいいですが、ブラウザはデフォルトでtext/javascriptタイプとして実行を説明します.
HTML 5のscriptプロパティ
scriptタグはHTML 5にHTML 5の標準属性を備える以外はHTML 4と同じである.01はlanguageプロパティを削除するよりもtypeプロパティをオプション(デフォルトtext/javascript)に変更し、プロパティasyncを追加しました.
asyncプロパティの役割
スクリプトが非同期で実行されるかどうか、trueまたはfalseの値を指定します.
asyncがtrueとして指定されている場合、スクリプトはページレンダリング表示中に解析実行されます(ブラウザはスクリプトが使用可能かどうかを判断します).これは興味深い機能であり、実用的な機能です.
今のscriptはどうですか?
1、headタグに入れます.scriptが導入した外部スクリプトをダウンロードする場合、ブラウザがブロックされている場合、ネットワークが悪い場合、またはscriptファイルが大きすぎる場合、ページが空白になって停止している場合、体験は十分ではありません.
2、ページの下部に入れます.これは、フロントエンドのページのパフォーマンスと体験を向上させる方法として公認されていますが、ページの下部に置かれているスクリプトは、ページドキュメントストリームのダウンロードが完了するまでダウンロード、実行されず、ページ内のインタラクションには遅延時間があります.ページ表示時間は短くなりましたが、インタラクションは遅延されました.体験も足りない.
3、必要に応じて実行する.ヘッダーラベルに一部の共通スクリプトを導入し、インタラクティブなHTML要素が必要なたびにscriptを挿入してすぐに実行し、特定の条件が必要なスクリプトをページの一番下に配置します.これも完璧な解決策ではありません.1つのページにscriptラベルが挿入されすぎてメンテナンスが不便になります.2つ目は、下部のスクリプトがロードされていないときにユーザーが条件をトリガーしたらどうすればいいですか.実現する方法はあるが、体験はまだよくない.
asyncプロパティをサポートしてから何が変わりましたか?
asyncプロパティは、上記の問題を解決します.これにより、headラベルにscriptを挿入し、スクリプトをドキュメントと同時にダウンロードし、スクリプト、ドキュメントが使用可能な場合に実行できます.
asyncとdefer
HTML 5マニュアルの解釈を抜粋して、よく理解します.
変更は往々にして時宜に合わないものを捨てることを意味し、ユーザーの新しい需要を満たす機能を増やすことを意味し、HTML 5の多くの新しい特性は期待され、新しいインストールwindows 7によるIEバージョンの向上に伴い、IE 6が倒れた時点からあまり遠くなくなり、未来のブラウザがIEの天下であるかどうかは言えない.
参考資料:
http://developer.yahoo.com/performance/rules.html#js_bottom
http://www.w3school.com.cn/html5/html5_script.asp
http://www.w3.org/TR/html4/interact/scripts.html
http://www.w3.org/TR/2010/WD-html5-20101019/scripting-1.html#script
http://www.csser.com/board/4f3f516e38a5ebc978000514
HTML4.01 scriptラベルには、5つのプロパティが定義されています.
charsetはオプションです.srcがコードを導入する文字セットを指定します.ほとんどのブラウザはこの値を無視します.
deferはオプションです.遅延スクリプトの実行は、scriptラベルをページbodyラベルの下部に入れることに相当します.IEと比較的新しいバージョンのFirefoxを除き、他のブラウザではサポートされていません.
languageは廃棄されました.ほとんどのブラウザでは、この値は無視されます.
srcはオプションです.接尾辞名を制限せずに導入する外部コードファイルを指定します.
type必須.スクリプトのコンテンツタイプ(MIMEタイプ)を指定します.現実的には通常この値を指定しなくてもいいですが、ブラウザはデフォルトでtext/javascriptタイプとして実行を説明します.
HTML 5のscriptプロパティ
scriptタグはHTML 5にHTML 5の標準属性を備える以外はHTML 4と同じである.01はlanguageプロパティを削除するよりもtypeプロパティをオプション(デフォルトtext/javascript)に変更し、プロパティasyncを追加しました.
asyncプロパティの役割
スクリプトが非同期で実行されるかどうか、trueまたはfalseの値を指定します.
asyncがtrueとして指定されている場合、スクリプトはページレンダリング表示中に解析実行されます(ブラウザはスクリプトが使用可能かどうかを判断します).これは興味深い機能であり、実用的な機能です.
今のscriptはどうですか?
1、headタグに入れます.scriptが導入した外部スクリプトをダウンロードする場合、ブラウザがブロックされている場合、ネットワークが悪い場合、またはscriptファイルが大きすぎる場合、ページが空白になって停止している場合、体験は十分ではありません.
2、ページの下部に入れます.これは、フロントエンドのページのパフォーマンスと体験を向上させる方法として公認されていますが、ページの下部に置かれているスクリプトは、ページドキュメントストリームのダウンロードが完了するまでダウンロード、実行されず、ページ内のインタラクションには遅延時間があります.ページ表示時間は短くなりましたが、インタラクションは遅延されました.体験も足りない.
3、必要に応じて実行する.ヘッダーラベルに一部の共通スクリプトを導入し、インタラクティブなHTML要素が必要なたびにscriptを挿入してすぐに実行し、特定の条件が必要なスクリプトをページの一番下に配置します.これも完璧な解決策ではありません.1つのページにscriptラベルが挿入されすぎてメンテナンスが不便になります.2つ目は、下部のスクリプトがロードされていないときにユーザーが条件をトリガーしたらどうすればいいですか.実現する方法はあるが、体験はまだよくない.
asyncプロパティをサポートしてから何が変わりましたか?
asyncプロパティは、上記の問題を解決します.これにより、headラベルにscriptを挿入し、スクリプトをドキュメントと同時にダウンロードし、スクリプト、ドキュメントが使用可能な場合に実行できます.
asyncとdefer
HTML 5マニュアルの解釈を抜粋して、よく理解します.
async true， ， 。 async false， defer true， 。 async defer false， ， 。変更は往々にして時宜に合わないものを捨てることを意味し、ユーザーの新しい需要を満たす機能を増やすことを意味し、HTML 5の多くの新しい特性は期待され、新しいインストールwindows 7によるIEバージョンの向上に伴い、IE 6が倒れた時点からあまり遠くなくなり、未来のブラウザがIEの天下であるかどうかは言えない.
参考資料:
http://developer.yahoo.com/performance/rules.html#js_bottom
http://www.w3school.com.cn/html5/html5_script.asp
http://www.w3.org/TR/html4/interact/scripts.html
http://www.w3.org/TR/2010/WD-html5-20101019/scripting-1.html#script
http://www.csser.com/board/4f3f516e38a5ebc978000514