JS 동기화, 비동기성 및 지연 로딩을 구현하는 방법

이번에는 JS 동기화, 비동기, 지연 로딩 구현 방법과 주의사항 JS 동기화, 비동기, 지연 로딩 구현에 대해 알아보겠습니다.

One: 동기 로딩

가장 일반적으로 사용되는 방법입니다.

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果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 수정, 리디렉션 등의 동작이 있으면 페이지 혼잡이 발생합니다. 따라서 일반적으로 태그를 끝에 배치하여 페이지 차단을 최대한 줄이는 것이 좋습니다.

두 번째: 비동기 로딩

🎜비동기 로딩은 비차단 로딩이라고도 합니다. 브라우저가 js를 다운로드하고 실행하는 동안 후속 페이지를 계속 처리합니다. 세 가지 주요 방법이 있습니다. 🎜🎜 방법 1: 스크립트 DOM 요소라고도 함 🎜 var start = Number(new Date()); while(start + 5000 > Number(new Date())){//执行JS} 🎜 속성은 HTML5의 새로운 비동기 지원입니다. 이 방법을 스크립트 DOM 요소 방법이라고 합니다. Google Analytics와 Google+ Badge 모두 이 비동기 로딩 코드를 사용합니다. 🎜rrreee🎜그러나 이 로딩 방법은 실행이 완료되기 전에 onload 이벤트가 발생하는 것을 방지합니다. 이제 많은 페이지의 코드도 onload 중에 추가 렌더링 작업을 수행하므로 여전히 일부 페이지의 초기화 처리가 차단됩니다. 🎜🎜 방법 2: onload 중 비동기 로딩 🎜rrreee🎜 이 방법은 그냥 스크립트 삽입 방법을 함수에 넣은 뒤, 창의 onload 방법에 넣는 것 뿐입니다. 내부에서 실행됩니다. , 이는 onload 이벤트 트리거를 차단하는 문제를 해결합니다. 🎜🎜 참고: DOMContentLoaded와 로드의 차이입니다. 전자는 문서가 구문 분석되고 페이지의 DOM 요소를 사용할 수 있지만 페이지의 사진, 비디오, 오디오 및 기타 리소스가 로드되지 않은 후입니다. 후자의 차이점은 페이지의 모든 리소스가 로드되었다는 것입니다. 🎜🎜 방법 3: 기타 방법 🎜🎜JavaScript의 동적 특성으로 인해 XHR 주입, XHR 평가, 스크립트와 같은 비동기 로딩 방법이 많이 있습니다. Iframe에서는 Script defer 속성인 document.write(스크립트 태그)를 사용합니다. 🎜🎜XHR 주입(XHR 주입): XMLHttpRequest를 통해 javascript를 가져온 다음 DOM 구조에 삽입할 스크립트 요소를 만듭니다. ajax 요청이 성공하면 script.text를 요청 성공 후 반환되는 responseText로 설정합니다. 🎜rrreee🎜XHR Eval: XHR 주입이 responseText를 실행하는 방식과 다르게 responseText는 eval() 함수에서 직접 실행됩니다. 🎜rrreee🎜Script In Irame: 상위 창에 iframe 요소를 삽입한 다음 iframe에 JS를 로드합니다. 🎜rrreee🎜GMail 모바일: 업계 JS 콘텐츠에는 주석이 달려있어 실행되지 않습니다. 필요할 경우 스크립트에서 텍스트 콘텐츠를 가져와서 주석을 제거한 후 eval()을 호출하여 실행합니다. 🎜rrreee🎜HTML5 새 속성: async 및 defer 속성 defer 속성: IE4.0에 나타납니다. defer 속성 선언 스크립트에는 document.write 및 dom 수정이 없습니다. 브라우저는 defer 속성이 있는 다른 스크립트를 병렬로 다운로드합니다. 페이지의 후속 처리를 차단하지 않고. 참고: 모든 연기 스크립트는 순서대로 실행되어야 합니다. 🎜🎜 🎜🎜async 속성: HTML5의 새로운 속성. 스크립트는 다운로드 후 최대한 빨리 실행됩니다. 기능은 defer와 동일하지만 스크립트가 순서대로 실행된다는 보장은 없습니다. onload 이벤트 전에 완료됩니다. 🎜🎜 🎜🎜Firefox 3.6, Opera 10.5, IE 9 및 최신 Chrome 및 Safari는 모두 비동기 속성을 지원합니다. async와 defer를 동시에 사용할 수 있으므로 IE 4 이후의 모든 IE는 비동기 로딩을 지원합니다. 🎜🎜비동기 속성이 없으면 스크립트를 획득(다운로드)하고 즉시 실행하여 브라우저의 후속 처리를 차단합니다. 비동기 속성이 있는 경우 브라우저가 후속 처리를 계속하는 동안 스크립트가 비동기적으로 다운로드되어 실행됩니다. 🎜 总结： 对于支持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中文网其它相关文章！