JavaScript スクリプトファイルを HTML にロードする一般的な方法の概要-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript スクリプトファイルを HTML にロードする一般的な方法の概要

伊谢尔伦

Jul 21, 2017 pm 04:08 PM

htmljavascriptjs

ブラウザーが (埋め込まれた) <script> タグに遭遇した場合、現在のブラウザーは JavaScript がページのコンテンツを変更するかどうかを知る方法がありません。したがって、ブラウザーはこの時点でページの処理を停止し、最初に JavaScript コードを実行してから、ページの解析とレンダリングを続行します。 src 属性を使用して JavaScript (つまり、外部リンク JavaScript) を追加するプロセスでも同じ状況が発生します。ブラウザは、まず外部リンクファイル内のコードをダウンロードするのに時間を費やし、それからそれを解析して実行する必要があります。このプロセス中、ページのレンダリングとユーザーの操作は完全にブロックされます。 </script>

つまり、ブラウザが <script> タグ (インラインリンクか外部リンクか) を解析するたびに、ブラウザはタグ内の JavaScript コードのダウンロード、解析、実行を (単独で) 優先し、ダウンロードをブロックします。後続のすべてのページコンテンツのレンダリング。 </script>

方法 1: 従来のアプローチ

最も伝統的な方法は、head タグに <script> タグを挿入することです。 </script>

しかし、この従来のアプローチには重大なパフォーマンスの問題が隠されています。 <script> タグの特性に関する上記の説明によれば、この例では、ブラウザが <script> タグを解析すると、その後のコンテンツの解析を停止し、最初にスクリプトファイルをダウンロードすることがわかります。このコードは、後続の test.css スタイルファイルと <body> タグを読み込むことができないため、ページをレンダリングできないことを意味します。したがって、JavaScript コードが完全に実行されるまで、ページは空白になります。 </script>

<script type="text/javaScript" src="example.js"></script>

方法 2: 古典的なアプローチ

スクリプトの並列ダウンロードは IE8 以降のブラウザーに実装されていますが、一部のブラウザーでは (スクリプトファイルが

タグの最後に配置されている場合でも)、ページ内のスクリプトが引き続き次々に読み込まれます。したがって、次の方法が必要になります。それは、スクリプトを動的にロードすることです。

方法 3: 動的スクリプト

ドキュメントオブジェクトモデル (DOM) を使用すると、ページ上のほぼどこにでも作成できます。

<script type=&#39;text/javascript&#39;>
  var script = document.createElement(&#39;script&#39;);
  script.type = &#39;text/javaScript&#39;;
  script.src = &#39;file1.js&#39;;
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>

上記のコードは、外部リンク file1 の <script> タグを動的に作成し、それを <head> タグに追加します。このテクノロジーの重要な点は次のとおりです: </script>

いつダウンロードが開始されたとしても、ファイルのダウンロードと実行のプロセスは、ページ上の他のプロセス (スクリプトの読み込みを含む) をブロックしません。
しかし、この方法にも欠陥があります。このメソッドでロードされたスクリプトは、ダウンロードの完了後すぐに実行されます。つまり、複数のスクリプト間の実行順序は保証されません (Firefox と Opera を除く)。スクリプトが別のスクリプトに依存している場合、エラーが発生する可能性があります。たとえば、jQuery コードを作成するには、jQuery ライブラリをインポートする必要がありますが、作成した jQuery コードファイルが最初にダウンロードされ、すぐに実行される可能性があります。この時点で、ブラウザは「jQuery が存在しません」というエラーを報告します。「define」など、この時点では jQuery が定義されていないため、ライブラリはまだダウンロードされていません。そのため、次の改善が行われました:

<script type=&#39;text/javascript&#39;>
  function loadScript(url, callback) {
    var script = document.createElement(&#39;script&#39;);
    script.type = "text/javaScript";
    // IE和opera支持onreadystatechange
    // safari、chrome、opera支持onload
    if (script.readyState) {//IE
      script.onreadystatechange = function() {
        if (script.readyState == "loaded"
            || script.readyState == "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else {//其他浏览器
      script.onload = function() {
        callback();
      };
    }
    script.src = url;
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
  }
</script>

上記のコードの改善は、対応するスクリプトファイルがロードされた後に呼び出されるコールバック関数を追加することです。このようにして、順次ロードを実現できます。記述は次のようになります (file2 が file1 に依存し、file1 と file3 が互いに独立していると仮定します):

loadScript(‘file1.js&#39;,function(){ loadScript(‘file2.js&#39;,function(){}); }); loadScript(‘file3.js&#39;,function(){});

file2 は file1 がロードされた後にロードを開始し、file1 が確実にロードされるようにします。 file2 が実行される前に準備が完了しています。 File1 と file3 は並行してダウンロードされ、相互に影響しません。 loadScript 関数は十分に優れていますが、まだ不十分な点がいくつかあります。このコードを分析すると、loadScript 関数の順次ロードはスクリプトのロードをブロックすることによって実装されていることがわかります (上記の赤いテキストで指摘されているように)。私たちが本当に実現したいのは、スクリプトが同期的にダウンロードされ、対応する順序で実行されることです。つまり、並行してロードされ、順番に実行されます。

以上がJavaScript スクリプトファイルを HTML にロードする一般的な方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。