這次帶給大家JS載入方式使用匯總，JS載入方式使用的注意事項有哪些，下面就是實戰案例，一起來看一下。 一：同步載入 我們平常使用的最多的方式。 同步模式，又稱為阻塞模式，會阻止瀏覽器的後續處理，停止後續的解析，只有噹噹前載入完成，才能進行下一步操作。所以預設同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為，就會造成頁面阻塞。所以一般建議把標籤放在<body>結尾處，這樣盡量減少頁面阻斷。 </p> <p style="text-align: left;"><strong>二：非同步載入</strong></p> <p style="text-align: left;">非同步載入又叫非阻塞加載，瀏覽器在下載執行js的同時，也會繼續進行後續頁面的處理。主要有三種方式。 </p> <p style="text-align: left;"><span style="color: #800000">方法一：也叫Script DOM Element</span></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>(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); })();</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;"><async>屬性是HTML5中新增的非同步支援。此方法稱為Script DOM Element 方法。 Google Analytics 和 Google Badge 都使用了這個非同步載入程式碼。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>(function(){; var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.m.sbmmt.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;">但是這種載入方式執行完之前會阻止onload事件的觸發，而現在很多頁面的程式碼都在onload時還執行額外的渲染工作，所以還是會阻塞部分頁面的初始化處理。 </p> <p style="text-align: left;"><span style="color: #800000">方法二：onload時的非同步載入</span></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>(function(){ if(window.attachEvent){ window.attachEvent("load", asyncLoad); }else{ window.addEventListener("load", asyncLoad); } var asyncLoad = function(){ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.m.sbmmt.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); } )();</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;">這個方法只是把插入script的方法放在一個函數裡面，然後放在window的onload方法裡面執行，這樣就解決了阻塞onload事件觸發的問題。 </p> <p style="text-align: left;"><span style="color: #ff0000">註:DOMContentLoaded與load的差別。前者是在document已經解析完成，頁面中的dom元素可用，但是頁面中的圖片，視頻，音頻等資源未加載完，作用同jQuery中的ready事件；後者的區別在於頁面所有資源全部加載完畢。 </span></p> <p style="text-align: left;"><span style="color: #800000">方法三：其他方法</span></p> <p style="text-align: left;">由於JavaScript的動態性，還有很多非同步載入方法： XHR Injection、 XHR Eval、 Script In Iframe、 Script defer屬性、 document.write(script tag)。 </p> <p style="text-align: left;">XHR Injection(XHR 注入)：透過XMLHttpRequest來取得javascript，然後建立一個script元素插入到DOM結構中。 ajax請求成功後設定script.text為請求成功後回傳的responseText。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> //获取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); } }</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;">XHR Eval：與XHR Injection對responseText的執行方式不同，直接把responseText放在eval()函式裡面執行。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>//获取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()); }); } }</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;">Script In Irame：在父視窗插入一個iframe元素，然後再iframe中執行載入JS的操作。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> 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("<script>var insertJS = function(){};<\/script><body onload='insertJS()'></body>"); doc.close();</pre><div class="contentsignin">登入後複製</div></div> <p style="text-align: left;">GMail Mobile：業內JS內容被註釋，所以不會執行，在需要的時候，取得script中的text內容去掉註釋，呼叫eval()執行。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre> <script type="text/javascript"> /* var ... */ 登入後複製 HTML5新屬性：async和defer屬性defer屬性：IE4.0就出現。 defer屬聲明腳本中將不會有document.write和dom修改。瀏覽器會並行下載其他有defer屬性的script。而不會阻塞頁面後續處理。註：所有的defer腳本必須保證按順序執行的。 async屬性：HTML5新屬性。腳本將在下載後儘快執行，作用同defer，但不能保證腳本按順序執行。他們將在onload事件之前完成。 Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支援async屬性。可以同時使用async和defer，這樣IE 4之後的所有IE都支援非同步載入。 沒有async屬性，script會立即取得（下載）並執行，期間阻塞了瀏覽器的後續處理。如果有async屬性，那麼script將被非同步下載並執行，同時瀏覽器繼續後續的處理。 总结： 对于支持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中文网其它相关文章！ 推荐阅读： node+koa2+mysql+bootstrap搭建论坛前后端 JS内this指向使用实例详解
