初試 線上測驗：20 分鐘內手刻 600px 置中三段切版＋偽元素小尾巴，AI 痕跡易被看出
建議先準備好 一個html 檔案
先建好基本的模板head body
一定會用到 flex , 對話匡的小尾巴「偽元素」，顏色變換，padding 的間距
<div class="container">
<section class="item">
<div class="bar bar-blue">
<span class="label-title">文字一號</span>
</div>
<div class="text-content">
<span>很長很長的字串</span>
</div>
</section>
..... 數個 section , item 要注意之間的間距
</div>
HTML 題：<script> async / defer 差異
無屬性：
HTML ----停----停---- DOM ready
↓↑
下載+執行
async：
HTML ----------------------------- DOM ready
JS ----下載完----執行（隨時可能插入,沒等DOM）
defer：
HTML ----------------------------- 執行JS --- DOM ready
JS ----------------下載完（等待DOM）---------------↑
JS 題：let / const / var 差異
(Function Scope) var
凡是在function 內的定義的var , 整個函式作用域都可訪問調用
(Block Scope) let cont
凡是在{} 內的定義的話只會在塊作用域內可以訪問ex: for if switch case while
event loop 解釋
JavaScript 是單執行緒，所以需要 Event Loop 來處理非同步。
執行流程是：
1. 先跑同步程式（Call Stack）
2. 清空後先執行 Microtask（Promise.then / await）
3. 再執行下一個 Macrotask（setTimeout 等）
Microtask 卡住：
Promise.then 裡不斷產生新的 Promise
→ Microtask Queue 永遠清不完
→ 瀏覽器畫面永遠不更新
→ Macrotask 永遠輪不到
用戶體驗：
頁面完全凍結
滑鼠點擊沒反應
畫面不更新
像當機一樣
Macrotask 卡住：
setTimeout callback 裡做很重的運算
→ 主線程被佔用很久
→ 這個 Macrotask 跑完才能渲染
用戶體驗：
畫面更新延遲
滑動卡頓
點擊反應慢
感覺頁面很重
this 的解釋與綁定
this 不是在定義時決定的
是在執行時決定的
看「怎麼被呼叫」來判斷
一般瀏覽器環境this 指向window
一般函數 誰呼叫指向誰 例如物件內宣告的function指向該物件
一般函數 call / apply / bind：手動指定 this
建構函數 new：this 指向新建立的物件
箭頭函數：繼承外層 this 直到一般函數為止
CORS 概念
此議題基本上是不應該由前端來解決，因為這個限制是來自於瀏覽器的 policy
1. 今天會有 same-origin policy 跟 CORS，是因為我們「在瀏覽器上寫 JS」，所以受到執行環境的限制。如果我們今天寫的是 Node.js，就完全沒有這些問題，想拿什麼就拿什麼，不會有人擋我們
2. 在瀏覽器上面，CORS 限制的其實是「拿不到 response」，而不是「發不出 request」。所以 request 其實已經發出去了，瀏覽器也拿到 response 了
解決
由後端配置
- **`Access-Control-Allow-Origin`**：指定允許的來源域。
- **`Access-Control-Allow-Methods`**：指定允許的HTTP方法。
- **`Access-Control-Allow-Headers`**：指定允許的自定義請求標頭。
- **`Access-Control-Expose-Headers`**：指定哪些響應標頭可以被瀏覽器端的JavaScript訪問。
- **`Access-Control-Allow-Credentials`**：指定是否允許憑證（如cookie）。
XSS 危害與防範
# XSS
- 使用者透過網頁上可以插入代碼的方式進行攻擊（代碼會執行js 的 <script>
| **Stored XSS** | 惡意腳本存進資料庫，每次載入都執行，最危險 |
| **Reflected XSS** | 惡意腳本在 URL 參數，伺服器反射回來執行 |
| **DOM XSS** | 純前端，JS 直接把不安全內容寫進 DOM |
解： 解決方法 少使用v-html 前端框架 {{}} 有基本的的防範XSS功能，token 使用 httponly sameside 可以防止js 指令取得 token
CSRF 危害與防範
- 透過請求偽造，模擬使用者未操做的動作「使用者登入 A 網站後，cookie 還在。這時被誘導點了惡意網站 B，B 偷偷發請求到 A，瀏覽器會自動帶上 A 的 cookie，伺服器以為是本人操作。」
解：
HttpOnly → 防 XSS 竊取 cookie
SameSite → 防 CSRF 自動帶 cookie
Token 放 header → 從根本讓 CSRF 無法偽造請求
cookie / localStorage / sessionStorage 使用情境
**Cookie**
- 需要伺服器讀取的資料（session id、HttpOnly token）
- 需要設定過期時間的驗證資訊
- 容量小，不要存大量資料
**localStorage**
- 使用者偏好設定（語言、主題、深色模式）
- 不敏感的持久化資料
- 不要存 token（XSS 可讀取）
**sessionStorage**
- 單次操作的暫存（表單填到一半、分步驟流程）
- 分頁關閉就清除，適合不需要持久化的資料
**IndexedDB**
- 大量結構化資料
- 離線功能（PWA）
- 檔案、圖片 blob 暫存
一個網站 讓你自由發揮 頁面該怎麼設計
1. Header / Navbar 全站共用
2. 搜尋列 搜尋 + Autocomplete
3. Tab 導航 ETF篩選器/排行榜/我的自選/ETF小學堂
4. ETF 熱門主題按鈕 半導體/區塊鏈/電動車...
5. 依類型篩選 Tab 股票/債券/原物料/其他
6. 展開選項篩選面板 產業/主題/區域/槓反
7. 已選標籤 + 清除/確認
8. 績效圖 折線圖 + 時間區間（ClientOnly）
9. ETF 列表 Table checkbox + 分頁
10. Footer 全站共用
SSR（Server 先取）：
✅ 熱門主題按鈕清單
✅ ETF 列表第一頁（根據 URL query）
✅ 篩選條件選項（產業/主題/區域）
✅ meta data / og tag（SEO）
CSR（Client 才跑）：
❌ 績效圖 → ClientOnly 包起來
圖表套件需要 DOM，SSR 會報錯
❌ 用戶勾選後的圖表資料
❌ 篩選後重新打 API 的結果
❌ 搜尋 Autocomplete 結果
ETF 清單：
可能幾百筆 → Virtual List
vue-virtual-scroller
篩選：
細項（產業/主題）前端 filter
大類型（股票/債券）才打 API
績效圖：
勾選才打 API
已查過的時間區間 cache 起來
最多 30 個 ETF 避免資料量過大
圖片：
Cloudflare CDN
loading="lazy" decoding="async"
