JavaScript の読み込みのベスト プラクティス_JavaScript のヒント

相信很多与页面打过交道的同学都对 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生。而这 35 条最佳实践中，对 Javascript 的加载顺序的要求是：Put Scripts at the Bottom。因为根据 HTTP/1.1 specification 看来，在同一时间加载两个文件是最理想的，而 Javascript 脚本会阻碍平行下载。Steve 说那是 2008 – 2009 那个时代用的。现在，加载 Javascript 已经有了革命性的化变。

在开讲之前，有一个必须解决的问题是：为什么我们要把 JS 文件放在 之前的最底部。根本原因是，它不能平行下载。而其实并不是所有浏览器都不支持。现在大部分浏览器都支持 Script 的平行下载，除了老掉牙的 IE6&7、Firefox 2&3.0、 Safari 3、Chrome 1。但我们最熟悉的老掉牙同学 IE6 （或以IE为核的那些壳）还是中国（甚至世界上）市场上占用率最高的浏览器，因此我们需要一个折衷的方案。

一、分析

我们有6种方法可以实现平行（NON-Blocking）下载：

• XHR Eval – 用 XHR 下载，并 eval() 执行 responseText.。
• XHR Injection – 用 XHR 下载，在页面中动态创建一个 script 元素，并将 responseText 作为其 text 。
• Script in Iframe – 把脚本放在 HTML 中，使用 ifame  来下载它。
• Script DOM Element – 动态创建一个 script 元素，把 src 指向脚本URL.
• Script Defer – 给 script 标添加 defer 属性
• document.write Script Tag – 利用 document.write 把 <script src=""> 添加到 HTML 中。但这个只对 IE 有效。

兼容性可看下图：

Technique	Parallel Downloads	Differ	Existing Scripts	Busy Indicators	Ensures Order	Size (bytes)
XHR Eval	IE, FF, Saf, Chr, Op	no	no	Saf, Chr	-	~500
XHR Injection	IE, FF, Saf, Chr, Op	no	yes	Saf, Chr	-	~500
Script in Iframe	IE, FF, Saf, Chr, Op	no	no	IE, FF, Saf, Chr	-	~50
Script DOM Element	IE, FF, Saf, Chr, Op	yes	yes	FF, Saf, Chr	FF, Op	~200
Script Defer	IE, Saf4, Chr2, FF3.1	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~50
document.write Script Tag	IE, Saf4, Chr2, Op	yes	yes	IE, FF, Saf, Chr, Op	IE, FF, Saf, Chr, Op	~100

2.計画

どのソリューションを使用する必要がありますか?それはすべてあなた自身のニーズ次第です。この図は、いつどの方法を使用するかを示しています:

全体的には、Script DOM Element の方が優れたソリューションです。 NCZ のブログでは、現在最高のテクノロジーは次のとおりであると述べています:

1. 2 つの JavaScript ファイルを作成します。最初のファイルには、JavaScript を動的にダウンロードするためのコードのみが提供され、2 番目のファイルには、ページに必要な他のすべてのスクリプトのファイルが含まれています。
2. <script> のように、ページ本文 ( の前の ) に最初のファイルが導入されます。
3. 2 番目の 创建第二个 <script><script> を作成して、2 番目の Javascript ファイルとその他の初期化コードをダウンロードする関数を実行します。

3. 実装コード

上記のテクノロジーに基づいています。 NCZ では、2 番目のファイルを動的にロードするために、最初のファイルには対応するコードのみを含めることをお勧めします。

コードをコピー コードは次のとおりです。 :

functionloadScript(url, callback){

var script = document.createElement("script")
script.type = "text/javascript"; >
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "ロード済み" ||
script.readyState == "complete ") {
script.onreadystatechange = null;
callback();
}
};
} else { //その他
script.onload = function(){
コールバック();
}

script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);


次に、ページ内でこれを行うことができます:

コードをコピーします コードは次のとおりです。 script type="text/ javascript">

loadScript("http://your.cdn.com/second.js", function(){

//コードを初期化します
}); 🎜>


HTML5 では、async 属性を使用できます。この HTML 属性は、ノンブロッキング ダウンロード テクノロジに必要なことを正確に実行します。現在サポートされているブラウザはそれほど多くありませんが（Firefox 3.6 だけのようですか？）、並行してダウンロードする必要がある Javascript (計画によると、通常は最初の JS ファイル) にこの属性を追加しても、サポートされていない他のブラウザには影響しません。ブラウザでのご利用をお勧めします。

コードをコピー

コードは次のとおりです: 4. 練習YUI3 の Loader は NCZ のメソッドを使用します。そしてアリペイで。私たちも同様のアプローチを使用しました。ここで簡単にお話しましょう。

コードをコピー

コードは次のとおりです:
🎜>

使用する場合は、Loader.use() を使用してコードの動的な読み込みを実装します。もちろん、動的ロードだけでなく、特定のキャッシュメカニズムもあります。関連するコンボ サービス テクノロジを確認することをお勧めします。現在、Alipay フロントエンド アーキテクチャ チームのスタッフはこの分野である程度の進歩を遂げています (テスト レポートによれば、速度は非常に良好で、適切な時期にオープンソース化される可能性があります)。

5. 概要
フロントエンドのパフォーマンスの最適化。他にもできることはたくさんあります。そして、HTML5 テクノロジーの出現と Javascript テクノロジーの継続的な革新により、期待できることはさらにあると思います。フロントエンドさん、さあ、今後はあなたが主導すべきことがたくさんあります。

参照:

1. ブロックせずにスクリプトをロードする
2. 外部 JavaScript をロードする最良の方法
3. スクリプト読み込みの進化
4. ノンブロッキング スクリプトとは何ですか?
5. HTML5 – スクリプト: 非同期属性