Javascript読み込みの解析-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Javascript読み込みの解析

不言

Jul 11, 2018 am 10:36 AM

この記事では、主に Javascript の読み込みの分析を紹介します。これは、必要な友達に参考にしてもらいます

(1) 同期読み込み

。 Web ページでは、ブラウザが js ファイルをロードする方法は <script> タグを使用します。以下に示すように、 <p><pre class='brush:php;toolbar:false;'>//内嵌脚本 <script type="text/javacript"> // code here! </script> //加载外部脚本 <script type="text/javascript src="path/demo.js"></script></pre><strong><script> タグを追加すると、ブラウザはそれを読み取って実行できます。ただし、ブラウザは、<script> タグを次の順序で読み取ります。その結果、複数のファイルが相互に依存している場合は、依存関係が最も小さいファイルが先頭に配置され、依存関係が最も大きいファイルが最後に配置される必要があります。そうでない場合、コードはエラーを報告します。私はブートストラップを使用する際にこのことをよく知っていると思います。一方、ブラウザは同期モードで <script> タグを読み込みます。つまり、ページは後続のコードを実行する前に JavaScript ファイルが読み込まれるのを待ちます。 <script> タグが多数ある場合、ブラウザはそれらを同時に読み取ることができず、1 つを読み取ってからもう 1 つを読み取らなければならないため、読み取り時間が大幅に長くなり、ページの応答が遅くなり、ユーザーエクスペリエンスが低下します。影響を受ける。同期モードはブロッキングモードとも呼ばれ、ブラウザによる後続の処理を禁止し、現在の読み込みが完了した場合にのみ次のステップを実行できるため、デフォルトでは同期実行が安全です。ただし、js内でドキュメント内容の出力やDOMの変更、リダイレクトなどの動作があるとブロッキングの原因となります。したがって、一般的には、ページのブロックを軽減できる <body> の最後に <script> タグを配置することをお勧めします。 <p> (2) 非同期読み込み<p> この問題を解決するために、ES5 では DOM メソッドを使用して JavaScript スクリプトファイルを動的に読み込みます<p>。 <strong><pre class='brush:php;toolbar:false;'>function loadScript(url) { var script = document.createElement("script"); script.type="text/javascript"; script.src=url; document.body.appendChild(script); }</pre> このメソッドは、新しい <script> タグを作成し、その src 属性を設定することで、javacript ファイルを非同期的に読み取ります<p> これにより、ページのブロックは発生しませんが、他のスクリプトファイルがそれに依存している場合は別の問題が発生します。現時点では、このスクリプトがいつロードされるかは保証されません。 <strong> 別の読み込み方法は、defer 属性と async<p> 属性を使用してスクリプトを非同期的に読み込むことです。レンダリングエンジンは、このコマンド行を検出すると、外部スクリプトのダウンロードを開始しますが、ダウンロードされて実行されるのを待たずに、次のコマンドを直接実行します。 defer と async の違いは次のとおりです。 defer は、ページ全体がメモリ内で正常にレンダリングされるまで (DOM 構造が完全に生成され、他のスクリプトが実行されるまで) 実行されません。 async は、ダウンロードが完了すると、レンダリングエンジンがレンダリングを中断します。このスクリプトを実行します。後でレンダリングを続けます。つまり、defer はレンダリング後に実行され、async はダウンロード後に実行されます。さらに、複数の遅延スクリプトがある場合、それらはページに表示される順序で読み込まれますが、複数の非同期スクリプトは読み込み順序を保証できません。 IE9 以降のバージョンには、遅延の実装に非常に悪いエラーがいくつかあり、実行順序が保証されません。 IE9 以下をサポートする必要がある場合は、defer を使用しないことをお勧めします。また、実行順序が重要な場合は、属性なしでスクリプトを含めることをお勧めします。 <pre class="brush:php;toolbar:false"><script src="path/demo.js" defer></script> <script></script><p> 遅延と非同期の選択方法。使用するスクリプトがモジュールであり、他のスクリプトファイルに依存しない場合は、async を使用します。スクリプトが他のスクリプトに依存する場合、または他のスクリプトに依存する場合は、スクリプトファイルが小さく、非同期スクリプトに依存する場合は defer を使用します。、内部埋め込みスクリプトを使用すると、このファイルがすべての非同期スクリプトの前に配置されます。 </p> <p> もう 1 つの方法は、<strong>onload イベントの非同期読み込みです。 </strong></p><pre class='brush:php;toolbar:false;'>(function(){ if(window.attachEvent) { window.attachEvent("load", asyncLoad); } else if(window.addEventListener) { window.addEventListener("load", asyncLoad); } else { window.onload = asyncLoad; } var asyncLoad = function() { var script = document.createElement("script"); script.type="text/javascript"; script.async = true; script.src = (&#39;https:&#39;==document.location.protocol ? &#39;https://ssl&#39; : &#39;http:www&#39;) + &#39;.baidu.com/demo.js&#39;; var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(script, s); }; )();</pre><p> この方法は、スクリプトを挿入するメソッドを関数に記述し、それをウィンドウの onload メソッド内で実行することで、onload イベントのトリガーをブロックする問題を解決します。 </p> <p> Javascript の動的な性質により、多くの非同期読み込みメソッドがあります: XHR インジェクション、XHR eval、Iframe のスクリプト、document.write("<script type="text/javascript" src=""><p> XHR インジェクション: XMLHttpRequest を通じて Javascript を取得し、スクリプト要素を作成して DOM 構造に挿入します。 ajax リクエストが成功した後、script.text をリクエストの成功後に返されるresponseText に設定します。<strong><pre class='brush:php;toolbar:false;'>var createXHR = function() { var obj; if(window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveObject("Microsoft.XMLHTTP"); return obj; }; var xhr = createXML(); xhr.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { var script = document.createElement("script"); script.text = xhr.requestText; document.getElementsByTagName("head")[0].appendChild(script); } }</pre>XHR eval(): XHR Injection が responseText を実行する方法とは異なり、responseText は eval() 関数で直接実行されます。 </script>

var createXHR  = function() {
    var obj;
    if(window.XMLHttpRequest)
        obj = new XMLHttpRequest();
    else
        obj = new ActiveObject("Microsoft.XMLHTTP");
    return obj;
};
var xhr = createXML();
xhr.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true);
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        eval(xhr.responseText);
        $(&#39;#btn&#39;).click(function() {
            alert($(this).text());
        });
    }
}

Iframe のスクリプト: 親ウィンドウに iframe 要素を挿入し、iframe に JS を読み込みます。

えー

2. 遅延読み込み

有些JS代码在某些情况下需要使用，并不是页面初始化的时候就要用到。延迟加载就是为解决这个问题。将JS切分成许多模块，页面初始化时只将事件处理程序添加到UI元素上，然后其它JavaScript代码的加载延迟到第一次用户交互或者其他条件需要用到的时候再加载。类似图片的懒加载。这样做的目的是可以渐进式地载入页面，尽可能快地为用户提供目前需要的信息，其余部分的内容可以在用户浏览该页面时在后台载入。

JavaScript的加载分为两个部分：下载和执行脚本，异步加载只解决了下载的问题，但是代码在下载完成后就可能会立即执行，在执行过程中浏览器储与阻塞状态，响应不了任何需求。为了解决JavaScript延迟加载的问题，可以利用异步加载缓存起来，所以不会立即执行，然后在第一次需要的时候再执行。

第二部分内容的载入可以用创建动态脚本的形式：

window.onload = function() {    
var script = document.createElement("script");
    script.type="text/javascript";
    script.src="demo.js";
    document.documentElement.firstChild.appendChild("script");
}

3. 按需加载

可以通过创建一个require方法，包含需要加载的脚本名称和附加脚本加载完成后需要执行的回调函数。

function require(file, callback) {    
var script = document.getElementsByTagName("script")[0];   
var newjs = document.createElement("script");

    newjs.onload= function() {
        callback();
    };
    newjs.src=file;
    script.parentNode.insertBefore(newjs, script);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于javascrip的立即执行函数的解析

深入理解JS正则表达式之REGEXP对象属性的解析

以上がJavascript読み込みの解析の詳細内容です。詳細については、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 プラットフォームで実行できます。