JavaScript の最適化トピック: 読み込みと実行loading と running_javascript のスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript の最適化トピック: 読み込みと実行loading と running_javascript のスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

javascript最適化負荷走る

ブラウザにおける JavaScript のパフォーマンスは、開発者が直面する最も重要なユーザビリティの問題と考えられます。この問題は、JavaScript のブロック的な性質によってさらに悪化します。つまり、JavaScript の実行中はブラウザーが他の処理を行うことができません。実際、ほとんどのブラウザーは 1 つのプロセスを使用して UI の更新や JavaScript の実行などの複数のタスクを処理し、同時に実行できるタスクは 1 つだけです。

JavaScript の実行時間と、ブラウザーがアイドル状態になってユーザー入力に応答するまでの待機時間。

基本的なレベルでは、これは <script> タグの存在により、ページ全体がスクリプトの解析と実行を待機することを意味します。実際の JavaScript コードがインラインであるか、無関係な外部ファイルに含まれているかに関係なく、ページのダウンロードと解析のプロセスは停止し、スクリプトがこの処理を完了するまで待ってから続行する必要があります。スクリプトは実行中にページのコンテンツを変更する可能性があるため、これはページのライフサイクルの重要な部分です。 </script>

典型的な例は、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 ページのように、ブラウザーが <script> タグに遭遇した場合、JavaScript が <p> タグにコンテンツを追加するかどうかを予測することはできません。したがって、ブラウザは停止し、この JavaScript コードを実行し、ページの解析と翻訳を続行します。 src 属性を使用して JavaScript をロードするときにも同じことが起こります。ブラウザーはまず外部ファイルのコードをダウンロードする必要がありますが、これには時間がかかり、次にこのコードを解析して実行します。このプロセス中、ページの解析とユーザーの操作は完全にブロックされます。 </script>

HTML 4 のドキュメントでは、<script> タグは HTML ドキュメントの <head> タグまたは <body> タグ内に複数回出現できると記載されています。従来、<script> タグは外部 JavaScript ファイルをロードするために使用されます。このようなコードに加えて、<head> セクションには、外部 CSS ファイルやその他のページミドルウェアを読み込むための <link> タグも含まれています。つまり、ページの外観と動作が正しくなるように、スタイルと動作が依存する部分をまとめて最初にロードする方が良いということです。例: </script>

<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>

このコードは無害に見えますが、パフォーマンス上の問題があります。

セクションに 3 つの JavaScript ファイルが読み込まれています。各 <script> タグはページの解析プロセスをブロックするため、外部 JavaScript コードが完全にダウンロードされて実行されるまで、ページの処理を続行できません。ユーザーは、この知覚される遅延を許容する必要があります。 <p>ブラウザは <body> タグに遭遇するまでページのどの部分もレンダリングしないことに注意してください。この方法でスクリプトをページの上部に配置すると、顕著な遅延が発生します。これは通常、ページが開くと最初に空白のページが表示され、ユーザーはページを読んだり操作したりできなくなります。 🎜> Internet Explorer 8、Firefox 3.5、Safari 4、および Chrome 2 では、JavaScript ファイルを並行してダウンロードできます。これは、<script> タグが外部リソースをダウンロードするときに、他の <script> タグをブロックする必要がないことを意味します。残念ながら、JavaScript のダウンロードは他のリソースのダウンロードプロセスをブロックします。スクリプト間のダウンロードプロセスが相互にブロックされない場合でも、ページは続行する前にすべての JavaScript コードがダウンロードされて実行されるまで待つ必要があります。そのため、ブラウザーは並列ダウンロードを許可することでパフォーマンスを向上させましたが、問題は完全には解決されておらず、スクリプトのブロックは依然として問題でした。 <p> スクリプトは他のページリソースのダウンロードプロセスをブロックするため、すべての <script> タグをできるだけ <body> タグの最後に配置して、全体のダウンロードへの影響を最小限に抑えることをお勧めします。ページ。例: <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> <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> </pre> このコードは、HTML ファイル内の <script> タグの推奨場所を示しています。スクリプトのダウンロードは相互にブロックしますが、ページはダウンロードされてユーザーの目の前に表示されており、ページに入る速度はそれほど遅いようには見えません。 <p> 上記は、JavaScript 最適化コンテンツの読み込みと実行に関する概要です。皆様の学習に役立つことを願っています。 <p></script>

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript：ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

See all articles