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