この記事では、主に Javascript の読み込みの分析を紹介します。これは、必要な友達に参考にしてもらいます (1) 同期読み込み。 Web ページでは、ブラウザが js ファイルをロードする方法は タグを使用します。以下に示すように、 <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">//内嵌脚本 <script type="text/javacript"> // code here! //加载外部脚本 ログイン後にコピー タグを追加すると、ブラウザはそれを読み取って実行できます。ただし、ブラウザは、<script> タグを次の順序で読み取ります。その結果、複数のファイルが相互に依存している場合は、依存関係が最も小さいファイルが先頭に配置され、依存関係が最も大きいファイルが最後に配置される必要があります。そうでない場合、コードはエラーを報告します。私はブートストラップを使用する際にこのことをよく知っていると思います。一方、ブラウザは同期モードで <script> タグを読み込みます。つまり、ページは後続のコードを実行する前に JavaScript ファイルが読み込まれるのを待ちます。 <script> タグが多数ある場合、ブラウザはそれらを同時に読み取ることができず、1 つを読み取ってからもう 1 つを読み取らなければならないため、読み取り時間が大幅に長くなり、ページの応答が遅くなり、ユーザー エクスペリエンスが低下します。影響を受ける。同期モードはブロッキング モードとも呼ばれ、ブラウザによる後続の処理を禁止し、現在の読み込みが完了した場合にのみ次のステップを実行できるため、デフォルトでは同期実行が安全です。ただし、js内でドキュメント内容の出力やDOMの変更、リダイレクトなどの動作があるとブロッキングの原因となります。したがって、一般的には、ページのブロックを軽減できる <body> の最後に <script> タグを配置することをお勧めします。 </strong></p><p> (2) 非同期読み込み</p><p></p> この問題を解決するために、ES5 では DOM メソッドを使用して JavaScript スクリプト ファイルを動的に読み込みます<p>。 <strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function loadScript(url) { var script = document.createElement("script"); script.type="text/javascript"; script.src=url; document.body.appendChild(script); }</pre><div class="contentsignin">ログイン後にコピー</div></div></strong> このメソッドは、新しい <script> タグを作成し、その src 属性を設定することで、javacript ファイルを非同期的に読み取ります</p><p> これにより、ページのブロックは発生しませんが、他のスクリプト ファイルがそれに依存している場合は別の問題が発生します。現時点では、このスクリプトがいつロードされるかは保証されません。 <strong></strong> 別の読み込み方法は、</p>defer 属性と async<p> 属性を使用してスクリプトを非同期的に読み込むことです。レンダリング エンジンは、このコマンド行を検出すると、外部スクリプトのダウンロードを開始しますが、ダウンロードされて実行されるのを待たずに、次のコマンドを直接実行します。 defer と async の違いは次のとおりです。 defer は、ページ全体がメモリ内で正常にレンダリングされるまで (DOM 構造が完全に生成され、他のスクリプトが実行されるまで) 実行されません。 async は、ダウンロードが完了すると、レンダリング エンジンがレンダリングを中断します。このスクリプトを実行します。後でレンダリングを続けます。つまり、defer はレンダリング後に実行され、async はダウンロード後に実行されます。さらに、複数の遅延スクリプトがある場合、それらはページに表示される順序で読み込まれますが、複数の非同期スクリプトは読み込み順序を保証できません。 IE9 以降のバージョンには、遅延の実装に非常に悪いエラーがいくつかあり、実行順序が保証されません。 IE9 以下をサポートする必要がある場合は、defer を使用しないことをお勧めします。また、実行順序が重要な場合は、属性なしでスクリプトを含めることをお勧めします。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><script src="path/demo.js" defer> ログイン後にコピー 遅延と非同期の選択方法。使用するスクリプトがモジュールであり、他のスクリプト ファイルに依存しない場合は、async を使用します。スクリプトが他のスクリプトに依存する場合、または他のスクリプトに依存する場合は、スクリプト ファイルが小さく、非同期スクリプトに依存する場合は defer を使用します。 、内部埋め込みスクリプトを使用すると、このファイルがすべての非同期スクリプトの前に配置されます。 もう 1 つの方法は、onload イベントの非同期読み込みです。 (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 = ('https:'==document.location.protocol ? 'https://ssl' : 'http:www') + '.baidu.com/demo.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s); }; )();ログイン後にコピー この方法は、スクリプトを挿入するメソッドを関数に記述し、それをウィンドウの onload メソッド内で実行することで、onload イベントのトリガーをブロックする問題を解決します。 Javascript の動的な性質により、多くの非同期読み込みメソッドがあります: XHR インジェクション、XHR eval、Iframe のスクリプト、document.write("<p> XHR インジェクション: XMLHttpRequest を通じて Javascript を取得し、スクリプト要素を作成して DOM 構造に挿入します。 ajax リクエストが成功した後、script.text をリクエストの成功後に返されるresponseText に設定します。<strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;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><div class="contentsignin">ログイン後にコピー</div></div></strong>XHR eval(): XHR Injection が responseText を実行する方法とは異なり、responseText は eval() 関数で直接実行されます。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;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) { eval(xhr.responseText); $('#btn').click(function() { alert($(this).text()); }); } }</pre><div class="contentsignin">ログイン後にコピー</div></div><p> Iframe のスクリプト: 親ウィンドウに iframe 要素を挿入し、iframe に JS を読み込みます。 </p>えー<p></p>2. 遅延読み込み<p></p><p><p> 有些JS代码在某些情况下需要使用,并不是页面初始化的时候就要用到。延迟加载就是为解决这个问题。将JS切分成许多模块,页面初始化时只将事件处理程序添加到UI元素上,然后其它JavaScript代码的加载延迟到第一次用户交互或者其他条件需要用到的时候再加载。类似图片的懒加载。这样做的目的是可以渐进式地载入页面,尽可能快地为用户提供目前需要的信息,其余部分的内容可以在用户浏览该页面时在后台载入。</p><p> JavaScript的加载分为两个部分:下载和执行脚本,异步加载只解决了下载的问题,但是代码在下载完成后就可能会立即执行,在执行过程中浏览器储与阻塞状态,响应不了任何需求。为了解决JavaScript延迟加载的问题,可以利用异步加载缓存起来,所以不会立即执行,然后在第一次需要的时候再执行。</p><p> 第二部分内容的载入可以用创建动态脚本的形式:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">window.onload = function() { var script = document.createElement("script"); script.type="text/javascript"; script.src="demo.js"; document.documentElement.firstChild.appendChild("script"); }</pre><div class="contentsignin">ログイン後にコピー</div></div><p><strong>3. 按需加载</strong></p><p> 可以通过创建一个require方法,包含需要加载的脚本名称和附加脚本加载完成后需要执行的回调函数。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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); }</pre><div class="contentsignin">ログイン後にコピー</div></div></p> <p>以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!</p> <p>相关推荐:</p> <p><a title="关于javascrip的立即执行函数的解析" href="//m.sbmmt.com/js-tutorial-406380.html" target="_blank">关于javascrip的立即执行函数的解析</a><br></p> <p><a title="深入理解JS正则表达式之REGEXP对象属性的解析" href="//m.sbmmt.com/js-tutorial-406378.html" target="_blank">深入理解JS正则表达式之REGEXP对象属性的解析</a><br></p>