5

High Performance Web Sites: Essential Knowledge for Front-End Engineersを読みましたが、著者はすべての JavaScript コードを外部化して、頭に置くのではなく、ページの下部に置くべきだと提案しています。

これは、次のに示されています。外部スクリプト タグは、ページのダウンロードとプログレッシブ レンダリングの両方をブロックするため解決はページの下部に配置することでした。

しかし、彼の 2 冊目の著書『Even Faster Web Sites: Performance Best Practices for Web Developers』では、インラインJavaScript タグについて語っています。

インライン スクリプトはページのダウンロードとレンダリングもブロックするため、インライン スクリプトもページの下部に移動することを提案しています。ただし、この例に示されているように、これはまだページのレンダリングを完全にブロックします。

外部スクリプトをページの下部に移動するとページが段階的にレンダリングされるのに、インライン スクリプトを移動するとスクリプトが実行されるまでレンダリングが完全にブロックされるのはなぜですか?


PS:

問題は、JavaScript をページの先頭ではなく、ページの下部に追加する理由ではありません。それは、下部のインライン スクリプトがレンダリングをブロックし、下部の外部スクリプトがレンダリングをブロックしない理由についてです。

4

1 に答える 1

8

インライン スクリプトでは、スクリプトの実行に時間がかかり、DOM が変更される可能性があります。変更中に DOM をレンダリングしようとすると、混乱の元になります。そのため、レンダリングは JS が停止した時点でのみ発生するため、DOM は安定しています。

外部スクリプトがダウンロードされるのを待っている間、スクリプトの実行は停止されるため、DOM を安全にレンダリングできます。ダウンロードした JS は、レンダリングが完了するまで実行されません。

于 2013-08-18T00:25:03.467 に答える