本文講述了JS同步、異步、延遲加載的方法。分享給大家供大家參考，具體如下：
一：同步加載
我們平時使用的最多的一種方式。
<script src="http://yourdomain.com/script.js"></script>
同步模式，又稱阻塞模式，會阻止瀏覽器的后續處理，停止后續的解析，只有當當前加載完成，才能進行下一步操作。所以默認同步執行才是安全的。但這樣如果js中有輸出document內容、修改dom、重定向等行為，就會造成頁面堵塞。所以一般建議把<script>標簽放在<body>結尾處，這樣盡可能減少頁面阻塞。
二：異步加載
異步加載又叫非阻塞加載，瀏覽器在下載執行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); })();<async>屬性是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時的異步加載
(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') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();這種方法只是把插入script的方法放在一個函數里面，然后放在window的onload方法里面執行，這樣就解決了阻塞onload事件觸發的問題。
注:DOMContentLoaded與load的區別。前者是在document已經解析完成，頁面中的dom元素可用，但是頁面中的圖片，視頻，音頻等資源未加載完，作用同jQuery中的ready事件；后者的區別在于頁面所有資源全部加載完畢。
方法三：其他方法
新聞熱點
疑難解答
圖片精選
