---
# System prepended metadata

title: Exam

---

# 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:
