私は、非ブロッキング JavaScript の読み込みを少し試しています。つまり、 に小さな JavaScript スニペットを入れてhead
、実行時にすべての外部ファイルを読み込みます。さらに、CSS を非ブロッキングで読み込むように少し進めました。
私が見つけた記事は少し古くなっているようです。そのため、これらすべてがまだ関連性があるかどうかを知りたいのです。
まずスクリプトは次のようになります。
<script>
(function () {
var styles = JSON.parse(myObject.styles);
for( name in styles ){
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', styles[name]);
document.getElementsByTagName('head')[0].appendChild(link);
}
var scripts = JSON.parse(myObject.scripts);
for( name in scripts ){
var e = document.createElement('script');
e.src = scripts[name];
e.async = true;
document.getElementsByTagName('head')[0].appendChild(e);
}
}());
</script>
myObject.styles
ここでは、すべてのファイルのすべての URL を保持するオブジェクトです。
3 つのテストを実行しました。結果は次のとおりです。
通常設定
これは通常の設定であり、ヘッダーに 4 つの CSS ファイルがあり、ページの下部に 3 つの JS ファイルがあります。
今のところ、何もブロックしているものは見当たりません。すべてが同時に読み込まれているように見えます。
ノンブロッキングJS
ここで、これをもう少し進めるために、js ファイルのみを非ブロッキングにしました。これは上記のスクリプトで行います。突然、css ファイルがロードをブロックしていることがわかります。最初の例では何もブロックしていないので、これは奇妙です。なぜ CSS が突然読み込みをブロックするのでしょうか?
すべてがノンブロッキング
最後に、すべての外部ファイルが非ブロッキング方式でロードされるテストを実行しました。これで、最初の方法との違いはわかりません。どちらも同じように見えます。
結論
私の結論としては、ファイルはすでに非ブロッキング方式でロードされているので、特別なスクリプトを追加する必要はないと思います。
それとも、何か見逃しているのでしょうか?
もっと:
- 記事:http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
- 質問:Javascript の非ブロッキング スクリプトの場合、すべてのスクリプトを </body> タグの前に置くだけでよいのではないでしょうか。
- 質問:最近のブラウザでは並列ダウンロードが制限されていますか?
- コード:http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
- コード:http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/
ベストアンサー1
はい、今日のブラウザでは、参照されたファイルは非ブロッキング方式で読み込まれます。ただし、違いもあります。
- 青いバーのタイミングからわかるように、動的ロードに「待つ必要のないもの」を配置すると、準備イベントがより早く表示されます。そのため、ページ内のアクションがより早く開始される可能性があります。
- ページ内のテキストから読み込まれるスクリプト (動的読み込みとは対照的に) は、順番に実行されます。そのため、読み込みに時間がかかるスクリプトがある場合、スクリプトは互いに待機する必要があります。一方、動的に読み込まれるスクリプトは、
.async=false
スクリプト要素に配置されていない限り、できるだけ早く実行されます。
したがって、現代のブラウザでは、違いは意味的なものだけです (静的ロードは古い順次的な方法をシミュレートし、動的ロードはより並列的です)。