前言

為什麼要參加鐵人賽？每個人的答案不盡相同，我呢？因為之前JS學得2266，導致開發專案時一直碰壁，有問題就Google，就算問題解決了，卻還是不知問題的根源，下次再遇到，還是一樣。想必有很多人都有類似的經歷，尤其是初學者，如此的惡性循環讓我痛定思痛，我要學好JavaScript！！！

參加鐵人賽，是希望能藉此將我所學的，藉由文字表達出來。唯有透過表達，不管是文字或是言語，才能釐清觀念，而不是心裡那種模模糊糊、似懂非懂的概念。

正在看這篇文章的非參賽者，也許你也想參與，但因為工作因素，或是看了他人文章，認為自己寫的搬不上檯面，亦認為自己不善表達，這些因素而放棄。我身邊也有這樣的人，我鼓勵他們，當你想要達成一件目標的時候，如果決心夠堅定，時間根本不是問題。也不要擔心文章太簡單，沒有內容，寫錯被噹，試問，哪個資深的前輩不是這樣過來的呢？萬丈高樓平地起阿！不過目前看來，只有我參賽XD。

這系列的文章，我會把它定位在筆記的形式，不只是寫給各位看的，更是寫給我自己看的。
當中，或許有些地方解釋不盡完善，觀念錯誤，請各位不吝指教，
最後希望這JS筆記，能幫助一同在路上奮鬥的夥伴。

正題

使用者在瀏覽器網址列，輸入網址(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元素，觀察執行過程，首先會顯示：

●當解析到script元素，瀏覽器會進入JS並且執行：

●直到按下確定，這段JS才算執行完畢，繼續解析剩餘的HTML成DOM：

如果再遇到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應用程式的生命週期，第二階段會一直循環，直到我們把瀏覽器關掉，它的生命週期也隨之結束。

參考來源：
忍者：JavaScript開發技巧探秘 第二章