JavaScript程式碼執行時間線

2020-08-12 16:30:47

Javascript是單執行緒(底層:多執行緒)

1.同步情況:script標籤中的src是同步
2.非同步情況:所有外部資源,出來script中的src都是非同步的,img src link href

script標籤沒有設定async  defer的時候會阻塞
            1.形成dom樹,開始繪製dom樹  document.readyState="loading"
            2.dom繪製完成  document.readyState="interactive"  觸發DOMContentloaded事件,jquery中ready函數的原始碼(樹繪製完成  效率更高)
            3.dom樹中的資源下載完成  document.readyState="complete"||document.readyState="loaded"   觸發window.onload事件(資源下載完成)
            4.響應完成

JavaScript非同步載入js的三種方案
      1.defer  老版本的IE
      2.async  W3C規範   只能載入外部的js程式碼
      3.按需載入

封裝js按需載入:

function loadScript(url,callback){
				var script=document.createElement("script");
				if(script.readyState){
					script.onreadystatechange=function(){
						if(script.readyState=="complete"||script.readyState=="loaded"){
							test();
						}
					}
				}else{
					script.onload=function(){//老版本IE不支援
						callback();
					}
				}
				script.src=url;
				document.head.appendChild(script);
			}
		loadScript("js/demo009JS.js",function(){test()});