ホームページ > 記事 > ウェブフロントエンド > JavaScript の最適化トピック: 読み込みと実行loading と running_javascript のスキル
JavaScript の最適化トピック: 読み込みと実行loading と running_javascript のスキル
- WBOYオリジナル
- 2016-05-16 15:19:101003ブラウズ
ブラウザにおける JavaScript のパフォーマンスは、開発者が直面する最も重要なユーザビリティの問題と考えられます。この問題は、JavaScript のブロック的な性質によってさらに悪化します。つまり、JavaScript の実行中はブラウザーが他の処理を行うことができません。実際、ほとんどのブラウザーは 1 つのプロセスを使用して UI の更新や JavaScript の実行などの複数のタスクを処理し、同時に実行できるタスクは 1 つだけです。
JavaScript の実行時間と、ブラウザーがアイドル状態になってユーザー入力に応答するまでの待機時間。
基本的なレベルでは、これは 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグの存在により、ページ全体がスクリプトの解析と実行を待機することを意味します。実際の JavaScript コードがインラインであるか、無関係な外部ファイルに含まれているかに関係なく、ページのダウンロードと解析のプロセスは停止し、スクリプトがこの処理を完了するまで待ってから続行する必要があります。スクリプトは実行中にページのコンテンツを変更する可能性があるため、これはページのライフサイクルの重要な部分です。
典型的な例は、document.write() 関数です。次に例を示します。
<html> <head> <title>Script Example</title> </head> <body> <p> <script type=”text/javascript”> document.write(“The date is ” + (new Date()).toDateString()); </script> </p> </body> </html>
上記の HTML ページのように、ブラウザーが 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグに遭遇した場合、JavaScript が e388a4556c0f65e1904146cc1a846bee タグにコンテンツを追加するかどうかを予測することはできません。したがって、ブラウザは停止し、この JavaScript コードを実行し、ページの解析と翻訳を続行します。 src 属性を使用して JavaScript をロードするときにも同じことが起こります。ブラウザーはまず外部ファイルのコードをダウンロードする必要がありますが、これには時間がかかり、次にこのコードを解析して実行します。このプロセス中、ページの解析とユーザーの操作は完全にブロックされます。
HTML 4 のドキュメントでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは HTML ドキュメントの 93f0f5c25f18dab9d176bd4f6de5d30e タグまたは 6c04bd5ca3fcae76e30b72ad730ca86d タグ内に複数回出現できると記載されています。従来、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは外部 JavaScript ファイルをロードするために使用されます。このようなコードに加えて、93f0f5c25f18dab9d176bd4f6de5d30e セクションには、外部 CSS ファイルやその他のページ ミドルウェアを読み込むための 2cdf5bf648cf2f33323966d7f58a7f3f タグも含まれています。つまり、ページの外観と動作が正しくなるように、スタイルと動作が依存する部分をまとめて最初にロードする方が良いということです。例:
<html> <head> <title>Script Example</title> <– Example of inefficient script positioning –> <script type=”text/javascript” src=”file1.js”></script> <script type=”text/javascript” src=”file2.js”></script> <script type=”text/javascript” src=”file3.js”></script> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <p>Hello world!</p> </body> </html>
このコードは無害に見えますが、パフォーマンス上の問題があります。93f0f5c25f18dab9d176bd4f6de5d30e セクションに 3 つの JavaScript ファイルが読み込まれています。各 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグはページの解析プロセスをブロックするため、外部 JavaScript コードが完全にダウンロードされて実行されるまで、ページの処理を続行できません。ユーザーは、この知覚される遅延を許容する必要があります。
ブラウザは 6c04bd5ca3fcae76e30b72ad730ca86d タグに遭遇するまでページのどの部分もレンダリングしないことに注意してください。この方法でスクリプトをページの上部に配置すると、顕著な遅延が発生します。これは通常、ページが開くと最初に空白のページが表示され、ユーザーはページを読んだり操作したりできなくなります。 🎜>
Internet Explorer 8、Firefox 3.5、Safari 4、および Chrome 2 では、JavaScript ファイルを並行してダウンロードできます。これは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグが外部リソースをダウンロードするときに、他の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグをブロックする必要がないことを意味します。残念ながら、JavaScript のダウンロードは他のリソースのダウンロード プロセスをブロックします。スクリプト間のダウンロード プロセスが相互にブロックされない場合でも、ページは続行する前にすべての JavaScript コードがダウンロードされて実行されるまで待つ必要があります。そのため、ブラウザーは並列ダウンロードを許可することでパフォーマンスを向上させましたが、問題は完全には解決されておらず、スクリプトのブロックは依然として問題でした。スクリプトは他のページ リソースのダウンロード プロセスをブロックするため、すべての 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグをできるだけ 6c04bd5ca3fcae76e30b72ad730ca86d タグの最後に配置して、全体のダウンロードへの影響を最小限に抑えることをお勧めします。ページ。例:
<html> <head> <title>Script Example</title> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <p>Hello world!</p> <– Example of recommended script positioning –> <script type=”text/javascript” src=”file1.js”></script> <script type=”text/javascript” src=”file2.js”></script> <script type=”text/javascript” src=”file3.js”></script> </body> </html>
上記は、JavaScript 最適化コンテンツの読み込みと実行に関する概要です。皆様の学習に役立つことを願っています。