ブラウザーでの JavaScript のパフォーマンスは、開発者が直面する最も重要なユーザビリティの問題となっています。この問題は、JavaScript のブロック的な性質によって複雑になります。つまり、ブラウザーが JavaScript コードを実行している間は、同時に他のことを行うことができません。この記事では、JavaScript コードを適切にロードして実行し、ブラウザーでのパフォーマンスを向上させる方法について詳しく説明します。
概要
現在の JavaScript コードが埋め込まれているか、外部リンク ファイルに埋め込まれているかに関係なく、ページのダウンロードとレンダリングは停止し、スクリプトの実行が完了するまで待つ必要があります。 JavaScript の実行プロセスに時間がかかるほど、ブラウザがユーザー入力に応答するまでの待ち時間も長くなります。スクリプトのダウンロードおよび実行時にブラウザがブロックされる理由は、スクリプトによってページまたは JavaScript の名前空間が変更され、後続のページのコンテンツに影響を与える可能性があるためです。典型的な例は、ページで document.write() を使用することです。
JavaScript コードのインライン例
<html> <head> <title>Source Example</title> </head> <body> <p> <script type="text/javascript"> document.write("Today is " + (new Date()).toDateString()); </script> </p> </body> </html>
ブラウザーが