最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

生命週期

XAMPP下载 admin 629浏览 0评论
 正題
使用者在瀏覽器網址列,輸入網址(url),送出請求(request)至網路伺服器。伺服器收到請求後,根據請求的內容,回傳一份由JS、HTML、CSS構成的訊息。

瀏覽器收到後,開始解析,進入建立Web頁面的階段。首先解析HTML,建立DOM,並儲存於記憶體中。套用CSS樣式,若無,則套用預設樣式於HTML,根據HTML與CSS的描述,呈現頁面。

建立頁面的時候,如遇到script元素,表示這段內容是用來執行JS程式碼的,這時,瀏覽器會停止載入HTML,瀏覽器內部的JS引擎會執行JS程式碼。

<p>JS執行前</p>
<script src=”./app.js”></script>
<p>JS執行後</p>
在兩段HTML元素之間插入script元素,觀察執行過程,首先會顯示:
QQ截图20181112164031

當解析到script元素,瀏覽器會進入JS並且執行:

QQ截图20181112164036
直到按下確定,這段JS才算執行完畢,繼續解析剩餘的HTML成DOM:

QQ截图20181112164043

如果再遇到script元素,就重複剛剛的步驟。

以上為建立頁面的過程,接下來進入Web應用程式的第二個步驟:事件處理。

JS讓網頁具有互動性,所謂的互動性是指,針對不同的事件觸發產生不同的反應,譬如點擊滑鼠、滾動卷軸、計時限制、按下特定鍵盤之類的,那要怎麼知道這些的事件被觸發呢?

我們可以在剛剛的第一階段設置事件監聽器,在整個Web應用程式生命週期結束之前,事件監聽器會一直監控Web中是否有指定的事件觸發。

當有事件觸發的時候,它的過程是這樣的:
事件會依發生的順序放入事件佇列中,事件佇列可以看成一個容器,裡面放著待處理的事件。
瀏覽器會一直檢查事件佇列是否有待辦事件,如有,它會依照放入的先後順序處理,該事件處理完成,將之移出佇列,繼續處理下一個事件,直到全部處理完畢,再繼續監控佇列,直到又有新的事件進入,它又再次處理,一直循環此過程。

瀏覽器執行JS的過程,是單執行緒(single-threaded),也就是說,它一次只能處理一個事件,當有數個事件時,就只能排排站,讓瀏覽器依序處理,為了因應這樣的特性,才有事件佇列的機制。
以下為範例。

HTML

<p>滑鼠水平座標:<span id=”position”></span> </p>
<p>滑鼠點擊次數:<span id=”count”>0</span> </p>
<script src=”./app.js”></script>
JS

var x = 1;
document.addEventListener(“mousemove”, function (e) {
document.getElementById(‘position’).textContent = e.clientX;
})
document.addEventListener(‘click’, function () {
document.getElementById(‘count’).textContent = x++;
})
我們設置2個事件,分別是監聽滑鼠水平移動的座標以及點擊次數。

在生命週期第一階段頁面建置完成後,進入第二階段,事件處理。假設我們移動滑鼠後再點擊,這兩個事件會依序進入事件佇列中,瀏覽器再從事件佇列中先處理水平移動的座標,完成後,將事件移出佇列,再處理點擊次數,完成再移出佇列。關於佇列的細節,我們會在同步與非同步再說明,這邊只要記得事件會進入佇列,等待瀏覽器處理。

以上就是Web應用程式的生命週期,第二階段會一直循環,直到我們把瀏覽器關掉,它的生命週期也隨之結束。

转载请注明:XAMPP中文组官网 » 生命週期

您必须 登录 才能发表评论!