|
4 | 4 |
|
5 | 5 | 譯注:此翻譯版,主要給不能流利的讀英文的人看,相關專有名詞還是保留原文。翻譯不好地方請協助pull request.
|
6 | 6 |
|
7 |
| -此repository包含了一些前端開發的面試問題,來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目,應該就夠幫助你審查面試者是否擁有你需要的技能。 |
| 7 | +此 repository 包含了一些前端開發的面試問題,來審查一個有潛力的面試者。這並不是建議你對同一個面試者問上所有的問 (那會花費好幾小時)。從列表中挑幾個題目,應該就夠幫助你審查面試者是否擁有你需要的技能。 |
8 | 8 |
|
9 | 9 | [Rebecca Murphey](http://rmurphey.com/) 的 [Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/) 也是一篇很棒且值得讀的文章在你開始面試之前。
|
10 | 10 |
|
11 | 11 | **注意:** 請記住一點,很多問題都是隨情況而變化,能引發很多有趣的討論,比直接的標準答案更能讓你瞭解此人的能力。
|
12 | 12 |
|
13 | 13 | ## <a name='toc'>目錄</a>
|
14 | 14 |
|
15 |
| - 1. [最初貢獻者](#contributors) |
16 |
| - 1. [常見問題](#general) |
17 |
| - 1. [HTML 規格問題集](#html) |
18 |
| - 1. [CSS 規格問題集](#css) |
19 |
| - 1. [JS 規格問題集](#js) |
20 |
| - 1. [jQuery 規格問題集](#jquery) |
21 |
| - 1. [程式碼問題集](#jscode) |
22 |
| - 1. [有趣問題](#fun) |
23 |
| - 1. [其他參考資料](#references) |
| 15 | + 1. [最初貢獻者](#contributors) |
| 16 | + 1. [常見問題](#general) |
| 17 | + 1. [HTML 規格問題集](#html) |
| 18 | + 1. [CSS 規格問題集](#css) |
| 19 | + 1. [JS 規格問題集](#js) |
| 20 | + 1. [jQuery 規格問題集](#jquery) |
| 21 | + 1. [程式碼問題集](#jscode) |
| 22 | + 1. [有趣問題](#fun) |
| 23 | + 1. [其他參考資料](#references) |
24 | 24 |
|
25 | 25 | ####[[⬆]](#toc) <a name='contributors'>最初貢獻者:</a>
|
26 | 26 | 多數的問題都是從 [oksoclap](http://oksoclap.com/) 上的一個討論串截取出來,原創作人為 [Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish)) 並由以下的人員所貢獻:
|
|
47 | 47 | * 你最熟悉哪一套版本控制系統?
|
48 | 48 | * 你可以描述你在開發一個網站時的工作流程嗎?
|
49 | 49 | * 你可以描述漸進增強 (progressive enhancement) 和優美退化 (graceful degradation) 間的差異嗎?
|
50 |
| - * 加分題:描述這兩項的特色? |
| 50 | + * 加分題:描述這兩項的特色? |
51 | 51 | * 描述什麼是"Semantic HTML"?
|
52 | 52 | * 你怎麼優化一個網站的靜態檔案 (assets) 和資源 (resources)?
|
53 |
| - * 可能的解決方法包含如下: |
54 |
| - * File concatenation (檔案合併) |
55 |
| - * File minification (最小化文檔) |
56 |
| - * CDN Hosted (CDN託管) |
57 |
| - * Caching (快取) |
58 |
| - * …之類 |
| 53 | + * 可能的解決方法包含如下: |
| 54 | + * File concatenation (檔案合併) |
| 55 | + * File minification (最小化文檔) |
| 56 | + * CDN Hosted (CDN託管) |
| 57 | + * Caching (快取) |
| 58 | + * …之類 |
59 | 59 | * 為什麼用多個域名來放置網站資源會比較好?
|
60 |
| - * 瀏覽器一次能在同一個域名下載多少資源? |
| 60 | + * 瀏覽器一次能在同一個域名下載多少資源? |
61 | 61 | * 說出三種能加快網頁讀取速度的方法? (感覺上的速度或是真正的讀取時間)
|
62 | 62 | * 如果你加入了一個專案,但是他們的程式碼用tabs,但是你習慣用spaces (空白鍵),你會怎麼做?
|
63 |
| - * 建議此專案使用,例如:EditorConfig (http://editorconfig.org) |
64 |
| - * 訂定一個公約 (保持一致) |
65 |
| - * `issue :retab! command` (retab! 在vim中用來把所有spaces換成tabs) |
| 63 | + * 建議此專案使用,例如:EditorConfig (http://editorconfig.org) |
| 64 | + * 訂定一個公約 (保持一致) |
| 65 | + * `issue :retab! command` (retab! 在vim中用來把所有spaces換成tabs) |
66 | 66 | * 寫一個簡易的投影片頁面
|
67 |
| - * 加分如果沒有用到 JavaScript |
| 67 | + * 加分如果沒有用到 JavaScript |
68 | 68 | * 你用什麼工具來測試你的程式碼效能?
|
69 |
| - * Profiler, [JSPerf](http://jsperf.com/), [Dromaeo](http://dromaeo.com/) |
| 69 | + * Profiler, [JSPerf](http://jsperf.com/), [Dromaeo](http://dromaeo.com/) |
70 | 70 | * 如果今年你能精通一項技術,那會是什麼?
|
71 | 71 | * Long-Polling, Websockets, SSE(Server-Sent Event)之間有什麼差異?
|
72 | 72 | * 描述標準和製定標準機構的重要性?
|
|
78 | 78 | * `doctype` 做什麼用的?
|
79 | 79 | * standards mode 和 quirks mode 有什麼不同?
|
80 | 80 | * 使用 XHTML 有什麼限制??
|
81 |
| - * 如果網頁使用 `application/xhtml+xml` 會有問題嗎? |
| 81 | + * 如果網頁使用 `application/xhtml+xml` 會有問題嗎? |
82 | 82 | * 你怎麼做一個需要支持多國語言的網頁?
|
83 |
| - * 當開發和設計一個多國語言網站時,有什麼需要小心的? |
| 83 | + * 當開發和設計一個多國語言網站時,有什麼需要小心的? |
84 | 84 | * `data-` 屬性的好處在哪?
|
85 | 85 | * 考慮 HTML5 作為一個開放式的網站平台。HTML5 的 building blocks 有哪些?
|
86 | 86 | * 請描述 cookies, sessionStorage 和 localStorage 的不同?
|
|
95 | 95 | * 你最喜愛的圖片取代技術是什麼?你什麼時候會用到?
|
96 | 96 | * CSS 屬性 hacks, 也條件引用 .css 檔案, 或是… 其他的?
|
97 | 97 | * 你怎麼讓你的網頁支援有功能限制的瀏覽器?
|
98 |
| - * 你會使用什麼樣的技術/流程 ? |
| 98 | + * 你會使用什麼樣的技術/流程 ? |
99 | 99 | * 有什麼方法來隱藏網頁的內容? (只顯示在 screen readers)?
|
100 | 100 | * 你使用過 grid system 嗎?如果有的話?你較推薦哪個?
|
101 | 101 | * 你曾經實作 media queries 或是 mobile specific (手機規格的) layouts/CSS?
|
102 | 102 | * 你熟悉任何有關 SVG 嗎?
|
103 | 103 | * 你如何優化你的網頁以利於列印?
|
104 | 104 | * 在寫高效的 CSS 時,有什麼要注意的?
|
105 | 105 | * 使用 CSS preprocessors 的優點和缺點是什麼? (SASS, Compass, Stylus, LESS)
|
106 |
| - * 如果是這樣, 描述你使用過的喜歡和不喜歡的 CSS preprocessors |
| 106 | + * 如果是這樣, 描述你使用過的喜歡和不喜歡的 CSS preprocessors |
107 | 107 | * 你如何使用非標準字體來實作網頁設計?
|
108 |
| - * Webfonts (font services 像是: Google Webfonts, Typekit …等等) |
| 108 | + * Webfonts (font services 像是: Google Webfonts, Typekit …等等) |
109 | 109 | * 解釋瀏覽器如何按照 CSS selector 找到對應的 element?
|
110 | 110 | * 解釋你所認知的 box model,以及你如何在 CSS 告訴瀏覽器使用不同 box model 來呈現圖層?
|
111 | 111 | * 請解釋 ```* { Box-sizing: Border-box; }```?並且說明使用它的好處
|
112 | 112 | * 請列出您記憶中 display 屬性的全部值
|
113 | 113 | * 請說明 inline 和 inline-block 的差異性?
|
114 | 114 | * 請說明 relative、fixed、absolute 和 static 元件差異性
|
115 | 115 | * 你目前有使用哪一套 CSS Framework 在開發環境或產品線上?
|
116 |
| - * 如果有,請問是哪一套,並且描述如果改善或提昇 CSS Framework? |
| 116 | + * 如果有,請問是哪一套,並且描述如果改善或提昇 CSS Framework? |
117 | 117 | * 請問你有使用過 CSS Flexbox 或 Grid specs?
|
118 |
| - * 如果有,你對於它們的效能論點想法是? |
| 118 | + * 如果有,你對於它們的效能論點想法是? |
119 | 119 |
|
120 | 120 | ####[[⬆]](#toc) <a name='js'>JS 規格問題集:</a>
|
121 | 121 |
|
|
126 | 126 | * AMD vs. CommonJS?
|
127 | 127 | * 什麼是 hashtable?
|
128 | 128 | * 解釋下列程式碼為什麼不是IIFE: `function foo(){ }();`. (Immediately Invoked Function Expression,立即函式)
|
129 |
| - * 需要修改那裡使它成為IIFE? |
| 129 | + * 需要修改那裡使它成為IIFE? |
130 | 130 | * `null、`undefined`和 `undeclared`變數之間有什麼差異?
|
131 |
| - * 你如何檢查? |
| 131 | + * 你如何檢查? |
132 | 132 | * 什麼是 closure, 如何/為什麼使用?
|
133 | 133 | * anonymous functions 典型的使用時機?
|
134 | 134 | * 描述 "JavaScript module pattern",你什麼情況會用到?
|
135 |
| - * 加分題:清楚地提到 namespacing. |
136 |
| - * 如果你的 module 沒有命名空間怎辦? |
| 135 | + * 加分題:清楚地提到 namespacing. |
| 136 | + * 如果你的 module 沒有命名空間怎辦? |
137 | 137 | * 你如何架構你的程式碼? (module pattern, classical inheritance?)
|
138 | 138 | * host objects 和 native objects 有何不同?
|
139 | 139 | * `function Person(){}`、`var person = Person()`和`var person = new Person()`之間有何不同?
|
|
142 | 142 | * 你什麼時候優化你的程式?
|
143 | 143 | * 你可以描述 inheritance 如何運作在 JavaScript?
|
144 | 144 | * 你什麼情況會使用 `document.write()`?
|
145 |
| - * 多數的廣告產生仍然使用 `document.write()` 雖然這樣用會令人皺眉 |
| 145 | + * 多數的廣告產生仍然使用 `document.write()` 雖然這樣用會令人皺眉 |
146 | 146 | * feature detection, feature inference, 和使用 UA string 有什麼不同?
|
147 | 147 | * 盡可能的詳述描述 AJAX。
|
148 | 148 | * 描述 JSONP 如何運作 (且為何它不是真正的 AJAX)
|
149 | 149 | * 你是用過 JavaScript templating (樣板) ?
|
150 |
| - * 如果有的話,你有用過哪些 libraries? (Mustache.js, Handlebars … 等) |
| 150 | + * 如果有的話,你有用過哪些 libraries? (Mustache.js, Handlebars … 等) |
151 | 151 | * 描述 "hoisting"
|
152 | 152 | * 描述 event bubbling.
|
153 | 153 | * "attribute" 和 "property" 的不同?
|
|
177 | 177 | * `.end()` 做些什麼?
|
178 | 178 | * 如何給一個綁定的 event handler 命名空間?為什麼這樣做?
|
179 | 179 | * 說出四種可以傳到 jQuery 方法的值
|
180 |
| - * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object … 等。 |
| 180 | + * Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object … 等。 |
181 | 181 | * 什麼是 effects (or fx) queue?
|
182 | 182 | * `.get()`, `[]`, 和 `.eq()` 有何不同?
|
183 | 183 | * `.bind()`, `.live()`, 和 `.delegate()` 有何不同?
|
|
0 commit comments