如何非同步載入js？這篇文章就跟大家介紹三種非同步載入js的方法，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。 【影片教學推薦：JavaScript影片教學】
js載入時間軸 ：
##它是根據js出生的那一刻開始記錄的一系列瀏覽器按照順序做的事，形容的就是加載順序，可以用來優化什麼東西，理論基礎，背下來.1、創建Document對象，開始解析web頁面。解析HTML元素和他們的文字內容後加入Element物件和Text節點到文件中。這個階段document.readyState = 'loading'。 （產生document對象，document狀態位元變成loading）
2、遇到link外部css，建立執行緒加載，並繼續解析文件。
3、遇到script外部js，並且沒有設定async、defer，瀏覽器加載，並且阻塞，等待js加載完成並執行該腳本，然後繼續解析文件。
4、遇到script外部js，並且設定有async、defer，瀏覽器建立執行緒加載，並繼續解析文件。對於async屬性的腳本，腳本載入完成後立即執行。 （非同步禁止使用document.write()）
document.write()：特別特殊他是把裡面的東西當成HTML文檔輸出到頁面裡去，但是有一點就是，有的時候，當你整個文件全部都解析的差不多的時候再用document.write()的話會把你之前所有的文檔流都清空，用它裡面的文檔流代替例：整個頁只顯示a，這裡的document.write();在這裡有消除文檔流的功能，連script都消除了。<p style="height:100px;width:100px;background-color:red;"></p>
<script type="text/javascript">
window.onload = function(){
document.write('a');
}
</script>5、遇到img等，先正常解析dom結構，然後瀏覽器非同步載入src，並繼續解析文件。
6、當文件解析完成，document.readyState = 'interactive'。
先解析完，再載入完，然後狀態位元變成interactive（活躍）檢視狀態位的轉換：console.log(document.readyState);
document.onreadystatechange = function(){
console.log(document.readyState);
}7、文件解析完成後，所有設定有defer的腳本都會依照順序執行。 （注意與async的不同,但同樣禁止使用(document.write()）;
8、document物件觸發DOMContentLoaded事件，這也標誌著程式執行從同步腳本執行階段，轉換為事件驅動階段。
例1：同時印出a和complete,而且onDOMContentLoaded是不好使的，只有綁定在addEventListener才好用。console.log(document.readyState);
document.onreadystatechange = function(){
console.log(document.readyState);
}
document.addEventListener('DOMContentLoaded',function(){
console.log('a');
},false)$(document).ready(function(){
//当DOM解析完就执行的部分（不用加载完，加载完是给用户看的，对于我们来说解析完就可以操作了）
/*它的原理就是interactive和DOMContentLoaded事件*/
})<head>
<meta charset="UTF-8">
<title>lottery</title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var p = document.getElementsByTagName('p')[0];
console.log(p);
},false)
</script>
script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完
</head>
//script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完#9、當所有async的腳本載入完成並執行後、img等載入完成後，document.readyState = 'complete'，window物件觸發load事件。
10、從此，以非同步回應方式處理使用者輸入、網路事件等。總結就是三個點：先生成document對象，代表js可以運行了，第二步就是文檔解析完了，第三步就是文檔加載完了並且執行完了
下面我們來看看非同步載入js的三種方式:
#非同步載入js的方法:
1)、async HTML5的屬性,讓JavaScript程式碼進行非同步載入<script type="text/javascript" src="05.js" async="async"></script>
<script type="text/javascript" defer="defer"></script>
<script type="text/javascript">
function asyncLoaded(url,callback){
var script = document.createElement("script");
// script.src = url; 假如说网速非常好，直接执行完成了，后面就监听不到状态的改变了
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == "complete" || script.readyState =="loaded"){
// 执行某个函数
callback()
}
}
}else{
script.onload = function(){
// 执行某个函数
callback()
}
}
script.src = url; //异步的过程
document.head.appendChild(script)
}
asyncLoaded("05.js",function(){
fn() //05.js中的函数
})
</script>以上是如何異步加載js？異步載入js的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
