主要分為三個(gè)階段,分別是 請求響應(yīng)階段盯串、頁面構(gòu)建階段抚垄、和事件處理階段躏鱼。
請求響應(yīng)階段
請求響應(yīng)階段大體上就是氮采，當(dāng)用戶輸入url請求地址或者點(diǎn)擊超鏈接a標(biāo)簽的時(shí)候，瀏覽會(huì)形成請求并發(fā)送到服務(wù)器染苛，服務(wù)器給出響應(yīng)鹊漠。
頁面構(gòu)建階段
頁面構(gòu)建階段就是，當(dāng)瀏覽器拿到 HTML css js這些代碼的時(shí)候茶行，就會(huì)渲染頁面躯概，這時(shí)主要工作內(nèi)容是對DOM結(jié)構(gòu)的渲染，HTML和js會(huì)像接力賽一樣配合完成工作畔师。當(dāng)HTML中的標(biāo)簽遇到script標(biāo)簽的時(shí)候娶靡，js就會(huì)執(zhí)行，執(zhí)行到代碼的最后看锉，HTML又拿起了接力棒姿锭。如此循環(huán)往復(fù)完成頁面的渲染W(wǎng)EB應(yīng)用的生命周期
- DOM樹的特點(diǎn):除了第一個(gè)節(jié)點(diǎn)(html根節(jié)點(diǎn))外,所有節(jié)點(diǎn)都只有一個(gè)父節(jié)點(diǎn),同時(shí),一個(gè)節(jié)點(diǎn)可以有多個(gè)孩子節(jié)點(diǎn),這些孩子節(jié)點(diǎn)之間互相稱為兄弟節(jié)點(diǎn)
- 盡管DOM是根據(jù)HTML創(chuàng)建來的,兩者有密切的關(guān)系,但兩者并不同,HTML代碼是瀏覽器頁面UI構(gòu)建初始的DOM藍(lán)圖
- js代碼執(zhí)行的切入點(diǎn):
由于js執(zhí)行的主要目的是提供動(dòng)態(tài)頁面,故瀏覽器通過全局對象提供的API使js引擎可以和頁面進(jìn)行交互并改變頁面的內(nèi)容.瀏覽器暴露給引擎的全局對象是window對象.window是獲取全局對象,全局變量,瀏覽器API的途徑.
- window對象最重要的屬性是document,它代表了當(dāng)前頁面的DOM,通過使用這個(gè)對象,js代碼可以修改DOM,包括修改和刪除現(xiàn)存節(jié)點(diǎn),以及創(chuàng)建和插入新的節(jié)點(diǎn)
- js代碼的分類:js代碼基本分為全局代碼和函數(shù)代碼
其中全局代碼是由js引擎以一種直接的方式自行執(zhí)行.
函數(shù)代碼一般有多種被執(zhí)行方式,分別是被 其他全局代碼執(zhí)行、被其他函數(shù)執(zhí)行伯铣、也可以是瀏覽器執(zhí)行
事件處理
1.事件注冊:寫代碼的時(shí)候 定義的事件,addEventListener(相當(dāng)于在網(wǎng)站上訂票,但是票沒有取)
2.瀏覽器等待事件處理(火車站客服等待有人來取票)
3.瀏覽器使用了一種機(jī)制來跟蹤事件的發(fā)生,這種機(jī)制被稱為 事件隊(duì)列.(去車站取票排隊(duì))
事件列隊(duì)的原理:假設(shè)有事件A發(fā)生(例如用戶點(diǎn)擊鼠標(biāo)),又有事件B發(fā)生.
這兩個(gè)事件就會(huì)加入到事件列隊(duì)中,(它們的順序是被瀏覽器檢查到順序
排列,)注意將事件推入隊(duì)列的過程不參與事件處理線程.這時(shí)候?yàn)g覽器
會(huì)檢查事件隊(duì)列頭.如果有事件存在,將事件取出并執(zhí)行此事件處理器.其
他事件需要內(nèi)心等待被執(zhí)行.也就是說瀏覽器對事件的處理(加入列隊(duì)
中)以及對事件函數(shù)(事件處理線程)的處理是異步的.
4.瀏覽器執(zhí)行事件(此時(shí)也就相當(dāng)于買票的人排到頭了,并將票取走)
注意:之所以將js事件處理稱為異步處理,是因?yàn)槭录呐抨?duì)和事件的處理不在一個(gè)線程上
