IE6/7では、JavaScriptは2つの側面からのページのレンダリングを妨げます。
スクリプトタグの下にあるWebページリソースは、スクリプトがロードされる前に要求とダウンロードを停止します。
スクリプトタグの下のHTML要素は、スクリプトがロードされる前にレンダリングを停止します。
IE6/7 Firefox2/3 Safari3 Chrome1およびOperaでは、スクリプトタグがダウンロードを妨げます。
スクリプトはIE8、SAFARI4、およびCHROME2の下で同時に行うことができますが、他のリソースのダウンロードを妨げます。
他のリソースと並行してスクリプトをダウンロードする6つの方法があります。
1.xhr eval- xhr(xmlhttprequestオブジェクト)からスクリプトをダウンロードし、evalメソッドを使用してxhrのresponseTextを実行します
2.XHRインジェクション - XHRを介してスクリプトをダウンロードし、スクリプトタグを作成してドキュメント(ボディまたはヘッドタグ)に挿入し、スクリプトタグのテキスト属性をXHRのresponsetTextの値に設定します
iframeの3.xhr-スクリプトタグをiframeに入れて、iframeからダウンロードしてください
4.Script Dom Element-スクリプトタグを作成し、そのSRC属性をスクリプトアドレスに指します
5.Script Defer-スクリプトタグの延期属性を追加します。これはIEでのみ有効ですが、Firefox3.1はこの属性もサポートしています。
6。document.writeメソッドを使用して、ページに<スクリプトsrc = "">を記述します。これはIEでのみ有効です。
各メソッドの使用例をCuzillionから表示できます。
外部スクリプトが実行された後に実行する必要があるインラインスクリプトがいくつかある場合、それらを同期する必要があります。 「カップリング」と呼ばれる、カップリング非同期スクリプトこの記事では、現在「カップリング」を実装できるいくつかの方法を紹介します。
headjsは、JSが同時にダウンロードできるようにすることができます(ただし、順次実行):http://headjs.com/
コードコピーは次のとおりです。
head.js( "/path/to/jquery.js"、 "/google/analytics.js"、 "/js/site.js"、function(){
//すべて完了
});
//最も単純なケース。ブロックせずに単一のスクリプトをロードおよび実行します。
head.js( "/path/to/file.js");
//スクリプトをロードして、ロードされた後に関数を実行します
head.js( "/path/to/file.js"、function(){
});
//ファイルを並行してロードしますが、順番にファイルを実行します
head.js( "file1.js"、 "file2.js"、... "filen.js");
//すべてのスクリプトがロードされた後、関数を実行します
head.js( "file1.js"、 "file2.js"、function(){
});
//ファイルは並列にロードされ、到着するために実行されます
head.js( "file1.js");
head.js( "file2.js");
head.js( "file3.js");
//前のものは次のように書くこともできます
head.js( "file1.js")。js( "file1.js")。js( "file3.js");