1️⃣ 瀏覽器與 DOM
【題目】
要在 HTML 檔案中使用 <script> 標籤載入 JavaScript 檔案時，一個常見的作法是「把 <script> 標籤放在 <body> 的最底部 (也就是 </body> 前)」。請問：
- 這樣做的話，在瀏覽器渲染流程中，會在什麼時機點載入到 JavaScript 程式碼？為什麼需要這樣做？
- 如果我們想要「在 DOM 生成的同時，一併載入 JavaScript」，針對 script 標籤還有什麼其他的處理作法？
【我的回答】
- 會在 DOM 元素都被解析完成後才載入 JavaScript 的部份，因為 JavaScript 有可能會需要操作到 DOM，這樣可以確保當 JS 需要操作 DOM 時這些 DOM 已經存在。
- 可以在 script 標籤中加上屬性，例如 defer 與 async，前者是非同步請求外部 script 但會等瀏覽器解析完才執行 script 內容，而後者則是一樣非同步請求外部 script 但得到 script 回應後會先停止解析並執行 script 內容。
【補充說明】
如果用 React 開發似乎不需要管這件事，至少我目前沒遇過也沒想過要處理這方面的問題，但這個很有意思，繼續往下研究的話感覺會挖出很多觀念，未來可再深入探討。
【參考資料】
[HTML] <script>中defer跟async是什麼?
[HTML] script tag 加上 async & defer 的功能及差異？
請說明 DOMContentLoaded, load, beforeunload, unload 的觸發時機
繼續閱讀 | 回到目錄
2️⃣ DOM（冒泡機制）
【題目】
請說明瀏覽器的「冒泡事件」是什麼？這個行為可能會帶來什麼潛在的問題？
【我的回答】
冒泡是指從啟動事件的節點（event.target）開始，逐層往上傳遞事件，直到整個網頁的根節點 document 為止。開發者有時會想避免誤觸其他父層或更上層元素的監聽器，如果想防止這個狀況可以使用 event.stopPropagation() 來阻止事件傳播，讓由下而上的事件傳遞停止在這一層（就是寫 event.stopPropagation() 的那層）。有一點可以留意一下，事件委派（Delegation）的設計以冒泡機制為基礎來假設子元素會向上報告，若無特別需要則不必刻意制止冒泡。
【補充說明】
講到冒泡很自然就會談到捕獲（Capturing），也就是另一個方向的事件傳遞：由上而下。不知道大家當初學到這裡時是否有著跟我一樣的疑問：「為什麼要有兩種相反的傳遞機制啊？」為了寫這篇特地去 Lighthouse 考古（AC 舊的教學平台，現在換到 Canvas），把自己大約 9 個月前的留言挖出來因為裡面有當初找的資料，有興趣可點參考資料第二、三個連結。
【參考資料】
DOM 的事件傳遞機制：捕獲與冒泡
事件的冒泡、捕捉
StackOverflow 相關討論
繼續閱讀 | 回到目錄
3️⃣ 瀏覽器（儲存空間）
【題目】
在前後分離開發時，若想在前端將資料臨時保存下來（例如想儲存使用者登入狀態），請問瀏覽器有什麼現成的儲存空間可以運用？
【我的回答】
主要有以下前三種，包含與 server 有關以及單純在 client 端的方法，而以下儲存空間計算都是分網站儲存，不同 domain 無法共享這些儲存在 Client 端的資料。最後一種則為簡易補充。
- Cookie：小型文字檔，容量上限 4 KB，可設定 Cookie 保留期間長短。當瀏覽器發送 request 時會自動帶到 server 端，由於容量小，主要用於需要攜帶到 server 端的重點資料。
- LocalStorage：可儲存容量約 5–10 MB（視瀏覽器而定），除非手動刪除否則沒有過期時間，關掉分頁或瀏覽器後再打開仍存在，算是滿常運用的儲存空間。
- SessionStorage：可儲存容量約 5 MB，跟 LocalStorage 主要差在存放時間長短，由於只儲存在瀏覽器同一個分頁，把分頁關掉或到另一個分頁就沒有作用，且不同分頁無法共享 SessionStorage，所以通常拿來儲存短期資訊。
- 快取（Cache）：與本題主要方向可能不同，但仍屬於「先儲存一些東西方便取用」的概念，一併簡介。快取的概念是提供一個額外儲存空間，將可能需再次透過請求得到的資料放在裡面（拿過了可以先放在那），當之後要再請求資料時可以先看看快取有沒有，如果有就可以在快取拿而不用再去發請求，而快取有很多種，例如 HTTP Cache、Memory Cache、CDN Cache 等（關於實際運作完全沒概念，但是做這題時查到快取就先記下來）。
【補充說明】
除了瀏覽器儲存空間外，地圖上的空間也很有趣（硬要扯到這邊來），趁機分享之前在 Google Maps 發現的事：直布羅陀海峽應該滿有名的吧？就是歐非兩塊大陸間、地中海往西連接大西洋的那個海峽，如果你去看地圖，那邊有個地方就叫直布羅陀（Gibraltar），乍看是在西班牙，但其實那塊是英國的XD，所以之前也有文章在討論英國脫歐後直布羅陀怎麼辦，不清楚的人可能心想英國脫歐甘直布羅陀屁事XD。最後，再提另一個有趣的事，直布羅陀對面那個與它隔海相望的休達（Ceuta），乍看屬於非洲大陸上的摩洛哥，但其實那邊是西班牙的，我只能說，貴圈真亂。
【參考資料】
瀏覽器資料儲存 — Cookie、LocalStorage、SessionStorage
【強化模型】3–5 瀏覽器中的儲存機制（上集）
【強化模型】3–5 瀏覽器中的儲存機制（下集）
極限加速！Web 開發者不能不知道的 Cache 大補帖！
英國脫歐後，直布羅陀怎麼辦？
關於直布羅陀的一點介紹
繼續閱讀 | 回到目錄
結尾
當時在寫這些題目時發現自己對瀏覽器很感興趣，覺得這個東西怎麼那麼神奇，而且好複雜又很有意思，裡面有相當多東西值得研究，老實說現在用 Chrome 開啟右側的 DevTools（有人習慣從下面或左邊，我是習慣右邊，雖然聽著有點怪有人會懷疑我在開車但實際上是可以這樣讓你設置沒錯）裡面一堆東西還是看不懂也從來沒用過，希望未來有機會研究研究。
