如何面試前端工程師?
需要考察的重點有哪些?有什麼方法能夠有效地判斷其水平?
這幾天剛好在逛知乎,路過順便說一下我們的「開源」的面試方法,大多是我團隊里同學整理的,所有的面試理論都基本如此。
提前說明,禁止轉載。
一般都是結構化的,結構化的面試如:
- 一個頁面從輸入 URL 到頁面載入完的過程中都發生了什麼事情?
- 你原來做過哪些讓你印象深刻的項目?用 STAR 面試法來不停追問細節。
結構化面試最主要是方便你 能比較。
完畢後會針對性的對 ta 熟悉領域深入詢問,技術點因人而異了。
最後是些軟素質。
看上去就這麼點東西,但問得怎麼樣,就看面試官水平了,通常面了幾百號人,也被人面過以後基本都心裡有數了。
下面轉一下我們的面試方法。
面試方法
- 代碼編寫筆試
- 問答式
過程遵循 STAR 面試法 。
校招和社招的是不一樣的,校招會更加關注基礎知識,而社招會更加關注之前做過的項目情況。
項目相關
面試其實說白了就是根據一個人之前的經歷,來判斷出後續這人會做得怎樣,如果你之前從沒做成過一件事情,憑什麼讓別人相信你之後能做成呢?因此無論哪裡的面試都會問你之前做過的項目
項目可以是多人協助開發一個產品,也可以是自己個人做過的業餘應用,只需介紹 1、2 個就夠了,需要注意的是 1 + 1 != 2,做了兩個平庸的項目不如做了一個好項目。
一般來說會問如下幾方面的問題:
- 做過最滿意的項目是什麼?
- 項目背景
- 為什麼要做這件事情?
- 最終達到什麼效果?
- 你處於什麼樣的角色,起到了什麼方面的作用?
- 在項目中遇到什麼技術問題?具體是如何解決的?
- 如果再做這個項目,你會在哪些方面進行改善?
技術相關 - 1 面
技術一面主要判斷對基礎知識的掌握
- 描述一個你遇到過的技術問題,你是如何解決的?
- 這個問題很常見,有沒有遇到過很不常見的問題?比如在網上根本搜不到解決方法的?
- 是否有設計過通用的組件?
- 請設計一個 Dialog(彈出層) / Suggestion(自動完成) / Slider(圖片輪播) 等組件
- 你會提供什麼介面?
- 調用過程是怎樣的?可能會遇到什麼細節問題?
- 更細節的問題推薦參考 darcyclarke/Front-end-Developer-Interview-Questions · GitHub
技術相關 - 2 面
技術二面主要判斷技術深度及廣度
- 你最擅長的技術是什麼?
- 你覺得你在這個技術上的水平到什麼程度了?你覺得最高級別應該是怎樣的?
- 瀏覽器及性能
- 一個頁面從輸入 URL 到頁面載入完的過程中都發生了什麼事情?越詳細越好
- (這個問既考察技術深度又考察技術廣度,其實要答好是相當難的,注意越詳細越好)
- 談一下你所知道的頁面性能優化方法?
- 這些優化方法背後的原理是什麼?
- 除了這些常規的,你還了解什麼最新的方法么?
- 如何分析頁面性能?
- 一個頁面從輸入 URL 到頁面載入完的過程中都發生了什麼事情?越詳細越好
- 其它
- 除了前端以外還了解什麼其它技術么?
- 對計算機基礎的了解情況,比如常見數據結構、編譯原理等
興趣相關
- 最近在學什麼?接下來半年你打算學習什麼?
- 做什麼方面的事情最讓你有成就感?需求設計?規劃?具體開發?
- 後續想做什麼?3 年後你希望自己是什麼水平?
主動性相關
- 在之前做過的項目中,有沒有什麼功能或改進點是由你提出來的?
- 是否有參與和改進其它開源項目
還有些與話題無關我就不轉了。
上面大多數回答都列出了很好的面試問題。作為team裡面充當打先鋒的第一輪面試的人,我這裡也隨便說幾個自己不成熟的小建議吧:
- 除了最核心的JS水平,不要因為其他單一方面的薄弱而淘汰人
- 少問框架、庫相關的問題。對於這類問題,要多問Why和How。
- 多問原生JS
- 熱愛這個行業
1. 除了最核心的JS水平,不要因為其他單一方面的薄弱而淘汰人
前端有個特點就是,知識特別雜,且相互關聯可能並不大。首先標準的洗剪吹三件套JS/CSS/HTML,其實完全可能只學其中一個而不太精通另外兩個。當然,我覺得不精通JS是不能接受的。但是如果JS精通的情況下,CSS並不是很熟練,在我看來是完全可以接受的。同理,像瀏覽器兼容性/移動兼容性這種在我看來都是nice-to-have的能力。
例如在某個前端群里,某大神還暴露出他不知道debounce。所以如果僅僅因為幾個你用過function對方沒用過的就懷疑對方水平的話,那就只能和大神無緣了。
2. 少問框架、庫相關的問題。對於這類問題,要多問Why和How。
這點其實跟上面一點很相似。因為圈子裡技術棧非常多(React + Webpack, Backbone + RequireJS, Angular等等等),所以很可能你面試的人之前接觸的棧和目前需要的職位是非常不一樣的。如果你強行讓一個只寫過Backbone的人解釋React的lifecycle的話,顯然是沒有意義的。但像jQuery或者underscore這種基本算是stdlib的庫的話,確實可以簡單的考察一下。
總的來說,凡是問框架/庫相關的問題,一定不能簡單停留在問某個函數怎麼用,而是要多深入去問「為什麼需要這種設計」和「它是怎麼實現的」。所謂對一個框架的掌握程度,衡量標準應該是使用者能否能深刻的理解這個框架的設計理念解決了什麼問題。
舉個例子,也許我會去問如何用jQuery實現動畫效果(.animate()),但我接下來一定會繼續問面試者jQuery內部是如何實現animate這個function的。
再舉一個React的例子,也許我會問props和state的區別(這個問題認真看過docs肯定都能答上來),但接下來可能我會給出一個既能用props又能用state的例子讓對方來解釋一下各有什麼好處。這種開放型的問題沒有什麼很正確的答案,但是可以從對方的回答能看出對方有沒有真正深入的理解兩者的區別。
3. 多問原生JS
其實多問原生JS的問題並不是說我們就拒絕所有三方庫,也不是說什麼寫原生JS就有特別的優越感。寫原生JS最大的好處就是能更多的和瀏覽器,網路等相對比較「底層」的東西打到更多交道。
同樣一個jQuery的例子。如果你只寫過純jQuery的代碼的話,很可能你並不知道為什麼下面第一種寫法比第二種寫法好多少倍。
// Good
let $body = $("body");
for (let i = 0; i &< 100000; i ++) {
$body.text();
}
// Bad
for (let i = 0; i &< 100000; i ++) {
let $body = $("body");
$body.text();
}
// 其實這裡並不是想強調let放在循環裡面和外面的區別,而是想強調通過DOM去獲取一個element是很費時的操作,懂得意思就好了。
4. 熱愛這個行業
作為一個技術半衰期只有一年的方向,隨時保持進取心是非常非常非常重要的。- ES6有哪些新特性?用過嗎?江湖傳言 @Saviio 僅用一行new Set()就征服了面試官,拿到了offer ?(?д??)
- 有沒有任何開源的項目?
- 學過什麼前端以外的新東西?
當然這些東西不必全部都掌握(做過),但如果沒有任何一項有經驗的話,那確實就讓人懷疑你的進取心了。
以上就是我的一些不成熟的小建議,歡迎探討 (o?ω?o)
自己總結的面試題,感興趣的看下。
HTML+CSS
1、盒子模型,塊級元素和行內元素特性與區別。
2、行內塊的使用,兼容性解決。
3、清除浮動的方式以及各自的優劣。
4、文檔流的概念、定位的理解以及z-index計算規則瀏覽器差異性。
5、CSS選擇器以及優先順序計算。
6、常用的CSS hack。
7、遇到的兼容性問題與解決方法。
8、垂直水平居中的實現方式。
9、常用布局的實現(兩列布局、三列適應布局,兩列等高適應布局等)。
Javascript
1、犀牛書封面的犀牛屬於神馬品種?(蛋逼活躍氣氛用。。。)
2、常用的瀏覽器內核。
3、常用的DOM操作,新建、添加、刪除、移動、查找等。
4、String於Array常用方法。
5、設備與平台監測。
6、DOM的默認事件、事件模型、事件委託、阻止默認事件、冒泡事件的方式等。
7、jQuery的bind、live、on、delegate的區別(考察點與上一條重疊,切入點不同)。
8、JS變數提升、匿名函數、原型繼承、作用域、閉包機制等。
9、對HTTP協議的理解。
10、Ajax的常用操作,JS跨域的實現原理。
面試題的儲備大家都是類似的,差別在於如何根據團隊需要組織問題,如何把控面試過程從而讓雙方都有很好的體驗。
一場好的面試要有以下幾個要點:- 面試官充分了解團隊需求
- 面試題事先有準備,組織好大綱
- 不同面試者之間的問題是相似的,有可比性
- 根據面試者的特點績效發掘,充分發揮其特長,明確其技能缺陷
- 對面試者的評價要同步,盡量獲得雙方認可
我會從三個角度評估一位前端工程師,分別是「製作者」、「開發者」和「工程師」,三種角度之間沒有高下之分,名稱不必糾結。每個角度的考察點根據團隊需求定製。
大綱如下:
--------------------
相互自我介紹
工作經歷簡介
能力亮點自述
期望的職業等級
---------------------
製作者 - 技術專攻
HTML:- 語義標籤
- 語義化
CSS:
- 動態居中
- 動畫
- Bootstrap 樣式類
- Preprocessor
- 兼容性 Hack與特徵檢測
- CSS3屬性與性能
JS:
- Name hoisting
- Prototype
- Closure
- Main loop
- Promise
- Delegation
- Cross domain
Mobile:
- 漸進增強
- 移動端交互
- 兼容性問題
- Debug工具 方法
性能:
- JS
- Cache control
- 性能測試
---------
開發者 - 行業視野
Libs and Frameworks
NodeJS
開發工具與效率
Workflow - Grunt and all
Github
Sites Projects Blogs
---------
工程師 - 產品與團隊
Architecture
UT E2E
響應式設計
系統化設計
需求評審
代碼管理 - Git SVN 運維
項目管理 - 項目評估 任務分解 追蹤方法
團隊管理 - 標準 流程 文檔建設
技術影響力
職業發展規劃
----------------------
面試者提問
對面試的評價
理解偏差最大的地方
擅長卻沒有發揮出來的地方
期望職責
最新前端開發面試題
My-blog/Front-end-Developer-Questions at master · markyun/My-blog · GitHub
如果是我,我會問「js如何實現多重繼承」,然後再由這個問題聯繫到原型鏈,new機制,函數,作用域鏈,this,閉包,這些問題可以看出應聘者是不是真正會js還是披著java/c++外衣以為會js。再高級的我會問js設計模式,mvc模式。
1、跟什麼人在一起工作
2、過去項目的挑戰
3、自學的途徑
3個問題基本上就知道這個人的能力水平和瓶頸了,人的很多局限都是被環境限制的,通過閑聊中夾雜的不經意的問題,候選人的畫像就已經很鮮明了。處於當前的環境多長時間,有沒有突破環境限制的行動,就能評估出潛力和眼界。
什麼瀏覽器兼容、作用域、框架等等的東西不會,不記得都可以學,要不了多長時間,關鍵還是有沒有潛力、有沒有好的習慣。
1. 主體是看簡歷發揮,對方寫什麼就問什麼為主:框架、庫、瀏覽器工作原理、NLP、演算法、HTTP...
2. 輔助問題幾乎是我個人必備的問題:為什麼做前端,學習前端過程。
所謂:聞道有先後,要了解他的學習能力,一個東西他努力一周就能上手幹事,一月能有自己的獨到意見,半年能有獨擋一面的能力,以「聞道先」去判斷一個人的能力往往是有問題的
對於面試官,給出點建議:
1)給不同的面試者設定不同的參考標準。如果是應屆畢業生或者面試的是比較初級的職位,則考點傾向於基礎知識、基本常識、發展潛力、溝通能力。如果面試職務是資深或者高級職務,則結合工作經歷、項目經歷、知識面、大局觀、領導力等方面進行評估。 切忌拿一個標準去對待所有面試者。
2)不要拿自己日常中遇到的稀奇古怪的問題自以為很高級的東西刁難面試者。這種問題不能反映出面試者的真實水平,相信他也能講幾個你從來沒碰到過的東西。面試的目的是過濾出能幹活、可調教、聰明的同伴,重在考察基本技能的掌握以及是否有快速學習能力、思考能力等。
3)尊重你的面試者,即使他能力真的很難達到要求。最好能時刻保持微笑,表現出自己的涵養。
http://bbs.jirengu.com/?qa=tag/%E9%9D%A2%E8%AF%95
1、學習能力
2、是不是很聰明
3、編程思維
4、基礎
5、人品
6、項目經驗
我畢業那年面試百度的前端,被問的一道題很不錯,也是我現在比較常用的一個問題:如何基於http協議建立一個長連接?
在校招的時候問一問專業課的入門知識,比如說一說計算機網路五層模型,路由器和交換機分別工作在在那一層?http協議呢?還有網站登陸都加驗證碼是為了解決哪方面的安全問題?數據結構課上學過的排序演算法列舉幾個?一個基本有序數組用什麼排序演算法最快?
這幾個問題基本上能刷掉絕大多數人了,
以上僅供參考哈h5bp/Front-end-Developer-Interview-Questions · GitHub
國外很多高手匯總常用問題,可以參考。受邀作答。
我個人認為比較重要的有以下幾點:- 熱情。前端涉及的知識比較複雜,職業定位非常模糊,需要有足夠的熱情去完善各個瀏覽器的兼容性,去推動與RD、PM、UI的協作,最終產出漂亮的產品。
- 基礎。這方面前面已經講的非常好了,我補充一點:我們會更關注面試者本身學習的方法和深度。例如對於資深面試者會問一些諸如Execution Context、Block Formatting Context之類的問題。理想中的面試者應該具有知其所以然的探索精神。
- 潛力。我們希望能夠找到很有潛力的工程師,例如有很好的計算機基礎、ACMer、Unix愛好者、Design愛好者等等。
未鵬的這篇文章很好的解釋了如何更加準確的面試一個人:http://mindhacks.cn/2011/11/04/how-to-interview-a-person-for-two-years/
從前端開發要掌握的技術來講,前面已經說得差不多了。我主要想從面試者的角度談一談看法。
如果是我面試,就給應聘者一個開放的項目,可以提供伺服器端API或數據服務,限定一周時間,這叫試做。然後,根據評審確定入圍的人,再面試。面試可以圍繞項目展開,首先讓面試者圍繞HTML、CSS和JavaScript講一講設計思路、實現過程、遇到了什麼困難,如何解決的,最終實現方案與設計有什麼出入,有什麼收穫,等等。然後再根據項目中的不足有針對性地提問測試,考察面試者的實際經驗和解決問題的能力。解決實際問題的能力最重要。
總之,實際的開發工作不同於考試,考試設計得越接近實際工作需要,結果才可能越真實,才可能真正招到想要的人。如何面試前端工程師?關於前面的大神們,已經講得非常好了,頗具理論深度,在下不敢班門弄斧。但基本上大家的出發角度都是「面試前端工程師所需要的前端知識」;那我另闢蹊徑,結合實際經驗談一談「面試前端工程師的過程」吧。希望可以給各位準備在前端行業找工作或者換工作的同志們一些借鑒。如果有信心不是很足的親們,給打打氣,提高一點信心。
簡單地概括一下,3月1號離的職,3月6號(周一)正式上班。幾乎無縫對接,換了份工作,換了座城市。
大致的情況則是:2月份遞交的辭呈,離職前兩周準備好了簡歷,然後各種網投,過了兩三天,就陸續接到面試電話,然後離職前一周,請了三天假,面試了八家公司,每天面試兩三家。正式離職前已經敲定了三家,最後就到了現在的公司。後來想想,我略略得瑟,整個換工作的過程,不拖泥帶水,一氣呵成,主要過程,兩個星期內搞定。怎麼說呢,決心下定了,就行動唄。很多事情看起來難,做起來也許沒那麼難。你怕著不去做,又能拖到什麼時候,又能改變什麼,還不如直接上剛正面,是吧?
這個面試過程,分為面試準備期 和 面試進行時。
面試準備期
面試準備期的工作便是準備面試材料。而面試材料呢,最重要的莫過於簡歷了。我相信很多人,一定會在簡歷上卡上很多時間,怎麼寫,寫什麼,然後用什麼模板?然後,無謂地浪費了很多時間,然而一兩個星期之後,還是沒動手。我那時就心想,想那麼多幹嘛,先弄出來再說,找了個製作在線簡歷的網站,隨便找了個簡潔的模板直接就寫了。當天,第一稿就出來了。當然,第一稿寫出來後,自然是各種看不慣,怎麼辦?那就改唄。我前前後後,各種問題,改了好幾次,最終定稿的時候,已經和第一稿相去甚遠了。也許有人會想,那第一稿沒什麼用嘛,各路完美主義者表示受不了。但你們要知道,改簡歷可比寫簡歷要容易得多了。甚至於後面,我因應不同公司的工作要求,還改了不同版本的簡歷。
然後我準備投簡歷了,網上找工作的網站那麼多,我就投了前程無憂和拉勾網。主要原因是懶,在線簡歷也要填很多內容的,總要儘可能地充實簡歷是吧。至於為什麼是上面兩家?原因簡單,一全,一專。投簡歷的時候,雖然是海投,但也有挑選標準。一是薪資與能力,找能與自己目前能力匹配的薪資的公司,關於薪資的可不能亂投;然後要看工作要求,雖然大部分工作要求,基本都是HR們抄的,但也從中可以看出不少東西:比如,公司的基本情況,公司的團隊狀況,以及公司對於職位的真實需要程度等等。舉個粟子,「前端工程師」,這是非常正式的說法,但有些不太專業的公司可能會稱之為「網頁設計師」,……大家意會一下,這裡邊的差距。至於那些要招一兩人去裝點門面,一個人扛一個部門的公司,個人不建議去,連面試也可以免了。投完之後就等電話了,這個時候,也可以篩一波了。查一查公司的情況,再決定去不去,去哪家。畢竟每個人的時間都是寶貴的嘛。我前面說了,我面了八家,但其實我還推掉了幾家。
面試進行時
面試無非就是筆試加面談。這裡面水深,我水平不夠不多說。我想說的是,面試後回去,也別閑著,趕緊補課,就算你面試再順利,也總有不足之處,尤其是技術類的工作,雖然時間有限,但這絕對是非常有用的。前端的主要知識點,一些演算法題,一些難點重點等等。
總共三天的面試中,後面兩天就要比第一天要好得多。至於第一天,就是試水嘛,剛來行情不熟~所以有種說法便是,不太想去或者沒什麼把握的公司,可以安排在第一天面試,權當做熱身運動,為後面的面試做準備。
然後的然後,我順利地找到新工作,來到新城市,開始新生活~~~
……
後話
基本情況,就如上所述了。寫的不夠詳細,見諒見諒,有空後面再慢慢改唄~
後面我有兩個前同事也離了職,一個去了深圳。因為一些原因,Ta們就沒我順利了。都是離了職才開始找的工作,中間就多花了一些時間。但有一些時間我覺得是沒必要浪費的,比如離職前就應該準備好簡歷,投遞簡歷,等待面試機會。而這些事情,一直拖著不去做,從各種角度來看,實在沒必要。去深圳的那位妹子,其實早就跟我說要離職了,最後反倒是我先走的人,她一直沒下決心,五月份才離的職。怎麼說呢,如果工作實在不順心,該換就換。
個人意見,該做決定的時候就應該果敢點,下了決定就去做~ 祝正在準備面試前端工程師的同志們,也能順利找到一份滿意前端工作。
前端工程師,主要工作內容與用戶界面的表現緊密聯繫,但均為在圖形上或以其為基礎通過某種實現方式去正確、準確呈現什麼。之所以以「主要工作」修飾,是因為 node.js / io.js 的出現與發展致使前端被引入大量伺服器端性質以及各種移動、桌面混合模式應用(Hybird App)甚至嵌入式開發的工作內容。
(細節)面試細節方面推薦:
- H5BP組織聯合廣大(上萬)貢獻者維護的前端工作面試問題(https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/Translations/Chinese);
- poteto/hiring-without-whiteboards;
- Google Interview University 一套完整的學習手冊幫助自己準備 Google 的面試(google-interview-university/README-cn.md at master · jwasham/google-interview-university · GitHub);
(格局)在能力方面:
- 對 HTML / CSS / JavaScript 具有專家級別的知識;
- 有較熟練使用 Angular.js / React.js / jQuery 或者其它類庫的經驗;
- 較熟悉第三方組件(插件)生態環境及具體案例;
- 有較熟練使用 Jade / Swig / Handlebars / Mustache 或者其它模板引擎的經驗;
- 有較熟練使用 SASS 或者其它 CSS 預處理器的經驗;
- 有較熟練使用 CoffeeScript 的經驗;
- 對 CSS / JavaScript 設計模式有很好的認識及應用;
- 對常用數據結構和演算法熟悉;
- 有使用 Grunt.js / Gulp.js 任務運行器的經驗;
- 有使用 Webpack.js 等模塊打包器的經驗;
- 有使用 Yeoman 生成器的經驗;
- 有諸如 Bower / Volo / JSPM / NPM 等包管理器使用經驗;
- 熟悉本地及遠程(甄姬)調試操作;
- 有 Git 使用經驗;
(格局)意識驅動行為,所以:
- 有自己的技術信仰;
- 有渴望嘗試新技術的強烈願景及較強的主觀學習、客觀探索能力;
- 擁有令人難以置信的關注細節的精神;
- 在諸如 Github、StackOverflow、SegmentFault 等這樣的技術社區活動;
(格局)因為你不是一個人工作,並且要對一個產品付之責任心,所以:
- 有良好的編程風格和文檔習慣;
- 對模塊化開發及相關標準有很好的認識及應用;
- 有對網頁標準和標準制定機構重要性較深刻的理解;
- 建站過程中考慮其它諸如UI、安全性、高性能、SEO、可維護性以及技術因素等方面;
- 有跨瀏覽器(主:兼容性)、跨設備(主:響應式)開發並測試頁面的經驗;
- 對網格在WEB設計中的應用有深刻的理解,以及具備系統(有組織)地實現出來的能力;
- 能夠獨立工作並做出正確的抉擇;
- 能夠適應不斷變化的更新 / 擴展 / 改版需求,同時處理多個項目;
- 能夠提供準確的定時估計工作(適應準時交付管理法則);
- 有與伺服器端程序開發人員協同工作的經驗;
- 能夠(熟練)閱讀英文資料;
- 有一定的工作壓力承受能力;
(格局)然後再為自己從長遠打算及加分:
- 有 Node.js Web / 伺服器 / 客戶端應用程序設計、開發、優化經驗;
- 有 MangoDB / Redis 等No SQL 資料庫設計、實現、維護經驗;
- 有使用 PhoneGap / Apache Cordova 進行移動應用開發經驗;
- 有瀏覽器 Addon 擴展(以擴展的形式添加一些為提高用戶體驗的附加功能)開發經驗者;
我們(切圖網)是一家前端公司,我在面試的時候 會給個以往項目設計稿文件讓他確認能不能做,和多長時間,有時候也會讓他當場做一部分我看,希望能幫到你
GitHub - front-thinking/FE-Summary: collect interview questions for web front-end developer.
實戰出來的面試題,絕對看完能回到實戰中去。
原發表在 前端工程師的面試也可以如此生動
公司下半年因*.http://eoe.cn項目要開發上線,尋找合適的前端工程師勢在必行。過程很坎坷,我翻了下自己的工作日誌,招聘過程達三個月之久。來面試的有互聯網公司的,培訓學校的,同事推薦的,…,各種基本功薄弱的,薪資漫天要價的,不靠譜啊。最終相中了一個工作兩三年的,在偏時尚媒體設計公司待過的女前端工程師。
面試是和其他同事一起進行的,除了對品性和工作方式的考察外,專業方面看的還是基礎知識和經驗。前端工程師一般分兩類,一種是設計+CSS,關鍵詞也就是Dreamweaver+Photoshop,這種人較多,但通常計算機知識薄弱。另一種是JS+CSS,偏重瀏覽器內的MVC, 這種人比較少,也是業界稀缺的。可能有人會說兩者都包的人,那這種人是全才,基本都可以去創業了。我本身是Ruby(Rails)後端背景的,對前端略懂,而瀏覽器兼容性幾乎沒接觸過。因此面試偏CSS的不太容易問出什麼,也就是面試寶典里的絕對定位法,inline和block區別,jQuery選擇器優化,等之類的。
一個偶然的機會,在問到一個前來面試的覺得國內有哪些覺得不錯的前端產品的時候,有人提到了網易的新聞聚合(見下圖news.tags.163.png),它採用了不同大小矩形色塊的TreeMap可視化方式展現了新聞資訊集合。從源碼上說,它只有不到150行的規整的HTML結構,足夠在短時間內把握。讓我們邊看這個網頁邊面試:
- 點擊右上角的刷新按鈕後,每個資訊元素重新滑動排列,這裡可以考察HTML5的CSS,下面的"今天, 三天,一周"的時間範圍的切換也是。
- 在這裡還可以去問這些元素是重新排列,還是從伺服器端獲取的,可以讓對方去源碼里找出是哪一行還是引用的文件里調用了ajax。
- 打開chrome的調試器,並點擊Network標籤,在重新載入後,有些請求的Status變成了304,有些Size變成了from cache,這裡可以去考察HTTP常識。
- 剛才我們翻開了HTML源碼,問下css引用鏈接在上而js引用在下的原因,考察瀏覽器的渲染順序。
- 接著我們又發現新聞數據並沒有在HTML里看到,看對方是否可以知曉js如何調用。
- 看過css後,我們發現一個script標籤里的type是text/x-micro-template,問下這是幹什麼的。如果對方回答出模版後,可以再去模版的實現原理,這樣就實際就考察了對js閉包的了解。
- js代碼裡面有些英文單詞,可以趁機考考英文水平,很多工程師都沒聽說過github的。
問到這裡的時候,水平自然見分曉了。這種方式雖然系統考察了一個前端該具備的技術能力,但事後證明它會讓某些在CSS方面不錯的和能實際快速的幹活的人才錯過了。 對一般的互聯網團隊來說,1, CSS命名的規範結構化,2, 嚴格遵守jQuery鏈式調用規範,而不是一大堆東抄西補的原生js,3, 和快速的動手能力,前端工程師的這三點才是最重要的。
推薦閱讀:
※前端開發與後台開發如何協作?
※程序員們分享一下你們寫的情書?
※熱炒的前端什麼時候能冷靜下來?
※若想學 HTML,應從何入手?
※如何幫助前端新人入門和提高?