javascript - 明らかに時間のかかる js が本文の最後に記述されていますが、js がほぼロードされるまでページがレンダリングされる前に待機するのはなぜですか?

Question

最近、ページ内の css と js の位置がページの読み込みとパフォーマンスに与える影響について考えていました。また、いくつかのデモを作成しましたが、時間のかかる js を下部に配置するなど、いくつかの疑問点が見つかりました。ページの読み込みをブロックしないように本文のしかし、私が入力したデモは皆が言っていることと一致していないようです。具体的なコードは次のとおりです:

リーリー

6 つの P 要素が最初に表示され、アラート (str) が表示されるまで数秒待つのは当然です。しかし、結果はこのようにはなりません。このコードがいくつかのブラウザでどのように実行されるかを次に示します:
1 Chrome では、ローディング バーが回転するのを待ってからアラートが表示され、[OK] をクリックしてページをレンダリングします。
2.ie と Firefox では、ローディング バーが回転するのを待ってからページとアラートが表示されます。ほぼ同時に (アラート時には p 要素がすでに表示されているため、最初にページがレンダリングされてからアラートが表示される必要があります);

私が試したことは次のとおりです:

1. 本体に onload メソッドを追加します:

リーリー

結果に変化はありません;

2. window.onload メソッドを使用します:

リーリー

結果は同じで、変化はありません;

3. 外部接続メソッドとしてスクリプトを記述しますが、テスト結果は同じです (昨夜自宅で試しました。最初にページ要素がレンダリングされてから JS がロードされるようです。ただし、現時点では確認する方法がありません。ブラウザのせいなのかはわかりません。バージョンの問題);
添付ファイル: ブラウザごとに計算速度が異なると感じるのはなぜですか? Google で 5 億回のループには 10 秒かかりますFirefox では 6 秒しかかかりませんでした。よくわかりません

初めて質問させていただきますが、どうぞよろしくお願いします。0.0~ よろしくお願いします

Answer 1

上記のことは理にかなっています。for ループが CPU リソースを消費し、最初の画面の読み込みが遅くなるからです。
本文の下部にある script タグでも最初の画面が遅くなります。これは、ブラウザーが最初に対応する js ファイルを要求し、これにより限られた数の TCP リンク、帯域幅、さらには所要時間が占有されるためです。実行するために必要なCPU。

Answer 2

スクリプト タグが他のページ リソース ファイルのダウンロードをブロックするのを防ぎ、ページ関連リソースの読み込みを高速化するために、スクリプト タグは本文の下部に配置されます。
ただし、ページ全体のレンダリングは依然として script タグによって終了されるため、この例では、スクリプト操作が完了するまでページは空白のままになり、レンダリングされるまでページは表示されません。

あなたが示した例では、最初にページを表示してからスクリプトの計算を実行したい場合は、次のように setTimeout を使用してスクリプトを非同期的に実行できます。 リーリー

Answer 3

これは、CPU リソースを大量に消費し、ページのレンダリングにも CPU リソースが必要なためだと思います

この時間のかかる操作をIOに置き換えれば期待通りになると思います

追記: 空のときに試してみてください