Web 基礎

🚀 前言 想知道瀏覽器到底在做什麼嗎？ 你每天都在用 Chrome、Safari、Edge，但它們如何把網頁「畫」出來，其實很少人真正理解。 本文將帶你掌握： 瀏覽器內部到底發生了什麼 網頁從下載到顯示的完整流程（渲染） HTML / CSS / JavaScript 的角色 為什麼沒有瀏覽器就無法上網 ✅ 瀏覽器是什麼？ 一句話總結： 瀏覽器是把網路資料轉成「可閱讀畫面」的應用程式。 常見的瀏覽器包括： Chrome Safari Edge Firefox 瀏覽器會接收網站的 HTML、CSS、JavaScript，並把它們轉換成你看到的網頁。 就像一位 把原始資料翻譯成視覺畫面的翻譯員。 🧭 瀏覽器的主要任務 瀏覽器負責： 渲染網頁（Rendering） 載入圖片、影片等資源 執行 JavaScript 安全通訊（HTTPS） 分頁隔離，避免整個瀏覽器崩潰 如果沒有瀏覽器，我們看到的只會是： 一堆 HTML 字串 沒有樣式 沒有互動 沒有安全保護 🔍 Chrome 裡到底發生了什麼？（流程概覽） 當你輸入一個 URL 時，Chrome 會依序做以下事情： 1. 查詢 DNS 找出「要連到哪一台伺服器」。 2. 下載 HTML 這是網頁的「骨架」。 3. 解析 HTML 並載入 CSS CSS 決定顏色、字體、排版等外觀。 4. 執行 JavaScript 處理按鈕動作、動畫、資料更新等互動。 ...

🚀 前言 在使用網站時，你是否想過： 為什麼重新整理頁面後仍然保持登入？ 為什麼購物車的商品不會突然消失？ 為什麼網站能記住你的語言或主題設定？ 這些便利功能背後，都依賴 Cookie 與 Session。 本文將以最生活化的方式，帶你理解： 網站如何「記住你」 Cookie 與 Session 的差異 它們在登入與使用者識別中的角色 ✅ 基礎概念 🍪 Cookie 是什麼？ Cookie 就像放在你瀏覽器裡的一張小紙條。 網站本身不會記得你是誰，因此會把一段小資訊（Cookie）交給你的瀏覽器保存。 Cookie 的特性： 儲存在瀏覽器端 內容是小型文字資料 每次向網站發送請求時會自動附帶 常見用途： 記住登入狀態 保存語言、主題等偏好 分析與廣告追蹤（如 Google Analytics） 🔐 Session 是什麼？ Session 就像伺服器替你準備的一個私人儲物櫃。 當你登入時，伺服器會建立一個 Session，裡面放： 使用者 ID 登入狀態 其他必要資訊 Session 的特性： 儲存在伺服器端 以 Session ID 作為識別 用於管理登入期間的資料 🔗 Cookie 與 Session 的關係 兩者通常是 一起使用 的。 流程如下： 使用者登入 伺服器建立 Session（儲物櫃） 伺服器把 Session ID（鑰匙）放進 Cookie 瀏覽器下次訪問時會自動帶上 Cookie 伺服器根據 Session ID 找到對應的 Session 成功還原登入狀態 Cookie = 鑰匙 Session = 儲物櫃 ...