スクリプトの読み込みを最適化するために既存のリソースを評価していますが、このような記事をいくつか読んだところ、この順次スクリプトの読み込みフェーズが完了するまで、古いブラウザーは他のダウンロードをブロックすることが言及されています。候補としてModernizr(yepnope.js)、headjs、ControlJsを確認。しかし、最新のブラウザーで並列スクリプトをロードするためにこのツールを使用する必要はありますか?
2 に答える
デフォルトでは、今日のほとんどのブラウザは実際にスクリプトを並行してロードすると思います。ただし、ブラウザはデフォルトではスクリプトを並行して実行しません。たとえば、次のコードでは、スクリプトが並列にロードされます。この画像では、Fast1.jsとFast2.jsの読み込みが非常に高速であることがわかりますが、ブラウザーコンソールの時間に基づくと、Fast2.jsはFast1.jsの実行から3秒後に実行されます。
また、覚えておくべき他のことは、ファイルの順序が違いを生む可能性があるということです。Backbone.jsファイルはunderscore.jsファイルに依存しています。これらのファイルの順序を変更した場合、bacbone.jsはunderscore.jsの前にあり、エラーが発生します。
<html >
<head>
<title></title>
<script src="scripts/fast1.js" type="text/javascript"></script>
<script src="scripts/libs/jquery-1.8.3.js" type="text/javascript"></script>
<script src="scripts/libs/underscore.js" type="text/javascript"></script>
<script src="scripts/libs/backbone.js" type="text/javascript"></script>
<script src="scripts/fast2.js" type="text/javascript"></script>
</head>
<body>
Hello
<script type="text/javascript">
console.log("html: " + Date());
</script>
<img src="imgs/bImg.png" />
</body>
</html>
JavaScriptファイルFast1.jsおよびFast2.jsのコードは次のとおりです。
console.log("Fast 1: " + Date())
スクリプトの読み込みには、Require.jsを使用します。また、コードを個々のファイルにあるモジュールに編成するという利点もあります。
これが私がブラウザスクリプトの読み込みについて作成したブログ投稿です:ブラウザスクリプトの読み込み
スクリプトの読み込みに関する記事は次のとおりです。
ほとんどのブラウザはそれらを順番にロードします。ただし、タグに付けて別の方法でロードasync
できる属性があります。script
MDN は、script
タグが非常にうまく機能することを説明しています。
https://developer.mozilla.org/en-US/docs/HTML/Element/Script