すぐに、すべてのJSファイルが最小化され、圧縮形式で送信されることを受け入れることを提案します。
次のようないくつかのソリューションがあります。
-ページにスタイルとスクリプトを直接配置します。
-スクリプトタグに非同期/遅延属性を設定します。
-すべてのスクリプトを1つのファイルに接着します。
-スクリプトリンクを本文の最後に配置します。
-すべてのファイルをCDN /異なるホストに配置します。
-あなたのオプション...
これらのソリューションは、サイト自体の構築方法に応じてそれぞれ良くも悪くも機能しますが、以下で説明するいくつかの欠点があります。
ページを最初に表示する前に一時停止の問題を解決すると同時に、利便性を追加する興味深い手法があります。 この手法は多くの人にとって馴染みのあるものであることを提案しようと思いますが、それにもかかわらず、ここではそれについて言及していません。
もちろん、すべては、私が1つのプロジェクトを取り上げたという事実から始まりました。ある時点で、単純なページが長時間ロードされ、ロードスケジュールとYSlowの結果を見たように思えました。 火は一瞬消えましたが、何がもっと良いのかを知って、私は登って見ました、
上記の方法の欠点を分析しましょう。
ページにスクリプトとスタイルを直接配置する
明らかに、このソリューションは、スタイルスクリプトが多くない小さなページにのみ適しています。これは、ページのリロードが発生すると、静的データがリロードされ、キャッシュが機能しない可能性があるためです。 このソリューションは、ページが読み込まれた瞬間から非常に重要な小さなスクリプトとスタイルに適しています。
スクリプトタグへの非同期/遅延属性の設定
仕様はこちらです。
スクリプトタグのasyncおよびdefer属性は、RuNetで特に重要なOperaだけでなく、古いブラウザーを使用するユーザーがアクセスできるサイトを作成するユーザーにとっては不十分と思われる次の ブラウザーでサポートされています 。
欠点の中でも、defer属性を持つタグからロードされたスクリプトはdocument.writeを使用できないことに注意してください。スクリプトの実行はページパーサーと同期されないためです。
結合スクリプトとスタイル
興味深いメモ （注意、英語）と、1つの大きなファイルをダウンロードする場合は、別々のファイルを並行してロードするよりも時間がかかることがあるというテストがあります。 ただし、この手法は言及と人生に値するだけでなく、サイトの異なるページが同じスクリプトまたはスタイルのセットを使用する場合の使用にも非常に適しています。
スタイルシートを頭に置き、スクリプトを本文の最後に置く
言及して使用する価値はありますが、この場合、上記のようにdocument.readyまではスクリプト間に未解決の依存関係が存在する可能性があり、プラグインを使用するjQueryの場合、これはFacebook APIライブラリをロードするときのオプションまたはVKontakte、すぐにスクリプトを実行します。これは、ユーザーがログインしているかどうかを判断するAPIリクエストを送信します。
CDNからダウンロード
CDNを使用すると、自分のサーバーの負荷を減らすことができますが、CDNサーバーへの攻撃やプロバイダーまたはエンタープライズネットワーク上のCDNサーバーのブロックのように、ダウンロード時間を増やしたり減らしたり、スクリプトの読み込みを完全にブロックできます。
他にどのようなソリューションがありますか？
ページの読み込み中にスクリプトをダウンロードしようとするが実行はせず、ページが最初に表示されるのをブロックしないように、読み込まれるまでスクリプトであることをブラウザから隠す場合はどうすればよいですか？
ノートのどこかでHeadJSを見つけましたが、最初につまずいたので、それは真剣に成熟しており、必要なことだけでなく、もっと多くのことをすることを学びました。 ライブラリは明らかに優れており、縮小された形式では3 KBしかかからないという事実にもかかわらず、私は代替を探すことにし、14もの類似のライブラリを見つけました。 このノートではload.jsとinclude.jsに加えて、簡単で必ずしも正しくない比較を見つけました。 提示されたライブラリをざっと見て、最初に大きなライブラリ（> 3KB）に注目し、次に構文または操作の原則のために気に入らなかったライブラリに注目して、私は個人的にModerneprの一部であるYepNope.jsを選択しました 。 ライブラリの作成者は、ライブラリは他のライブラリよりも優れていることも悪くもないこと、他のライブラリと同じタスクを実行すること、および異なるプロジェクトで他のローダーを使用することを報告しています。
したがって、リソースローダーはYepNopeの例で何をどのように行いますか：
<script src='/javascripts/yepnope-min.js'> yepnope('/javascripts/jquery.min.js', '/javascripts/jquery.loadmask.min.js', '/javascripts/jquery.jgrowl_minimized.js']) </script>
ロードされたスクリプトの実行は、指定された順序で進行します。
初期化ブロックでさらに：
yepnope({ load: ['//connect.facebook.net/ru_RU/all.js', '/javascripts/facebook_auth_callback.js'], complete: function(){ FB.init({appId: '273684999999999', xfbml: true, cookie: true, oauth: true}) FB.Event.subscribe('auth.statusChange', facebook_auth) } })
そのため、並列読み込み、特定のスクリプトランタイム、依存関係、準備完了コールバックなど、必要なすべてのバンを取得します。
スタイルの読み込みの例：
yepnope(['/stylesheets/jquery.loadmask.css', '/stylesheets/jquery.jgrowl.css'])
YepNopeやその他のダウンローダーには多くの追加機能もあります。このトピックの説明は適切ではありませんが、それらは説明に適しているため、誰もが自分で何かを選択する必要があります。
スクリプト作成者は、操作とAPIの統一された原則に達することができず、これまでにないダウンローダーを作成し続けることができます。 この点で、HeadJSの作成者は、ブート順序のサポートを仕様に統合することを提案し、$ script.jsの作成者はこれをサポートしますが、これまでは仕様を通過し、すべてのブラウザーで同じように動作するため、ブートローダーを使用する必要があります。
最終的なレシピは何ですか？
-ページの先頭にローダーを指すスクリプトを埋め込みます。
-ローダーを使用して他のスクリプトとスタイルをロードするインラインスクリプトを埋め込みます。
-一緒にのみ使用されるスクリプトとスタイルを1つに組み合わせて、HTTP要求の数を最小限にします。
-スクリプトとスタイルを最小化します。
-サーバーが送信データをgzipでパックしていることを確認してください。
-サーバーが正しくキャッシュすることを確認してください。
-サードパーティのCDNと追加のホストを慎重かつ思慮深く使用します。
トピックを書くとき、私は次の資料に目を向けました。
[1]。 JavaScriptイベントシーケンス
[2]。 yepnope.jsを使用した単純なスクリプトの読み込み
[3]。 yepnope.jsの説明
[4]。 $ script.jsの説明
UPD。
sHinEからさまざまなブートローダーをより完全なリストと比較する別の表。
YepNope の説明の S2nek ロシア語翻訳から。