Web前端面試技術點

常規問題：

通常來講會問以下幾方面的問題：

1. 作過最滿意的項目是什麼？
2. 項目背景
3. 爲何要作這件事情？
4. 最終達到什麼效果？
5. 你處於什麼樣的角色，起到了什麼方面的做用？
6. 在項目中遇到什麼技術問題？具體是如何解決的？
7. 若是再作這個項目，你會在哪些方面進行改善？

技術二面主要判斷技術深度及廣度

1. 你最擅長的技術是什麼？
2. 你以爲你在這個技術上的水平到什麼程度了？你以爲最高級別應該是怎樣的？
3. 瀏覽器及性能
4. 一個頁面從輸入 URL 到頁面加載完的過程當中都發生了什麼事情？越詳細越好
   （這個問既考察技術深度又考察技術廣度，其實要答好是至關難的，注意越詳細越好）
5. 談一下你所知道的頁面性能優化方法？
6. 這些優化方法背後的原理是什麼？
7. 除了這些常規的，你還了解什麼最新的方法麼？
8. 如何分析頁面性能？
9. 其它
10. 除了前端之外還了解什麼其它技術麼？
11. 對計算機基礎的瞭解狀況，好比常見數據結構、編譯原理等

---

技術點溝通：

HTML+CSS

一、盒子模型，塊級元素和行內元素特性與區別。
二、行內塊的使用，兼容性解決。
三、清除浮動的方式以及各自的優劣。
四、文檔流的概念、定位的理解以及z-index計算規則&瀏覽器差別性。
五、CSS選擇器以及優先級計算。
六、經常使用的CSS hack。
七、遇到的兼容性問題與解決方法。
八、垂直水平居中的實現方式。
九、經常使用佈局的實現（兩列布局、三列適應佈局，兩列等高適應佈局等）。

---

Javascript

一、犀牛書封面的犀牛屬於神馬品種？（蛋逼活躍氣氛用。。。）
二、經常使用的瀏覽器內核。
三、經常使用的DOM操做，新建、添加、刪除、移動、查找等。
四、String於Array經常使用方法。
五、設備與平臺監測。
六、DOM的默認事件、事件模型、事件委託、阻止默認事件、冒泡事件的方式等。
七、jQuery的bind、live、on、delegate的區別（考察點與上一條重疊，切入點不一樣）。
八、JS變量提高、匿名函數、原型繼承、做用域、閉包機制等。
九、對HTTP協議的理解。
十、Ajax的經常使用操做，JS跨域的實現原理。

---

HTML:

1. 語義標籤
2. 語義化

---

CSS:

1. 動態居中
2. 動畫
3. Bootstrap 樣式類
4. Preprocessor
5. 兼容性 Hack與特徵檢測
6. CSS3屬性與性能

---

JS:

1. Name hoisting
2. Prototype
3. Closure
4. Main loop
5. Promise
6. Delegation
7. Cross domain

---

Mobile:

1. 漸進加強
2. 移動端交互
3. 兼容性問題
4. Debug工具 方法

---

1. 主體是看簡歷發揮，對方寫什麼就問什麼爲主：框架、庫、瀏覽器工做原理、NLP、算法、HTTP... 
2. 輔助問題幾乎是我我的必備的問題：爲何作前端，學習前端過程。

一、跟什麼人在一塊兒工做
二、過去項目的挑戰
三、自學的途徑

3個問題基本上就知道這我的的能力水平和瓶頸了，人的不少侷限都是被環境限制的，經過閒聊中夾雜的不經意的問題，候選人的畫像就已經很鮮明瞭。處於當前的環境多長時間，有沒有突破環境限制的行動，就能評估出潛力和眼界。

什麼瀏覽器兼容、做用域、框架等等的東西不會，不記得均可以學，要不了多長時間，關鍵仍是有沒有潛力、有沒有好的習慣。

---

在能力方面：

1. 對 HTML / CSS / JavaScript 具備專家級別的知識；
2. 有較熟練使用 AngularJS / Ember.js / jQuery 或者其它類庫的經驗；
3. 較熟悉第三方組件（插件）生態環境及具體案例；
4. 有較熟練使用 Jade / Swig / Handlebars / Mustache 或者其它模板引擎的經驗；
5. 有較熟練使用 SASS 或者其它 CSS 預處理器的經驗；
6. 有較熟練使用 CoffeeScript 的經驗；
7. 對 CSS / JavaScript 設計模式有很好的認識及應用；
8. 對經常使用數據結構和算法熟悉；
9. 有使用 GruntJS / GulpJS 任務運行器的經驗；
10. 有使用 Yeoman 生成器的經驗；
11. 有諸如 Bower / Volo / JSPM 等前端靜態資源包管理器使用經驗；
12. 熟悉本地及遠程（甄姬）調試操做；
13. 有 Git 的使用經驗；

---

Q：簡單介紹下 React / Vue 的生命週期

A：幾個鉤子函數基本能報出來（若是不講究按順序、按掛載/更新區分、能把單詞用英文念出來而且唸對的話），稍微深刻一點問下各個階段都作了什麼，一半以上就「不太清楚」了。更有甚者我問
React，對方回答 created、mounted，提醒以後還以爲本身沒錯的。

Q：【React】定義一個組件時候，如何決定要用 Functional 仍是 Class？

A：簡單的用 Function，複雜的用 Class。（不能算錯吧……但也不能算答到點子上）追問怎麼界定「複雜」，答不上來。

Q：【React】HOC、（非）受控組件、shouldComponentUpdate、React 16 的變化

A：不清楚、沒接觸過。

Q：【Vue】介紹一下計算屬性，和 data、methods、watch 的異同

A：基本都能巴拉一些，說的大部分都對，但就是說不到最關鍵的「當且僅當計算屬性依賴的 data 改變時纔會自動計算」。

Q：【Vue】爲何 SFC 裏的 data 必須是一個函數返回的對象，而不能就只是一個對象？

A：我認可這個問題有點小難，有必定的區分度，不是每一個人都有關注過，可是官方文檔有說明這一點，但凡看過的確定有印象。即使沒完整看過文檔，在初次學習的過程當中難道就不以爲奇怪嗎？「學而不思」的人和「學而思」的人，區別仍是挺大的。

Q：CSS 選擇器的權重

A：經典問題了吧？背都能背出來吧？僞類、僞元素分不清楚，只知道內聯、!important、ID、Class
之間的順序，加上其它的就懵了，並且只說誰大於誰，講不出具體的計算方法。單層選擇器比較還行，幾個疊加起來就迷糊了。

Q：JS 有哪幾種原始類型

A：基礎題，能說上來幾個，答不全，主要問題集中在 null 和 undefined 沒考慮進去、對象和數組算不算原始類型、以及 Symbol
不少人不知道。

Q：ES 2015+ 有哪些新特性

A：這題能夠說的不少，根據應聘者的回答去展開，能夠很容易地看出應聘者有沒有系統地學習過這方面的東西，以及有沒有持續地去跟進語言標準的發展。但這一題能回答的比較好的，寥寥無幾，大部分是遇到問題而後零零散散現學的，不夠全面、也不夠深刻，簡單用過，但稍微問點細節就只有「尷尬而不失禮儀的微笑」了。

Q：工程化工具的使用（Webpack、ESLint、Yarn、Git、……）

A：基本都有所接觸，但只是「用過」，算不上「會用」，一切順利還好，真遇到問題了，立馬就懵。

Q：Node.js

A：寫過 Demo 的水平。（比較初級）

Q：將來 1~2 年的職業規劃、下一步最想學的技術、最但願往什麼方向發展、怎麼看待XXX技術

A：大部分人對本身沒有一個明確的態度和規劃。說白了就是還沒從學校裏出來，什麼都等着別人來安排。

通用技能有哪些（請看以下圖）？