# Exam Q1: a: * @media (max-width: 1024px) // for tablet 橫向 * @media (max-width: 768px) // for tablet 直向 * @media (max-width: 480px) // for phone * @media (max-width: 320px) // for 4-inch phone b: user-agent c: 可以在所有元素添加此屬性，不需個別添加，在切版時，不用擔心 padding / border 會影響到尺寸大小。 d: 因瀏覽器有最大同時傳輸限制，故若 css 檔太多，會有排隊 reuqest 問題。css sprites 是將 css 檔合一，只發一個 request。 Q2: span 直向排列，垂直置底，水平置中。 Q3: a: async function / promise b: 等待 call stack 清空後，執行 queue 內容。簡言之，等待同步執行完。 c: 1. 要看 client 端執行此 api 的方法，若使用 await 去等待執行回來，就有順序性；反之，則無法。 2. ```=javascript async function createUser() { return fetch('...'); } (async () => { await createUser(); await createUser(); await createUser(); await createUser(); await createUser(); })(); ``` 3. 若是問哪個會最先回來，答案是第一個，因為我使用 await，具有順序性，第一個沒回來，第二個不會觸發。 若問哪個 request 最快，則不一定，要看當下網路環境，與後端如何處理。 Q4: * 2 * 2 * 1 * 1 * 1 Q5: 皆是 3，因變數使用 var，var 是 function scope，所以在執行完 for 後，i 在 for 之外也存取得到，故此時是 3。在執行後自然印出 3。 Q6: a. 將 <link> 放於 <head></head> 裡，能確保在解析 html 內容時，已下載與解析好 css，不會造成畫面出現後，css 後來套上，照成閃爍問題。 而 script 若放在 <body> 之前，則會阻塞 html 解析，延長用戶看到畫面時間。 b: * <script>: 同步下載與解析。 * <script async>: 異步下載，不阻塞畫面解析，但當下載完了，會直接停止畫面解析，來解析 script。 * <script defer>: 異步下載，不阻塞畫面解析，下載完了，會等到 DOM content 載完才解析。 Q7: a: 若將商品資訊存在 cookies 中，會在每次 request 時帶上此 cookies，加大 request size，嚴重會被阻擋。 b: 可以選擇 api，或者存在 localStorage，但需在正確時間清除資料，例如登出、購買後。 Q10: