前端開發(fā)常見面試試題

　　面試題是招聘公司和開發(fā)者都非常關(guān)心的話題，公司希望通過它了解開發(fā)者的真實水平和細(xì)節(jié)處理能力，而開發(fā)者希望能夠最大程度地展示自己的水平(甚至超常發(fā)揮)。中國人才網(wǎng)提供了眾多前端開發(fā)面試題，無論是招聘方還是應(yīng)聘方都值得一看!

　　一般問題

　　你用Twitter嗎?(在天朝最好問你用微博嗎?)

　　如果用，你都關(guān)注那些人?

　　你用Github嗎?

　　如果用，你關(guān)注的項目有什么?

　　你關(guān)注的博客有那些?

　　你使用那些版本管理系統(tǒng)，比如Git，SVN等?

　　你常用的開發(fā)環(huán)境是怎樣的?比如操作系統(tǒng)，文本編輯器，瀏覽器，及其他工具等。

　　你能描述一下你制作一個網(wǎng)頁的工作流程嗎?

　　你能描述一下漸進增強和優(yōu)雅降級之間的不同嗎?

　　如果提到了特性檢測，可以加分。

　　請解釋一下什么是語義化的HTML。

　　你更喜歡在哪個瀏覽器下進行開發(fā)?你使用那些開發(fā)人員工具?

　　你如何對網(wǎng)站的文件和資源進行優(yōu)化?

　　期待的解決方案包括：

　　文件合并

　　文件最小化/文件壓縮

　　使用CDN托管

　　緩存的使用

　　其他

　　為什么利用多個域名來存儲網(wǎng)站資源會更有效?

　　瀏覽器一次可以從一個域名下做多少資源?

　　請說出三種減低頁面加載時間的方法。(加載時間指感知的時間或者實際加載時間)

　　如果你接到了一個使用Tab來縮進代碼的項目，但是你喜歡空格，你會怎么做?

　　建議這個項目使用像EditorConfig(http://editorconfig.org)之類的規(guī)范

　　為了保持一致性，轉(zhuǎn)換成項目原有的風(fēng)格

　　直接使用VIM的retab命令

　　請寫一個簡單的幻燈效果頁面

　　如果不使用JS來完成，可以加分。

　　你都使用那些工作來測試代碼的性能?

　　例如JSPerf (http://jsperf.com/)

　　例如Dromaeo (http://dromaeo.com/)

　　其它。

　　如果今年你打算熟練掌握一項新技術(shù)，那會是什么?

　　請談一下你對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機構(gòu)重要性的理解。

　　什么是FOUC?你如何來避免FOUC?

　　HTML相關(guān)問題

　　文檔類型的作用是什么?你知道多少種文檔類型?

　　瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?

　　使用XHTML的局限有那些?

　　如果頁面使用application/xhtml+xml會有什么問題嗎?

　　如果網(wǎng)頁內(nèi)容需要支持多語言，你會怎么做?

　　在設(shè)計和開發(fā)多語言網(wǎng)站時，有哪些問題你必須要考慮?

　　在HTML5的頁面中可以使用XHTML的語法嗎?

　　在HTML5中如何使用XML?

　　data-屬性的作用是什么?

　　如果把HTML5看作做一個開放平臺，那它的構(gòu)建模塊有那些?

　　請描述一下cookies，sessionStorage和localStorage的區(qū)別?

　　JS相關(guān)問題

　　你使用過那些Javascript庫?

　　你是否研究過你所使用的JS庫或者框架的源代碼?

　　什么是哈希表?

　　undefined變量和undeclared變量分別指什么?

　　閉包是什么，如何使用它，為什么要使用它?

　　你喜歡的使用閉包的模式是什么?

　　請舉出一個匿名函數(shù)的典型用例?

　　請解釋什么是Javascript的模塊模式，并舉出實用實例。

　　如果有提到無污染的命名空間，可以考慮加分。

　　如果你的模塊沒有自己的命名空間會怎么樣?

　　你如何組織自己的代碼?是使用模塊模式，還是使用經(jīng)典繼承的方法?

　　請指出Javascript宿主對象和內(nèi)置對象的區(qū)別?

　　指出下列代碼的區(qū)別：

　　function Person(){} var person = Person() var person = new Person()

　　.call和.apply的區(qū)別是什么?

　　請解釋Funciton.prototype.bind的作用?

　　你如何優(yōu)化自己的代碼?

　　你能解釋一下JavaScript中的繼承是如何工作的嗎?

　　在什么時候你會使用document.write()?

　　大多數(shù)生成的廣告代碼依舊使用document.write()，雖然這種用法會讓人很不爽。

　　請指出瀏覽器特性檢測，特性推斷和瀏覽器UA字符串嗅探的區(qū)別?

　　請盡可能詳盡的解釋AJAX的工作原理。

　　請解釋JSONP的工作原理，以及它為什么不是真正的AJAX。

　　你使用過JavaScript的模板系統(tǒng)嗎?

　　如有使用做，請談?wù)勀愣际褂眠^那些類似庫文件。比如Mustache.js,Handlebars等等。

　　請解釋變量聲明提升。

　　請描述下事件冒泡機制。

　　"attribute"和"property"的區(qū)別是什么?

　　為什么擴展JavaScript內(nèi)置對象是個壞做法?

　　為什么擴展JavaScript內(nèi)置對象是個好做法?

　　請指出document load和document ready的區(qū)別。(這是個問題的問題)

　　==和===有什么不同?

　　你如何獲取瀏覽器URL中查詢字符串中的參數(shù)。

　　請解釋一下JavaScript的同源策略。

　　請解釋一下事件代理。

　　請描述一下JavaScript的繼承模式。

　　如何實現(xiàn)下列代碼：

　　[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]

　　描述一種JavaScript memoization(避免重復(fù)運算)的策略。

　　什么是三元條件語句?

　　函數(shù)的參數(shù)元是什么?

　　什么是"use strict"?使用它的好處和壞處分別是什么?

　　JS代碼示例：

　　3.14

　　問題：上面的語句的返回值是什么? 答案：3

　　"im a lasagna hog".split("").reverse().join("");

　　問題：上面的語句的返回值是什么? 答案："goh angasal a mi"

　　( window.foo || ( window.foo = "bar" ) );

　　問題：window.foo的值是什么? 答案："bar" 只有window.foo為假時的才是上面答案，否則就是它本身的值。

　　var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

　　問題：上面兩個alert的結(jié)果是什么? 答案: "Hello World" & ReferenceError: bar is not defined

　　var foo = []; foo.push(1); foo.push(2);

　　問題：foo.length的值是什么? 答案：2

　　var foo = {}; foo.bar = hello;

　　問題：foo.length的值是什么? 答案: undefined

　　jQuery相關(guān)問題

　　解釋"chaining"。

　　解釋"deferreds"。

　　你知道那些針對jQuery的優(yōu)化方法。

　　請解釋.end()的用途。

　　你如何給一個事件處理函數(shù)命名空間，為什么要這樣做?

　　請說出你可以傳遞到j(luò)Query方法的四種不同值。

　　選擇器(字符串)，HTML(字符串)，回調(diào)函數(shù)，HTML元素，對象，數(shù)組，元素數(shù)組，jQuery對象等。

　　什么是效果隊列?

　　請指出.get(),[],eq(),的區(qū)別。

　　請指出.bing(),.live()和.delegate()的區(qū)別。

　　請指出$和$.fn的區(qū)別?或者說出$.fn的用戶。

　　請優(yōu)化下列選擇器：

　　$(".foo div#bar:eq(0)")

　　CSS相關(guān)問題

　　描述css reset的作用和用途。

　　描述下浮動和它的工作原理。

　　清除浮動的方法有那些，分別適用于什么情形。

　　解釋css sprites,如何使用。

　　你最喜歡的圖片替換方法是什么，你如何選擇使用。

　　討論CSS hacks，條件引用或者其他。

　　如何為有功能限制的瀏覽器提供網(wǎng)頁。

　　你會使用那些技術(shù)和處理方法。

　　如何視覺隱藏網(wǎng)頁內(nèi)容，只讓它們在屏幕閱讀器中可用。

　　你使用過網(wǎng)格系統(tǒng)嗎?如果使用過，你最喜歡哪種?

　　你使用過meidia queries(媒體查詢)嗎，或者移動網(wǎng)站相關(guān)的CSS布局。

　　你熟悉SVG樣式的書寫嗎?

　　如何優(yōu)化網(wǎng)頁的打印樣式。

　　在書寫高效CSS文件時會有哪些問題需要考慮。

　　你使用CSS預(yù)處理器嗎?(SASS,Compass,Stylus,LESS)

　　如果使用，描述你的喜好。

　　你是否接觸過使用非標(biāo)準(zhǔn)字體的設(shè)計?

　　字體服務(wù)，Google Webfonts, Typekit,等等。

　　請解釋瀏覽器是如何根據(jù)CSS選擇器選擇對應(yīng)元素的。

　　可選的有趣問題

　　你編寫過的最酷的代碼是什么?其中你最自豪的是什么?

　　你知道HTML5的幫派標(biāo)志嗎?

　　你是否正在或曾經(jīng)在一艘船上。(不懂這個幽默)

　　你使用的開發(fā)工具中，你最喜歡的部分是什么?

　　你有什么業(yè)余項目嗎?是那種類型的?

　　解釋cornify的重要性?(本題完全摸不到頭腦)

　　在一張紙上，垂直寫下ABCDE，然后不用任何代碼，將他們到序排列。

　　靜靜的看他們是否將紙反轉(zhuǎn)。

　　海盜還是忍者?

　　如果是兩者的合體，并有恰當(dāng)理由，可以加分。如果是僵尸猴子海盜加忍者加兩分。(注：此題文化差異過大)

　　如果沒有在Web開發(fā)，你會做什么?

　　卡門圣迭哥的隱藏處在哪里?

　　提示：本題的答案永遠(yuǎn)是錯的。

　　你最愛的IE特性是什么?

　　完句填空： Brendan Eich和Doug Crockford是JavaScript的________。

　　討論：jQuery是牛逼的庫還是最牛逼的庫。

　　web前端開發(fā)師面試問答的經(jīng)歷

　　Q：關(guān)于公司的期望

　　A：我希望第一份工作能有比較大的發(fā)展空間，能夠長時間的在一個良好的環(huán)境中養(yǎng)成良好的習(xí)慣。

　　Q：大學(xué)時經(jīng)歷的團隊合作

　　A：最初的時候誰也不知道應(yīng)該做什么，就從理論上一點一點的摳出東西來，經(jīng)過兩三次的課程我們的固定團隊大致有了自己的開發(fā)流程，知道怎么樣進行相互間的交流溝通、協(xié)作，也能從其他團隊的匯報中吸取很多經(jīng)驗與教訓(xùn)。有的時候我們團隊里會加進比較牛的高人，他也會愿意對我們進行額外的指導(dǎo)，大家一起交流想法，各自說出來，再一起逐一分析優(yōu)劣，最終定下方案。

　　Q：關(guān)于前端的理解

　　A：前端開發(fā)處于一個猛烈發(fā)展的階段，現(xiàn)在可以說大部分的網(wǎng)站都在關(guān)注前端，前端是直接接觸用戶的部分，它融合了設(shè)計、程序還有一些整體的理念，一些優(yōu)化，包括SEO。很多技術(shù)的實現(xiàn)都要通過前端，怎么把這部分做好是非常具有挑戰(zhàn)性的事情�？赡芩奈迥昵昂芏嗳硕歼�在標(biāo)準(zhǔn)的實現(xiàn)上摸索，而現(xiàn)在有一個大家都朝著標(biāo)準(zhǔn)走的大方向，就能夠更好的堅持，更好的專注，把前端技術(shù)做得更強大。

　　Q：自己的發(fā)展計劃

　　A：剛畢業(yè)的這一兩年希望能專注于技術(shù)的提高，和適應(yīng)良好的工作流程――這也是為什么我希望能夠在一個發(fā)展環(huán)境良好的公司工作，鍛煉好實踐能力，結(jié)合公司的產(chǎn)品需求，當(dāng)然還有一些不斷萌發(fā)的新技術(shù)。之后會向產(chǎn)品的方向發(fā)展，就是前端技術(shù)所要實現(xiàn)的目標(biāo)，因為前端確實是結(jié)合很廣闊的一個職位。

　　Q：優(yōu)缺點

　　A：我的優(yōu)點，自己覺得是比較細(xì)心，包括細(xì)致的觀察還有處理細(xì)節(jié)上的事情。我之前在365日歷網(wǎng)實習(xí)的時候，還有課程小組學(xué)習(xí)的時候，他們評價我會說我比較可靠，我覺得可能不是那種技術(shù)上特別牛什么問題都能解決的，我個人覺得是來自細(xì)心和認(rèn)真負(fù)責(zé)的態(tài)度。另外后面在九星時代實習(xí)的時候，臨走上司對我評價是說我抗壓學(xué)習(xí)能力比較強。當(dāng)時項目特別急，又有涉及到一些我還不熟悉的技術(shù)，所有人都在加班，我也是一邊完成任務(wù)一邊不斷在學(xué)新的東西，進一步的修繕，把事情做得更好。缺點的話，我覺得現(xiàn)在對我影響最大的就是想問題常常會有太多顧慮，想要一次性的把問題解決，結(jié)果會浪費很多的時間。比如說技術(shù)面試的時候，很經(jīng)常遇到考官說一個簡單的布局設(shè)計讓你實現(xiàn)，我有的時候就總會考慮一些沒有提到的因素，像是否需要適應(yīng)變化這類的，就是有些過于計較完美，反而變得優(yōu)柔寡斷了。這也是有次面試的時候面試官和我提到的。

　　Q：待遇要求

　　A：待遇的話，我覺得并不是很關(guān)鍵，而且我是應(yīng)屆生，我尊重公司對應(yīng)屆生的待遇標(biāo)準(zhǔn)。我也相信網(wǎng)易的競爭力吧。這幾次面試后，我在網(wǎng)上查了不少別人的評價，覺得網(wǎng)易作為大門戶網(wǎng)站，有很好的環(huán)境與發(fā)展前景，薪水的話能讓自己繼續(xù)活著工作學(xué)習(xí)發(fā)展就夠啦。我

　　一直認(rèn)為如果公司發(fā)展前景不好，現(xiàn)在給很高的工資也不一定就是好事情，而好的公司能夠給出符合員工給自己所創(chuàng)造的價值的工資。

　　3號（周四）下午，面試的時候HR羅叔叔非常溫和，常常笑，說話也不是我想象中HR那種咄咄逼人的語速。問我的問題大約是：

　　Q：自我介紹包括實習(xí)經(jīng)歷

　　A：如實匯報

　　Q：面對過什么樣的壓力

　　A：我先是很宓乃盜搜數(shù)學(xué)的事情，后來HR又問，還有其他的嗎，我又說了一下做一些課程設(shè)計的時候小組遇到的難題，技術(shù)和團隊協(xié)作方面。其實還想說在九星實習(xí)的時候的工作壓力，后來覺得這個才是HR最想聽的，不過沒有機會說了……

　　Q：解決問題的方法

　　A：技術(shù)問題的話，先上網(wǎng)查有沒有解決的方法，如果不好解決再去請教前輩，一般還是自己先查一些資料，不想為簡單的問題就打擾別人。如果遇到難以解決的問題會請教別人或者和別人一起討論。這塊回答得有點亂。

　　Q：為什么想留在北京

　　A：家里人也希望我能夠獨立，能夠做自己喜歡的事情，在廣闊的空間里發(fā)展。我自己也覺得北京機會更多。我說完HR叔叔還跟著說了一句，確實比如你在福州，不要說福州吧，就算和上海深圳這樣的技術(shù)發(fā)達城市比，確實北京的機會是更多的。

　　Q：拿過其他公司的offer嗎？覺得和其他公司比，網(wǎng)易好在哪里？

　　A：有過一些，自己不滿意的地方，一種是職位不是自己期望的，比如測試或者技術(shù)支持，并不是自己第一想要做的事情，我很喜歡前端，也希望自己能在這個領(lǐng)域發(fā)展；還有是公司規(guī)模不大，像之前HR說的，在網(wǎng)易會有很多個前端工程師來完成一個大任務(wù)，我認(rèn)為這樣更能夠發(fā)揮自己的力量，也能讓自己的能力更好的發(fā)展，如果在一個小一些的公司，也許做前端的就只有我一個人，發(fā)展就會變得狹隘；還有工資問題，有的公司只給出兩千五左右的待遇（我沒敢說2000，其實之前確實有給我開2000的，怕被HR叔叔鄙視），這樣在北京生活會艱難一些�？偟倪�是覺得發(fā)展前景很重要。然后HR叔叔就接過話說網(wǎng)易確實有很大的發(fā)展空間，而且工資的話我看你在登記表上寫的跨度很大（我寫的是3000-5000，遵從公司對應(yīng)屆生的薪酬標(biāo)準(zhǔn)），這點網(wǎng)易肯定能夠讓你滿意的。

　　Q：描述一下你的性格

　　A：這是我認(rèn)為我回答得最失敗的一個問題，我當(dāng)時沒多想，脫口而出――我性格比較內(nèi)向，其實我應(yīng)該說我溫柔善良細(xì)心負(fù)責(zé)，之前想了很多關(guān)于優(yōu)缺點的描述，結(jié)果也不曉得哪根筋抽抽了，直接說自己內(nèi)向，接著羞澀的笑笑，接了一句不過我很喜歡和別人討論問題，覺得一起解決問題是很開心的事情

【前端開發(fā)常見面試試題】相關(guān)文章：

web前端面試題02-22

web前端面試題及答案_web前端面試題及詳細(xì)答案04-12

阿里前端大神寒冬談?wù)劽嬖嚺c面試題02-13

常見的英文面試題12-30

前端程序員JavaScript面試題02-19

前端開發(fā)實習(xí)報告08-01

常見.net面試題及答案08-15

iOS開發(fā)設(shè)計面試試題02-13

web前端開發(fā)求職簡歷01-18