最新のブラウザでの非ブロッキング JavaScript と CSS。まだ必要ですか? 質問する

最新のブラウザでの非ブロッキング JavaScript と CSS。まだ必要ですか? 質問する

私は、非ブロッキング 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 つのテストを実行しました。結果は次のとおりです。

通常設定

ヘッダーに CSS、下部に JavaScript を含むページをロードします

これは通常の設定であり、ヘッダーに 4 つの CSS ファイルがあり、ページの下部に 3 つの JS ファイルがあります。

今のところ、何もブロックしているものは見当たりません。すべてが同時に読み込まれているように見えます。

ノンブロッキングJS

非ブロッキングJavaScriptによるページ読み込み

ここで、これをもう少し進めるために、js ファイルのみを非ブロッキングにしました。これは上記のスクリプトで行います。突然、css ファイルがロードをブロックしていることがわかります。最初の例では何もブロックしていないので、これは奇妙です。なぜ CSS が突然読み込みをブロックするのでしょうか?

すべてがノンブロッキング

すべてがブロックされないページ読み込み

最後に、すべての外部ファイルが非ブロッキング方式でロードされるテストを実行しました。これで、最初の方法との違いはわかりません。どちらも同じように見えます。

結論

私の結論としては、ファイルはすでに非ブロッキング方式でロードされているので、特別なスクリプトを追加する必要はないと思います。

それとも、何か見逃しているのでしょうか?

もっと:

ベストアンサー1

はい、今日のブラウザでは、参照されたファイルは非ブロッキング方式で読み込まれます。ただし、違いもあります。

  • 青いバーのタイミングからわかるように、動的ロードに「待つ必要のないもの」を配置すると、準備イベントがより早く表示されます。そのため、ページ内のアクションがより早く開始される可能性があります。
  • ページ内のテキストから読み込まれるスクリプト (動的読み込みとは対照的に) は、順番に実行されます。そのため、読み込みに時間がかかるスクリプトがある場合、スクリプトは互いに待機する必要があります。一方、動的に読み込まれるスクリプトは、.async=falseスクリプト要素に配置されていない限り、できるだけ早く実行されます。

したがって、現代のブラウザでは、違いは意味的なものだけです (静的ロードは古い順次的な方法をシミュレートし、動的ロードはより並列的です)。

おすすめ記事