1. 程式人生 > >JavaScript程式碼執行--下篇

JavaScript程式碼執行--下篇

客戶端JS時間線

  1. Web瀏覽器建立Document物件,並且開始解析Web頁面,解析HTML元素和他們的文字內容後新增Element物件和Text節點到文件中.document.readystate屬性的值是"loading"
  2. 當HTML解析器遇到沒有async和defer屬性的script元素時,她把這些元素新增到文件中,然後執行行內或外部指令碼.這些指令碼就可以用document.write()來吧文字插入到輸入流中.
  3. 當解析器遇到設定了async屬性的script元素時,她開始下載指令碼文字,並繼續解析文件.指令碼會在它下載完成後儘快執行,但是解析器沒有停下來等他下載.她們可以看到自己的script元素和它之前的所有文件內容.
  4. 當文件解析完畢,document.readyState屬性變成"interactive"
  5. 所有defer指令碼,會按他們在文件裡的出現順序這些.非同步指令碼可能也會在這個時間執行.延遲指令碼能訪問完整的文件樹.
  6. 瀏覽器在Document物件上觸發DOMContentLoaded時間.這標誌程式執行從同步指令碼執行階段轉到非同步事件驅動階段.非同步指令碼可 能還沒有執行完畢
  7. 這是,文件已經完全解析完成.,但是瀏覽器可能還在等待其他內容載入,如圖片.當所有這些內容完成,並且所有指令碼完成載入和執行.document.readyState屬性改變為"complete",Web瀏覽器觸發Window物件上的load事件
  8. 從此刻起,會呼叫非同步事件,以非同步響應使用者輸入事件,網路事件,計算器過期等.
<script>
     console.log(document.readyState);//"loading"
    document.addEventListener("readystatechange",test);
	function jsStart(){
		console.log(this.readyState);
	}// "interactive" , "complete";
	
	//當document.readyState 為"interactive", 就可以用js操作dom元素,
	$(function(){console.log(this.readyState)});//js程式碼...});
</script>