快速挑戰10題常見的基礎前端面試題目吧!

前言

工程師的面試其中一個好處是,有一部分的問題是你可以預期、並透過練習掌握的,像是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要回覆相當的麻煩~!

參考資料

原來 CORS 沒有我想像中的簡單

What exactly is CORS and how to handle it?

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s