- 相關(guān)推薦
前端開(kāi)發(fā)常見(jiàn)面試試題
面試題是招聘公司和開(kāi)發(fā)者都非常關(guān)心的話題，公司希望通過(guò)它了解開(kāi)發(fā)者的真實(shí)水平和細(xì)節(jié)處理能力，而開(kāi)發(fā)者希望能夠最大程度地展示自己的水平(甚至超常發(fā)揮)。中國(guó)人才網(wǎng)提供了眾多前端開(kāi)發(fā)面試題，無(wú)論是招聘方還是應(yīng)聘方都值得一看!
一般問(wèn)題
你用Twitter嗎?(在天朝最好問(wèn)你用微博嗎?)
如果用，你都關(guān)注那些人?
你用Github嗎?
如果用，你關(guān)注的項(xiàng)目有什么?
你關(guān)注的博客有那些?
你使用那些版本管理系統(tǒng)，比如Git，SVN等?
你常用的開(kāi)發(fā)環(huán)境是怎樣的?比如操作系統(tǒng)，文本編輯器，瀏覽器，及其他工具等。
你能描述一下你制作一個(gè)網(wǎng)頁(yè)的工作流程嗎?
你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?
如果提到了特性檢測(cè)，可以加分。
請(qǐng)解釋一下什么是語(yǔ)義化的HTML。
你更喜歡在哪個(gè)瀏覽器下進(jìn)行開(kāi)發(fā)?你使用那些開(kāi)發(fā)人員工具?
你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化?
期待的解決方案包括：
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
其他
為什么利用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)站資源會(huì)更有效?
瀏覽器一次可以從一個(gè)域名下做多少資源?
請(qǐng)說(shuō)出三種減低頁(yè)面加載時(shí)間的方法。(加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間)
如果你接到了一個(gè)使用Tab來(lái)縮進(jìn)代碼的項(xiàng)目，但是你喜歡空格，你會(huì)怎么做?
建議這個(gè)項(xiàng)目使用像EditorConfig(http://editorconfig.org)之類的規(guī)范
為了保持一致性，轉(zhuǎn)換成項(xiàng)目原有的風(fēng)格
直接使用VIM的retab命令
請(qǐng)寫(xiě)一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面
如果不使用JS來(lái)完成，可以加分。
你都使用那些工作來(lái)測(cè)試代碼的性能?
例如JSPerf (http://jsperf.com/)
例如Dromaeo (http://dromaeo.com/)
其它。
如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會(huì)是什么?
請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。
什么是FOUC?你如何來(lái)避免FOUC?
HTML相關(guān)問(wèn)題
文檔類型的作用是什么?你知道多少種文檔類型?
瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?
使用XHTML的局限有那些?
如果頁(yè)面使用application/xhtml+xml會(huì)有什么問(wèn)題嗎?
如果網(wǎng)頁(yè)內(nèi)容需要支持多語(yǔ)言，你會(huì)怎么做?
在設(shè)計(jì)和開(kāi)發(fā)多語(yǔ)言網(wǎng)站時(shí)，有哪些問(wèn)題你必須要考慮?
在HTML5的頁(yè)面中可以使用XHTML的語(yǔ)法嗎?
在HTML5中如何使用XML?
data-屬性的作用是什么?
如果把HTML5看作做一個(gè)開(kāi)放平臺(tái)，那它的構(gòu)建模塊有那些?
請(qǐng)描述一下cookies，sessionStorage和localStorage的區(qū)別?
JS相關(guān)問(wèn)題
你使用過(guò)那些Javascript庫(kù)?
你是否研究過(guò)你所使用的JS庫(kù)或者框架的源代碼?
什么是哈希表?
undefined變量和undeclared變量分別指什么?
閉包是什么，如何使用它，為什么要使用它?
你喜歡的使用閉包的模式是什么?
請(qǐng)舉出一個(gè)匿名函數(shù)的典型用例?
請(qǐng)解釋什么是Javascript的模塊模式，并舉出實(shí)用實(shí)例。
如果有提到無(wú)污染的命名空間，可以考慮加分。
如果你的模塊沒(méi)有自己的命名空間會(huì)怎么樣?
你如何組織自己的代碼?是使用模塊模式，還是使用經(jīng)典繼承的方法?
請(qǐng)指出Javascript宿主對(duì)象和內(nèi)置對(duì)象的區(qū)別?
指出下列代碼的區(qū)別：
function Person(){} var person = Person() var person = new Person()
.call和.apply的區(qū)別是什么?
請(qǐng)解釋Funciton.prototype.bind的作用?
你如何優(yōu)化自己的代碼?
你能解釋一下JavaScript中的繼承是如何工作的嗎?
在什么時(shí)候你會(huì)使用document.write()?
大多數(shù)生成的廣告代碼依舊使用document.write()，雖然這種用法會(huì)讓人很不爽。
請(qǐng)指出瀏覽器特性檢測(cè)，特性推斷和瀏覽器UA字符串嗅探的區(qū)別?
請(qǐng)盡可能詳盡的解釋AJAX的工作原理。
請(qǐng)解釋JSONP的工作原理，以及它為什么不是真正的AJAX。
你使用過(guò)JavaScript的模板系統(tǒng)嗎?
如有使用做，請(qǐng)談?wù)勀愣际褂眠^(guò)那些類似庫(kù)文件。比如Mustache.js,Handlebars等等。
請(qǐng)解釋變量聲明提升。
請(qǐng)描述下事件冒泡機(jī)制。
"attribute"和"property"的區(qū)別是什么?
為什么擴(kuò)展JavaScript內(nèi)置對(duì)象是個(gè)壞做法?
為什么擴(kuò)展JavaScript內(nèi)置對(duì)象是個(gè)好做法?
請(qǐng)指出document load和document ready的區(qū)別。(這是個(gè)問(wèn)題的問(wèn)題)
==和===有什么不同?
你如何獲取瀏覽器URL中查詢字符串中的參數(shù)。
請(qǐng)解釋一下JavaScript的同源策略。
請(qǐng)解釋一下事件代理。
請(qǐng)描述一下JavaScript的繼承模式。
如何實(shí)現(xiàn)下列代碼：
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
描述一種JavaScript memoization(避免重復(fù)運(yùn)算)的策略。
什么是三元條件語(yǔ)句?
函數(shù)的參數(shù)元是什么?
什么是"use strict"?使用它的好處和壞處分別是什么?
JS代碼示例：
3.14
問(wèn)題：上面的語(yǔ)句的返回值是什么? 答案：3
"im a lasagna hog".split("").reverse().join("");
問(wèn)題：上面的語(yǔ)句的返回值是什么? 答案："goh angasal a mi"
( window.foo || ( window.foo = "bar" ) );
問(wèn)題：window.foo的值是什么? 答案："bar" 只有window.foo為假時(shí)的才是上面答案，否則就是它本身的值。
var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);
問(wèn)題：上面兩個(gè)alert的結(jié)果是什么? 答案: "Hello World" & ReferenceError: bar is not defined
var foo = []; foo.push(1); foo.push(2);
問(wèn)題：foo.length的值是什么? 答案：2
var foo = {}; foo.bar = hello;
問(wèn)題：foo.length的值是什么? 答案: undefined
jQuery相關(guān)問(wèn)題
解釋"chaining"。
解釋"deferreds"。
你知道那些針對(duì)jQuery的優(yōu)化方法。
請(qǐng)解釋.end()的用途。
你如何給一個(gè)事件處理函數(shù)命名空間，為什么要這樣做?
請(qǐng)說(shuō)出你可以傳遞到j(luò)Query方法的四種不同值。
選擇器(字符串)，HTML(字符串)，回調(diào)函數(shù)，HTML元素，對(duì)象，數(shù)組，元素?cái)?shù)組，jQuery對(duì)象等。
什么是效果隊(duì)列?
請(qǐng)指出.get(),[],eq(),的區(qū)別。
請(qǐng)指出.bing(),.live()和.delegate()的區(qū)別。
請(qǐng)指出$和$.fn的區(qū)別?或者說(shuō)出$.fn的用戶。
請(qǐng)優(yōu)化下列選擇器：
$(".foo div#bar:eq(0)")
CSS相關(guān)問(wèn)題
描述css reset的作用和用途。
描述下浮動(dòng)和它的工作原理。
清除浮動(dòng)的方法有那些，分別適用于什么情形。
解釋css sprites,如何使用。
你最喜歡的圖片替換方法是什么，你如何選擇使用。
討論CSS hacks，條件引用或者其他。
如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)。
你會(huì)使用那些技術(shù)和處理方法。
如何視覺(jué)隱藏網(wǎng)頁(yè)內(nèi)容，只讓它們?cè)谄聊婚喿x器中可用。
你使用過(guò)網(wǎng)格系統(tǒng)嗎?如果使用過(guò)，你最喜歡哪種?
你使用過(guò)meidia queries(媒體查詢)嗎，或者移動(dòng)網(wǎng)站相關(guān)的CSS布局。
你熟悉SVG樣式的書(shū)寫(xiě)嗎?
如何優(yōu)化網(wǎng)頁(yè)的打印樣式。
在書(shū)寫(xiě)高效CSS文件時(shí)會(huì)有哪些問(wèn)題需要考慮。
你使用CSS預(yù)處理器嗎?(SASS,Compass,Stylus,LESS)
如果使用，描述你的喜好。
你是否接觸過(guò)使用非標(biāo)準(zhǔn)字體的設(shè)計(jì)?
字體服務(wù)，Google Webfonts, Typekit,等等。
請(qǐng)解釋瀏覽器是如何根據(jù)CSS選擇器選擇對(duì)應(yīng)元素的。
可選的有趣問(wèn)題
你編寫(xiě)過(guò)的最酷的代碼是什么?其中你最自豪的是什么?
你知道HTML5的幫派標(biāo)志嗎?
你是否正在或曾經(jīng)在一艘船上。(不懂這個(gè)幽默)
你使用的開(kāi)發(fā)工具中，你最喜歡的部分是什么?
你有什么業(yè)余項(xiàng)目嗎?是那種類型的?
解釋cornify的重要性?(本題完全摸不到頭腦)
在一張紙上，垂直寫(xiě)下ABCDE，然后不用任何代碼，將他們到序排列。
靜靜的看他們是否將紙反轉(zhuǎn)。
海盜還是忍者?
如果是兩者的合體，并有恰當(dāng)理由，可以加分。如果是僵尸猴子海盜加忍者加兩分。(注：此題文化差異過(guò)大)
如果沒(méi)有在Web開(kāi)發(fā)，你會(huì)做什么?
卡門(mén)圣迭哥的隱藏處在哪里?
提示：本題的答案永遠(yuǎn)是錯(cuò)的。
你最愛(ài)的IE特性是什么?
完句填空： Brendan Eich和Doug Crockford是JavaScript的________。
討論：jQuery是牛逼的庫(kù)還是最牛逼的庫(kù)。
web前端開(kāi)發(fā)師面試問(wèn)答的經(jīng)歷
Q：關(guān)于公司的期望
A：我希望第一份工作能有比較大的發(fā)展空間，能夠長(zhǎng)時(shí)間的在一個(gè)良好的環(huán)境中養(yǎng)成良好的習(xí)慣。
Q：大學(xué)時(shí)經(jīng)歷的團(tuán)隊(duì)合作
A：最初的時(shí)候誰(shuí)也不知道應(yīng)該做什么，就從理論上一點(diǎn)一點(diǎn)的摳出東西來(lái)，經(jīng)過(guò)兩三次的課程我們的固定團(tuán)隊(duì)大致有了自己的開(kāi)發(fā)流程，知道怎么樣進(jìn)行相互間的交流溝通、協(xié)作，也能從其他團(tuán)隊(duì)的匯報(bào)中吸取很多經(jīng)驗(yàn)與教訓(xùn)。有的時(shí)候我們團(tuán)隊(duì)里會(huì)加進(jìn)比較牛的高人，他也會(huì)愿意對(duì)我們進(jìn)行額外的指導(dǎo)，大家一起交流想法，各自說(shuō)出來(lái)，再一起逐一分析優(yōu)劣，最終定下方案。
Q：關(guān)于前端的理解
A：前端開(kāi)發(fā)處于一個(gè)猛烈發(fā)展的階段，現(xiàn)在可以說(shuō)大部分的網(wǎng)站都在關(guān)注前端，前端是直接接觸用戶的部分，它融合了設(shè)計(jì)、程序還有一些整體的理念，一些優(yōu)化，包括SEO。很多技術(shù)的實(shí)現(xiàn)都要通過(guò)前端，怎么把這部分做好是非常具有挑戰(zhàn)性的事情�？赡芩奈迥昵昂芏嗳硕歼�在標(biāo)準(zhǔn)的實(shí)現(xiàn)上摸索，而現(xiàn)在有一個(gè)大家都朝著標(biāo)準(zhǔn)走的大方向，就能夠更好的堅(jiān)持，更好的專注，把前端技術(shù)做得更強(qiáng)大。
Q：自己的發(fā)展計(jì)劃
A：剛畢業(yè)的這一兩年希望能專注于技術(shù)的提高，和適應(yīng)良好的工作流程――這也是為什么我希望能夠在一個(gè)發(fā)展環(huán)境良好的公司工作，鍛煉好實(shí)踐能力，結(jié)合公司的產(chǎn)品需求，當(dāng)然還有一些不斷萌發(fā)的新技術(shù)。之后會(huì)向產(chǎn)品的方向發(fā)展，就是前端技術(shù)所要實(shí)現(xiàn)的目標(biāo)，因?yàn)榍岸舜_實(shí)是結(jié)合很廣闊的一個(gè)職位。
Q：優(yōu)缺點(diǎn)
A：我的優(yōu)點(diǎn)，自己覺(jué)得是比較細(xì)心，包括細(xì)致的觀察還有處理細(xì)節(jié)上的事情。我之前在365日歷網(wǎng)實(shí)習(xí)的時(shí)候，還有課程小組學(xué)習(xí)的時(shí)候，他們?cè)u(píng)價(jià)我會(huì)說(shuō)我比較可靠，我覺(jué)得可能不是那種技術(shù)上特別牛什么問(wèn)題都能解決的，我個(gè)人覺(jué)得是來(lái)自細(xì)心和認(rèn)真負(fù)責(zé)的態(tài)度。另外后面在九星時(shí)代實(shí)習(xí)的時(shí)候，臨走上司對(duì)我評(píng)價(jià)是說(shuō)我抗壓學(xué)習(xí)能力比較強(qiáng)。當(dāng)時(shí)項(xiàng)目特別急，又有涉及到一些我還不熟悉的技術(shù)，所有人都在加班，我也是一邊完成任務(wù)一邊不斷在學(xué)新的東西，進(jìn)一步的修繕，把事情做得更好。缺點(diǎn)的話，我覺(jué)得現(xiàn)在對(duì)我影響最大的就是想問(wèn)題常常會(huì)有太多顧慮，想要一次性的把問(wèn)題解決，結(jié)果會(huì)浪費(fèi)很多的時(shí)間。比如說(shuō)技術(shù)面試的時(shí)候，很經(jīng)常遇到考官說(shuō)一個(gè)簡(jiǎn)單的布局設(shè)計(jì)讓你實(shí)現(xiàn)，我有的時(shí)候就總會(huì)考慮一些沒(méi)有提到的因素，像是否需要適應(yīng)變化這類的，就是有些過(guò)于計(jì)較完美，反而變得優(yōu)柔寡斷了。這也是有次面試的時(shí)候面試官和我提到的。
Q：待遇要求
A：待遇的話，我覺(jué)得并不是很關(guān)鍵，而且我是應(yīng)屆生，我尊重公司對(duì)應(yīng)屆生的待遇標(biāo)準(zhǔn)。我也相信網(wǎng)易的競(jìng)爭(zhēng)力吧。這幾次面試后，我在網(wǎng)上查了不少別人的評(píng)價(jià)，覺(jué)得網(wǎng)易作為大門(mén)戶網(wǎng)站，有很好的環(huán)境與發(fā)展前景，薪水的話能讓自己繼續(xù)活著工作學(xué)習(xí)發(fā)展就夠啦。我
一直認(rèn)為如果公司發(fā)展前景不好，現(xiàn)在給很高的工資也不一定就是好事情，而好的公司能夠給出符合員工給自己所創(chuàng)造的價(jià)值的工資。
3號(hào)（周四）下午，面試的時(shí)候HR羅叔叔非常溫和，常常笑，說(shuō)話也不是我想象中HR那種咄咄逼人的語(yǔ)速。問(wèn)我的問(wèn)題大約是：
Q：自我介紹包括實(shí)習(xí)經(jīng)歷
A：如實(shí)匯報(bào)
Q：面對(duì)過(guò)什么樣的壓力
A：我先是很宓乃盜搜數(shù)學(xué)的事情，后來(lái)HR又問(wèn)，還有其他的嗎，我又說(shuō)了一下做一些課程設(shè)計(jì)的時(shí)候小組遇到的難題，技術(shù)和團(tuán)隊(duì)協(xié)作方面。其實(shí)還想說(shuō)在九星實(shí)習(xí)的時(shí)候的工作壓力，后來(lái)覺(jué)得這個(gè)才是HR最想聽(tīng)的，不過(guò)沒(méi)有機(jī)會(huì)說(shuō)了……
Q：解決問(wèn)題的方法
A：技術(shù)問(wèn)題的話，先上網(wǎng)查有沒(méi)有解決的方法，如果不好解決再去請(qǐng)教前輩，一般還是自己先查一些資料，不想為簡(jiǎn)單的問(wèn)題就打擾別人。如果遇到難以解決的問(wèn)題會(huì)請(qǐng)教別人或者和別人一起討論。這塊回答得有點(diǎn)亂。
Q：為什么想留在北京
A：家里人也希望我能夠獨(dú)立，能夠做自己喜歡的事情，在廣闊的空間里發(fā)展。我自己也覺(jué)得北京機(jī)會(huì)更多。我說(shuō)完HR叔叔還跟著說(shuō)了一句，確實(shí)比如你在福州，不要說(shuō)福州吧，就算和上海深圳這樣的技術(shù)發(fā)達(dá)城市比，確實(shí)北京的機(jī)會(huì)是更多的。
Q：拿過(guò)其他公司的offer嗎？覺(jué)得和其他公司比，網(wǎng)易好在哪里？
A：有過(guò)一些，自己不滿意的地方，一種是職位不是自己期望的，比如測(cè)試或者技術(shù)支持，并不是自己第一想要做的事情，我很喜歡前端，也希望自己能在這個(gè)領(lǐng)域發(fā)展；還有是公司規(guī)模不大，像之前HR說(shuō)的，在網(wǎng)易會(huì)有很多個(gè)前端工程師來(lái)完成一個(gè)大任務(wù)，我認(rèn)為這樣更能夠發(fā)揮自己的力量，也能讓自己的能力更好的發(fā)展，如果在一個(gè)小一些的公司，也許做前端的就只有我一個(gè)人，發(fā)展就會(huì)變得狹隘；還有工資問(wèn)題，有的公司只給出兩千五左右的待遇（我沒(méi)敢說(shuō)2000，其實(shí)之前確實(shí)有給我開(kāi)2000的，怕被HR叔叔鄙視），這樣在北京生活會(huì)艱難一些�？偟倪�是覺(jué)得發(fā)展前景很重要。然后HR叔叔就接過(guò)話說(shuō)網(wǎng)易確實(shí)有很大的發(fā)展空間，而且工資的話我看你在登記表上寫(xiě)的跨度很大（我寫(xiě)的是3000-5000，遵從公司對(duì)應(yīng)屆生的薪酬標(biāo)準(zhǔn)），這點(diǎn)網(wǎng)易肯定能夠讓你滿意的。
Q：描述一下你的性格
A：這是我認(rèn)為我回答得最失敗的一個(gè)問(wèn)題，我當(dāng)時(shí)沒(méi)多想，脫口而出――我性格比較內(nèi)向，其實(shí)我應(yīng)該說(shuō)我溫柔善良細(xì)心負(fù)責(zé)，之前想了很多關(guān)于優(yōu)缺點(diǎn)的描述，結(jié)果也不曉得哪根筋抽抽了，直接說(shuō)自己內(nèi)向，接著羞澀的笑笑，接了一句不過(guò)我很喜歡和別人討論問(wèn)題，覺(jué)得一起解決問(wèn)題是很開(kāi)心的事情
【前端開(kāi)發(fā)常見(jiàn)面試試題】相關(guān)文章：
web前端面試題02-22
web前端面試題及答案_web前端面試題及詳細(xì)答案04-12
阿里前端大神寒冬談?wù)劽嬖嚺c面試題02-13
常見(jiàn)的英文面試題12-30
前端程序員JavaScript面試題02-19
前端開(kāi)發(fā)實(shí)習(xí)報(bào)告08-01
常見(jiàn).net面試題及答案08-15