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