面試題目與解答整理-前端網站設計師

整理照片的時候發現半年多前面試的題目,看了一遍發現依然很多觀念不清楚不知道,正好當作複習,全部再好好研究一遍。

黑色是目前自己的理解,紅色是理解錯誤,藍色是上網找的資訊,綠色是參考資料。

 

  1. 請簡單說明callback function,通常什麼時候會用到

  function自己呼叫自己,就叫callback function

  ↑是其中一種callback function,但不等於。

  回呼函式

 

  回呼函式(callback function)是指能藉由參數(argument)通往另一個函式的函式。它會在外部函式內調用、以完成某些事情。

  可以確保執行順序,但也有很多的問題(缺點)  

  你懂JavaScript 嗎?#23 Callback | Summer。桑莫。夏天

 

  callback完全可以直接寫一篇文章,這個部份至今我還是覺得我瞭解的是很模糊的。

 

  2. 請問什麼是ajax,通常什麼時候會用到

  ajax(Asynchronous JavaScript and XML)

  要在瀏覽器上面發送 Request,必須使用的技術,

  同步 => 程式一般是執行完第一行才執行第二行,

  非同步 => 但如果想要執行第一行時不用等其結束就執行第二行,

  這種時候就會使用ajax

  輕鬆理解 Ajax 與跨來源請求

 

  3. 請畫出CSS Box Model並說明

  CSS Box Model是瀏覽器在屏幕上表示元素的方式,由外而內組成是:

  margin => border => padding => content

  用chrome點選f12基本都能看到

  Can you explain the CSS box model?

 

  4. 請說明px與em的差別

  1em=16px

  px:絕對單位,代表螢幕中每個「點」( pixel )。

  em:相對單位,每個子元素透過「倍數」乘以父元素的 px 值。

  rem:相對單位,每個元素透過「倍數」乘以根元素(通常就是body)的 px 值。

  一次搞懂 CSS 字體單位:px、em、rem 和 %

 

   5. 請說明sessionStorage、localStorage與cookie的差別

  sessionStorage生命週期只有在單一網頁,網頁關閉後即消失,

  localStroage除非親自刪除,否則同個瀏覽器中都可以存取。

  cookie為伺服器傳送給使用者瀏覽器的一個小片段資料,通常用於保存

  (1) 伺服器應該記住的資訊,如:帳號登入、購物車

  (2) 個人化,如:使用者設定、佈景主題

  (3) 追蹤:記錄並分析使用者行為

  其餘資訊通常以localStorage, sessionStorage (Web storage API) 儲存。

  HTTP cookies

  這篇寫得很詳細。

  [不是工程師] Cookie 是文檔還是餅乾?簡述HTTP網頁紀錄會員資訊的一大功臣。

 

  6. 簡單說明何謂viewport

  使用者使用裝置的可視範圍(?) => 螢幕上瀏覽器的可視區域

  以我對viewport近乎一無所知的角度來看,我覺得這篇寫得挺好挺細緻的,但css目前不算我重心,沒有詳讀。

  HINA::工程幼稚園 [CSS] 淺談 @viewport 與 @media

  這篇比較淺顯,有code輔助說明,長度適中,比較不會看得不耐煩XD

  Responsive Web Design 基礎 : <meta name=”viewport” > 設定

 

  viewport tag 的定義只對mobile device有用,用來控制 mobile device 顯示網頁內容時的一些設定

  <meta name="viewport" content="width=device-width, initial-scale=1" >

  // 以下兩種設定都可以防止使用者做畫面縮放,將畫面鎖在縮放比例 100%

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" >

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

 

  7. 請說明你對XSS與CSRF的了解

  這題感覺比較是網管的範圍,沒有仔細研究。

  XSS,跨站腳本攻擊(Cross Site Scripting)。

  用戶訪問的是合法網站A的網頁,只是該網頁被植入了惡意代碼,然後導向到網站B,用戶甚至可能不知道有網站B的存在。

  CSRF,跨站請求偽造(Cross-site Request Forgery)。

  則是用戶訪問了合法網站A後,再去訪問惡意網站B,然後惡意網站B冒充該合法用戶(偽造)去向網站A發起請求。

  淺談兩種常見的跨站攻擊(XSS和CSRF)

 

  8. 你通常會用什麼方式優化你的網站速度(例如壓縮js、css等等)

  壓縮js與css

  減少非必要的api請求

  壓縮圖片、使用雪碧圖

  避免GIF、PNG圖檔(比較大),避免直接上傳影片(善用平台如youtube等)

  

  9. 請將以下css渲染優先順序作一個排序

  (3)tag裡面的style=””屬性 => (2)html裡面的<style></style> => (1)瀏覽器的自定義設定 => (5)瀏覽器的預設值 => (4)<link href=”aaa.css”> ???

  (3)tag裡面的style=””屬性 => (2)html裡面的<style></style> => (4)<link href=”aaa.css”> => (1)瀏覽器的自定義設定 => (5)瀏覽器的預設值

 

  10. 說明xml與json的區別

  json可以裝的東西比較多????

  【XML】Extensible Markup Language 

  優點:

    (1)格式統一(提供統一的方法來描述和交換結構化數據) 

    (2)廣泛使用

    (3)對數據的描述性較佳

  缺點:

    (1)XML文件龐大,文件格式複雜,傳輸占帶寬;

    (2)伺服器端和客戶端都需要花費大量代碼來解析XML,導致伺服器端和客戶端代碼變得異常複雜且不易維護;

    (3)客戶端不同瀏覽器之間解析XML的方式不一致,需要重複編寫很多代碼;

    (4)伺服器端和客戶端解析XML花費較多的資源和時間。

 

  【JSON】JavaScript Object Notation 

  優點:

    (1)數據格式易於讀寫,格式都是壓縮的,占用帶寬小;

    (2)易於解析

    (3)因為JSON格式能直接為伺服器端代碼使用,大大簡化了伺服器端和客戶端的代碼開發量,易於維護。

  缺點:

    (1)JSON格式目前在Web Service中推廣還屬於初級階段,還沒有XML那麼通用

 

  這篇對兩者的比較非常詳細,不過沒有例子,到底還是有點抽象。

  JSON與XML優缺點對比分析

  這篇有簡單的例子可以參考,跟上篇一起看,會有更具體的感受。

  [Day7] 基本資料格式: XML 和 JSON