前言
工程師的面試其中一個好處是，有一部分的問題是你可以預期、並透過練習掌握的，像是leetcode或是類似本篇文章的經典面試題目整理，今天老樣子看了一下收到的medium訂閱文章，覺得這類的主題其實也蠻有意思的! 於是便將其中的10題整理一下，讓路過的各位大大們一起挑戰一下，也順便替自己複習一些基礎:D
不需要回答得太詳細、意思有到即可!
基礎前端面試10問
- 在前端開發中，請解釋什麼是DOM
- span & div有什麼差異
- 什麼是Meta Tags
- css選擇器與id選擇器的差異在?
- 你要怎麼根據不同尺寸套用特定的CSS樣式?
- Pseudo-classes 與 Pseudo-elements的差別在?
- css中有那些常見的position，他們又有什麼差異?
- PUT & POST的差別在?
- cookies, session storage以及local storage三者的差異為?
- 什麼是CORS?
基礎前端面試10答
在前端開發中，請解釋什麼是DOM
DOM(Document Object Model)是一種用樹狀結構表示頁面中元素的物件模型，也有人稱為HTML的操作介面(API interface for HTML)，每個HTML元素都會變為一個節點，我們之後就可以透過DOM API去變更頁面的結構或樣式。
span & div有什麼差異
- span: inline element
- div: block element
兩者都是用來表示HTML中的某區塊，div用來包裹其他的元素集合(sections of document)，span則是用來包裹小區塊的文字。
我們會用div & span通常是為了後續想針對這些區塊套用特定的樣式，但沒有適合的語意標籤(比方說，我希望這個區塊是寬高400px的區塊，用section之類就比較奇怪，因為這個區塊本身沒有其他意義)
什麼是Meta Tags
Meta Tags是一串簡述頁面內容的程式碼，它並不會顯示在使用者所見的頁面上，而是存在於head標籤中，專門給搜尋引擎、或是真的想看的人去看的，meta tags會告訴搜尋引擎這個頁面的主要內容與分類，適當的meta tag有助於你網頁的搜尋排名。
css選擇器與id選擇器的差異在?
- css selector: 可以存在複數相同的class，不同的html element可以有相同的class name
- id selector : 唯一，一個id只能套用在一個html element上
此外在優先度上，id selector有著更高的優先度，下方的範例中，h1呈現的會是紅字
<h1 id= "demo" class="demo">Hello</h1>
#demo {
color: red
}
.demo {
color: green
}
你要怎麼根據不同尺寸套用特定的CSS樣式?
可以善用@media query， 舉個例子來說，下方的寫法就適用於所有小於980px的尺寸
@media(max-width:980px) {
// some styles
}
Pseudo-classes 與 Pseudo-elements的差別在?
- Pseudo-classes 偽類，表示某元素的狀態(state)，可以自由的加在指定的html元素上
常見的有
btn:hover {
}
input:focus {
}
a:visit {
}
- Pseudo-elements 偽元素，與偽類一樣可以自由加在指定的元素上，不過則有兩個主要用途
- 選定某個元素的特定部分 (::first-line、::first-letter之類的)
- 在既有的元素前後新增內容 (::before、 ::after之類的)
css中有那些常見的position，他們又有什麼差異?
- static 元素預設的position，若所有元素都是static，就會照你在HTML的結構呈現
- relative 元素將針對你設定的top、right、bottom & left值，與原位置進行偏移
- absolute 有點類似relative，不過被設為absolute的元素會去找第一個非static的元素作為parent作為起始位置，之後再根據你設定的top、right、bottom & left值進行偏移。
- fixed 元素會固定在相對於瀏覽器的固定位置，一樣透過你設定的top、right、bottom & left值調整。
PUT & POST的差別在?
PUT通常表示這個請求將更新現有的資料，若現有資料不存在則建立一個(update OR create)。而POST則會發出資料到後端，後端要拿這組資料做什麼相對多元，可能是更新資料、建立新資源或是一個表單的submit
cookies, session storage以及local storage三者的差異為?
- cookies
為伺服器回傳給用戶端的一小片資料，瀏覽器可以儲存這段資料並在下次造訪同網站時將夾帶該資料片段，協助該網站判斷目前的使用者。所以cookies很常被用來保存使用者的登入狀態。
- session storage & local storage
local storage & session storage，是HTML5後新增、為了解決cookie容量小(4kb)，不適用於大量資料儲存的情境。兩者都有相對cookies的大容量(5mb左右)，不過有些許的差異在- session storage 利用session儲存，分頁一關掉就消失
- local storage 一直存在使用者端，除非手動清除
請簡單說明什麼是CORS
Cross-Origin Resource Sharing，簡單說起來就是一種網路技術，用來處理跨domain的請求，也就說假設你目前存在A domain，當你的application要向其他網域請求資源時就會受到一些限制。
結語
今天簡單探討了一些前端常見的面試問題，看到cors那題讓我停頓了一下，大概知道是什麼，不過要轉換成一般人可以理解的文字著實讓我頭疼，好在查詢一些資源後就能比較有架構的解釋這樣的概念。裡面有些題目我也許答得不夠好，如果有任何建議的話都可以在下方回覆:D 雖然wordpress要回覆相當的麻煩~!
Danny的學習紀錄 