JS 同期、非同期および遅延読み込みの実装の概要

今回は、JS の同期、非同期、遅延読み込みの実装の概要と、JS 同期、非同期、遅延読み込みの実装に関する 注意点 についてお届けします。実際のケースを見てみましょう。

1: 同期読み込み

最も一般的に使用される方法。

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把 标签放在 结尾处，这样尽可能减少页面阻塞。

二：异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

方法一：也叫Script DOM Element

(function(){ var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"; var x = document.getElementsByTagName("head")[0]; x.insertBefore(scriptEle, x.firstChild); })(); 属性是HTML5中新增的异步支持。此方法被称为Script DOM Element 方法。Google Analytics 和 Google+ Badge 都使用了这种异步加载代码。

(function(){; var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); 但是这种加载方式执行完之前会阻止onload事件的触发，而现在很多页面的代码都在onload时还执行额外的渲染工作，所以还是会阻塞部分页面的初始化处理。

方法二：onload时的异步加载

注:DOMContentLoaded与load的区别。前者是在document已经解析完成，页面中的dom元素可用，但是页面中的图片，视频，音频等资源未加载完，作用同jQuery中的ready事件；后者的区别在于页面所有资源全部加载完毕。

方法三：其他方法

由于JavaScript的动态性，还有很多异步加载方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)。

XHR Injection(XHR 注入)：通过XMLHttpRequest来获取javascript，然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

//获取XMLHttpRequest对象，考虑兼容性。 var getXmlHttp = function(){ var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xmlHttp.send(); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var script = document.createElement("script"); script.text = xmlHttp.responseText; document.getElementsByTagName("head")[0].appendChild(script); } } XHR Eval：与XHR Injection对responseText的执行方式不同，直接把responseText放在eval()函数里面执行。

//获取XMLHttpRequest对象，考虑兼容性。 var getXmlHttp = function(){ var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js", true); xmlHttp.send(); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ eval(xmlHttp.responseText); //alert($);//可以弹出$,表明JS已经加载进来。click事件放在其它出会出问题，应该是还没加载进来 $("#btn1").click(function(){ alert($(this).text()); }); } } Script In Irame：在父窗口插入一个iframe元素，然后再iframe中执行加载JS的操作。

var insertJS = function(){alert(2)}; var iframe = document.createElement("iframe"); document.body.appendChild(iframe); var doc = iframe.contentWindow.document;//获取iframe中的window要用contentWindow属性。 doc.open(); doc.write(" var insertJS = function(){}; "); doc.close(); GMail Mobile：业内JS内容被注释，所以不会执行，在需要的时候，获取script中的text内容去掉注释，调用eval()执行。

/* var ... */ HTML5新属性：async和defer属性 defer属性：IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注：所有的defer脚本必须保证按顺序执行的。

async属性：HTML5新属性。脚本将在下载后尽快执行，作用同defer，但是不能保证脚本按顺序执行。他们将在onload事件之前完成。

同期モードはブロッキング モードとも呼ばれ、ブラウザーが後続の解析を処理して停止します。現在の読み込みが完了した場合にのみ、次のステップを実行できます。したがって、同期実行はデフォルトで安全です。しかし、js内に文書内容の出力やDOMの変更、リダイレクトなどのアクションがあるとページの混雑が発生します。したがって、ページのブロッキングをできるだけ減らすために、一般に タグを の最後に配置することをお勧めします。

2: 非同期読み込み

🎜🎜 非同期読み込みは、ブラウザが js をダウンロードして実行している間、後続のページの処理を続行します。主に3つの方法があります。 🎜🎜 方法 1: スクリプト DOM 要素とも呼ばれます 🎜 var start = Number(new Date()); while(start + 5000 > Number(new Date())){//执行JS} 🎜 属性は、HTML5 の新しい非同期サポートです。このメソッドは、スクリプト DOM 要素メソッドと呼ばれます。 Google Analytics と Google+ バッジはどちらもこの非同期読み込みコードを使用します。 🎜rrreee🎜 ただし、この読み込み方法では、実行が完了する前に onload イベントがトリガーされることはなくなりますが、多くのページのコードは onload 中に追加のレンダリング作業も実行するため、一部のページの初期化処理は依然としてブロックされます。 🎜🎜 方法 2: onload 中の非同期読み込み 🎜rrreee🎜この方法は、スクリプト挿入メソッドを関数に配置し、それをウィンドウの onload メソッドに配置するだけです。内部で実行されます。 、これにより、onload イベントのトリガーをブロックする問題が解決されます。 🎜🎜 注: DOMContentLoaded とload の違い。前者は、ドキュメントが解析され、ページ内の DOM 要素が使用可能になった後ですが、ページ内の画像、ビデオ、オーディオ、その他のリソースは読み込まれていません。この機能は、jQuery の ready イベントと同じです。後者の違いは、ページ上のすべてのリソースが読み込まれていることです。 🎜🎜 方法 3: その他の方法 🎜🎜 JavaScript の動的な性質により、XHR インジェクション、XHR Eval、スクリプトなどの非同期読み込みメソッドが多数あります。 Iframe では、Script defer 属性、document.write(script タグ)。 🎜🎜XHR インジェクション (XHR インジェクション): XMLHttpRequest を通じて JavaScript を取得し、DOM 構造に挿入するスクリプト要素を作成します。 ajax リクエストが成功した後、script.text をリクエストの成功後に返されるresponseText に設定します。 🎜rrreee🎜XHR Eval: XHR Injection が responseText を実行する方法とは異なり、responseText は eval() 関数で直接実行されます。 🎜rrreee🎜Irame のスクリプト: 親ウィンドウに iframe 要素を挿入し、iframe に JS を読み込みます。 🎜rrreee🎜GMail モバイル: 業界の JS コンテンツはコメント化されているため、必要に応じてスクリプト内のテキスト コンテンツを取得し、コメントを削除し、eval() を呼び出して実行します。 🎜rrreee🎜HTML5 の新しい属性: async 属性と defer 属性 defer 属性: IE4.0 で登場。 defer 属性宣言スクリプトには document.write および dom の変更はありません。ブラウザーは、遅延属性を持つ他のスクリプトを並行してダウンロードします。ページの後続の処理をブロックすることなく。注: すべての遅延スクリプトは順番に実行する必要があります。 🎜🎜 🎜🎜async 属性: 新しい HTML5 属性。スクリプトはダウンロード後できるだけ早く実行されます。機能は遅延と同じですが、スクリプトが順番に実行されるという保証はありません。これらは onload イベントの前に完了します。 🎜🎜 🎜🎜Firefox 3.6、Opera 10.5、IE 9、および最新の Chrome と Safari はすべて、async 属性をサポートしています。 async と defer を同時に使用できるため、IE 4 以降のすべての IE で非同期読み込みがサポートされます。 🎜🎜 async 属性がないと、スクリプトが取得 (ダウンロード) されてすぐに実行され、ブラウザーの後続の処理がブロックされます。 async 属性がある場合、スクリプトは非同期でダウンロードおよび実行され、ブラウザーは後続の処理を続行します。 🎜 总结： 对于支持HTML5的浏览器，实现JS的异步加载只需要在script元素中加上async属性，为了兼容老版本的IE还需加上defer属性；对于不支持HTML5的浏览器(IE可以用defer实现)，可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码，你可以把它放在 匿名函数 中执行，也可以在onload中执行，也可以通过XHR注入实现，也可以创建一个iframe元素，然后在iframe中执行插入JS代码。

三：延迟加载

有些JS代码在某些情况在需要使用，并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块，页面初始化时只加载需要立即执行的JS，然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。

JS的加载分为两个部分：下载和执行。异步加载只是解决了下载的问题，但是代码在下载完成后就会立即执行，在执行过程中浏览器处于阻塞状态，响应不了任何需求。

解决思路：为了解决JS延迟加载的问题，可以利用异步加载缓存起来，但不立即执行，需要的时候在执行。如何进行缓存呢？将JS内容作为Image或者 Object对象 加载缓存起来，所以不会立即执行，然后在第一次需要的时候在执行。

1：模拟较长的下载时间：

利用thread让其sleep一段时间在执行下载操作。

2：模拟较长的JS代码执行时间

var start = Number(new Date()); while(start + 5000 > Number(new Date())){//执行JS} 这段代码将使JS执行5秒才完成！

JS延迟加载机制(LazyLoad)：简单来说，就是在浏览器滚动到某个位置在触发相关的函数，实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢？可以通过一个定时器来实现，通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！