摘要:前端工作面試問(wèn)題備注本包含了一些前端面試問(wèn)題用于考查候選者。不建議對(duì)單個(gè)候選者問(wèn)及每個(gè)問(wèn)題那需要好幾個(gè)小時(shí)。列舉不同的清除浮動(dòng)的技巧,并指出它們各自適用的使用場(chǎng)景。選擇器字符串,字符串,回調(diào)函數(shù),元素,對(duì)象,數(shù)組,元素?cái)?shù)組,對(duì)象等。
https://github.com/darcyclarke/Front-end-Developer-Interview-Questions
前端工作面試問(wèn)題備注: 本 repo 包含了一些前端面試問(wèn)題用于考查候選者。不建議對(duì)單個(gè)候選者問(wèn)及每個(gè)問(wèn)題(那需要好幾個(gè)小時(shí))。只要從列表里挑選一些,就能幫助你考查候選者是否具備所需要的技能了。
Rebecca Murphey 的 Baseline For Front-End Developers 是你在準(zhǔn)備面試前應(yīng)該閱讀的絕佳資源。
記住: 很多問(wèn)題都是開(kāi)放的,可以引發(fā)有趣的討論。這比直接的答案更能體現(xiàn)此人的能力。
目錄最初的貢獻(xiàn)者
常見(jiàn)問(wèn)題
HTML 相關(guān)問(wèn)題
CSS 相關(guān)問(wèn)題
JS 相關(guān)問(wèn)題
jQuery 相關(guān)問(wèn)題
代碼相關(guān)的問(wèn)題
有趣的問(wèn)題
其他參考資料
[?] 最初貢獻(xiàn)者這里大部分的面試題都摘抄自 Paul Irish (@paul_irish) 在 oksoclap 創(chuàng)建的帖子,這份原帖的貢獻(xiàn)者還有:
@bentruyman - http://bentruyman.com
@cowboy - http://benalman.com
@ajpiano - http://ajpiano.com
@SlexAxton - http://alexsexton.com
@boazsender - http://boazsender.com
@miketaylr - http://miketaylr.com
@vladikoff - http://vladfilippov.com
@gf3 - http://gf3.ca
@jon_neal - http://twitter.com/jon_neal
@wookiehangover - http://wookiehangover.com
@darcy_clarke - http://darcyclarke.me
@iansym
[?] 常見(jiàn)問(wèn)題:你在昨天/本周學(xué)到了什么?
編寫(xiě)代碼的哪些方面能夠使你興奮或感興趣?
在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過(guò)程中,你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的?
談?wù)勀阆矚g的開(kāi)發(fā)環(huán)境。(例如操作系統(tǒng),編輯器,瀏覽器,工具等等。)
你最熟悉哪一套版本控制系統(tǒng)?
你能描述一下當(dāng)你制作一個(gè)網(wǎng)頁(yè)的工作流程嗎?
你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?
如果提到了特性檢測(cè),可以加分。
請(qǐng)解釋一下什么是“語(yǔ)義化的 HTML”。
你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化?
期待的解決方案包括:
文件合并
文件最小化/文件壓縮
使用 CDN 托管
緩存的使用
其他
為什么利用多個(gè)域名來(lái)提供網(wǎng)站資源會(huì)更有效?
瀏覽器同一時(shí)間可以從一個(gè)域名下載多少資源?
請(qǐng)說(shuō)出三種減少頁(yè)面加載時(shí)間的方法。(加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間)
如果你參與到一個(gè)項(xiàng)目中,發(fā)現(xiàn)他們使用 Tab 來(lái)縮進(jìn)代碼,但是你喜歡空格,你會(huì)怎么做?
建議這個(gè)項(xiàng)目使用像 EditorConfig (http://editorconfig.org/) 之類的規(guī)范
為了保持一致性,接受項(xiàng)目原有的風(fēng)格
直接使用 VIM 的 retab 命令
請(qǐng)寫(xiě)一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面
如果不使用JS來(lái)完成,可以加分。
你都使用哪些工具來(lái)測(cè)試代碼的性能?
Profiler, JSPerf, Dromaeo
如果今年你打算熟練掌握一項(xiàng)新技術(shù),那會(huì)是什么?
Long-Polling, Websockets, SSE(Server-Sent Event) 之間有什么區(qū)別?
請(qǐng)談一下你對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解。
什么是 FOUC(無(wú)樣式內(nèi)容閃爍)?你如何來(lái)避免 FOUC?
請(qǐng)盡可能完整得描述下從輸入U(xiǎn)RL到整個(gè)網(wǎng)頁(yè)加載完畢及顯示在屏幕上的整個(gè)流程
[?] HTML相關(guān)問(wèn)題:doctype(文檔類型)的作用是什么?
瀏覽器標(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)題你必須要考慮?
data-屬性的作用是什么?
如果把 HTML5 看作做一個(gè)開(kāi)放平臺(tái),那它的構(gòu)建模塊有哪些?
請(qǐng)描述一下 cookies,sessionStorage 和 localStorage 的區(qū)別?
請(qǐng)描述一下 GET 和 POST 的區(qū)別?
[?] CSS 相關(guān)問(wèn)題:描述下 “reset” CSS 文件的作用和使用它的好處。
解釋下浮動(dòng)和它的工作原理。
列舉不同的清除浮動(dòng)的技巧,并指出它們各自適用的使用場(chǎng)景。
解釋下 CSS sprites,以及你要如何在頁(yè)面或網(wǎng)站中使用它。
你最喜歡的圖片替換方法是什么,你如何選擇使用。
討論CSS hacks,條件引用或者其他。
如何為有功能限制的瀏覽器提供網(wǎng)頁(yè)?
你會(huì)使用哪些技術(shù)和處理方法?
有哪些的隱藏內(nèi)容的方法(如果同時(shí)還要保證屏幕閱讀器可用呢?)
你用過(guò)柵格系統(tǒng)嗎?如果使用過(guò),你最喜歡哪種?
你用過(guò)媒體查詢,或針對(duì)移動(dòng)端的布局/CSS 嗎?
你熟悉 SVG 樣式的書(shū)寫(xiě)嗎?
如何優(yōu)化網(wǎng)頁(yè)的打印樣式?
在書(shū)寫(xiě)高效 CSS 時(shí)會(huì)有哪些問(wèn)題需要考慮?
使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些?(SASS,Compass,Stylus,LESS)
描述下你曾經(jīng)使用過(guò)的 CSS 預(yù)處理的優(yōu)缺點(diǎn)。
如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體,你該如何去實(shí)現(xiàn)?
Webfonts (字體服務(wù)例如:Google Webfonts,Typekit 等等。)
解釋下瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器?
解釋一下你對(duì)盒模型的理解,以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來(lái)渲染你的布局。
請(qǐng)解釋一下 * { box-sizing: border-box; } 的作用, 并且說(shuō)明使用它有什么好處?
請(qǐng)羅列出你所知道的 display 屬性的全部值
請(qǐng)解釋一下 inline 和 inline-block 的區(qū)別?
請(qǐng)解釋一下 relative、fixed、absolute 和 static 元素的區(qū)別
你目前在使用哪一套CSS框架,或者在產(chǎn)品線上使用過(guò)哪一套?(Bootstrap, PureCSS, Foundation 等等)
如果有,請(qǐng)問(wèn)是哪一套?如果可以,你如何改善CSS框架?
請(qǐng)問(wèn)你有使用過(guò) CSS Flexbox 或者 Grid specs 嗎?
如果有,請(qǐng)問(wèn)在性能和效率的方面你是怎么看的?
[?] JS相關(guān)問(wèn)題:解釋下事件代理。
解釋下 JavaScript 中 this 是如何工作的。
解釋下原型繼承的原理。
你是如何測(cè)試JavaScript代碼的?
AMD vs. CommonJS?
什么是哈希表?
解釋下為什么接下來(lái)這段代碼不是 IIFE(立即調(diào)用的函數(shù)表達(dá)式):function foo(){ }();.
要做哪些改動(dòng)使它變成 IIFE?
描述以下變量的區(qū)別:null,undefined 或 undeclared?
該如何檢測(cè)它們?
什么是閉包,如何使用它,為什么要使用它?
請(qǐng)舉出一個(gè)匿名函數(shù)的典型用例?
解釋 “JavaScript 模塊模式” 以及你在何時(shí)使用它。
如果有提到無(wú)污染的命名空間,可以考慮加分。
如果你的模塊沒(méi)有自己的命名空間會(huì)怎么樣?
你是如何組織自己的代碼?是使用模塊模式,還是使用經(jīng)典繼承的方法?
請(qǐng)指出 JavaScript 宿主對(duì)象和原生對(duì)象的區(qū)別?
指出下列代碼的區(qū)別:
function Person(){} var person = Person(); var person = new Person();
.call 和 .apply 的區(qū)別是什么?
請(qǐng)解釋 Function.prototype.bind 的作用?
你何時(shí)優(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)嗎?
如有使用過(guò),請(qǐng)談?wù)勀愣际褂眠^(guò)哪些庫(kù),比如 Mustache.js,Handlebars 等等。
請(qǐng)解釋變量聲明提升。
請(qǐng)描述下事件冒泡機(jī)制。
"attribute" 和 "property" 的區(qū)別是什么?
為什么擴(kuò)展 JavaScript 內(nèi)置對(duì)象不是好的做法?
為什么擴(kuò)展 JavaScript 內(nèi)置對(duì)象是好的做法?
請(qǐng)指出 document load 和 document ready 兩個(gè)事件的區(qū)別。
== 和 === 有什么不同?
你如何從瀏覽器的 URL 中獲取查詢字符串參數(shù)。
請(qǐng)解釋一下 JavaScript 的同源策略。
請(qǐng)描述一下 JavaScript 的繼承模式。
如何實(shí)現(xiàn)下列代碼:
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
描述一種 JavaScript 中實(shí)現(xiàn) memoization(避免重復(fù)運(yùn)算)的策略。
什么是三元表達(dá)式?“三元” 表示什么意思?
函數(shù)的參數(shù)元是什么?
什么是 "use strict"; ? 使用它的好處和壞處分別是什么?
[?] jQuery 相關(guān)問(wèn)題:解釋"chaining"。
解釋"deferreds"。
你知道哪些針對(duì) jQuery 的優(yōu)化方法。
請(qǐng)解釋 .end() 的用途。
你如何給一個(gè)事件處理函數(shù)命名空間,為什么要這樣做?
請(qǐng)說(shuō)出你可以傳遞給 jQuery 方法的四種不同值。
選擇器(字符串),HTML(字符串),回調(diào)函數(shù),HTML元素,對(duì)象,數(shù)組,元素?cái)?shù)組,jQuery對(duì)象等。
什么是效果隊(duì)列?
請(qǐng)指出 .get(),[],eq() 的區(qū)別。
請(qǐng)指出 .bind(),.live() 和 .delegate() 的區(qū)別。
請(qǐng)指出 $ 和 $.fn 的區(qū)別,或者說(shuō)出 $.fn 的用途。
請(qǐng)優(yōu)化下列選擇器:
$(".foo div#bar:eq(0)")[?] 代碼相關(guān)的問(wèn)題:
modulo(12, 5) // 2
問(wèn)題:實(shí)現(xiàn)滿足上述結(jié)果的modulo函數(shù)
"i"m a lasagna hog".split("").reverse().join("");
問(wèn)題:上面的語(yǔ)句的返回值是什么?
答案:"goh angasal a m"i"
( 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
你編寫(xiě)過(guò)的最酷的代碼是什么?其中你最自豪的是什么?
在你使用過(guò)的開(kāi)發(fā)工具中,最喜歡哪個(gè)?
你有什么業(yè)余項(xiàng)目嗎?是哪種類型的?
你最愛(ài)的 IE 特性是什么?
[?] 其他參考資料:http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before
http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/
http://css-tricks.com/interview-questions-css/
http://davidshariff.com/quiz/
http://blog.sourcing.io/interview-questions
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/49512.html
摘要:前端工作面試問(wèn)題備注本包含了一些前端面試問(wèn)題用于考查候選者。不建議對(duì)單個(gè)候選者問(wèn)及每個(gè)問(wèn)題那需要好幾個(gè)小時(shí)。列舉不同的清除浮動(dòng)的技巧,并指出它們各自適用的使用場(chǎng)景。選擇器字符串,字符串,回調(diào)函數(shù),元素,對(duì)象,數(shù)組,元素?cái)?shù)組,對(duì)象等。 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions 前端工作面...
摘要:前端工作面試問(wèn)題備注本包含了一些前端面試問(wèn)題用于考查候選者。不建議對(duì)單個(gè)候選者問(wèn)及每個(gè)問(wèn)題那需要好幾個(gè)小時(shí)。列舉不同的清除浮動(dòng)的技巧,并指出它們各自適用的使用場(chǎng)景。選擇器字符串,字符串,回調(diào)函數(shù),元素,對(duì)象,數(shù)組,元素?cái)?shù)組,對(duì)象等。 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions 前端工作面...
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過(guò)面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開(kāi)發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過(guò)餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過(guò)面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:收集的一些前端面試題從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過(guò)面試更難得及各大互聯(lián)網(wǎng)公司前端筆試面試題篇及各大互聯(lián)網(wǎng)公司前端筆試面試題篇面試題個(gè)和個(gè)經(jīng)典面試題前端開(kāi)發(fā)面試題如何面試前端工程師很重要個(gè)變態(tài)題解析如何通過(guò)餓了么面試輕 收集的一些前端面試題 從面試題發(fā)現(xiàn)不足,進(jìn)而查漏補(bǔ)缺,比通過(guò)面試更難得 1 BAT及各大互聯(lián)網(wǎng)公司2014前端筆試面試題--Html,Css篇 2 BAT...
摘要:作者先后在工作,期間會(huì)參加面試工作。的上下文是,因此已經(jīng)失去了屬性。一個(gè)彈窗庫(kù)面試的最后一部分,我會(huì)要求面試者寫(xiě)點(diǎn)實(shí)際的東西。這個(gè)非常有用,足以了解前端的技術(shù)棧。一些面試者會(huì)使用絕對(duì)定位,而有的面試者則更擅長(zhǎng)使用。 文章來(lái)自翻譯,其中忽略了一些無(wú)關(guān)緊要的內(nèi)容直入主題。 作者先后在twitter,Stripe工作,期間會(huì)參加面試工作。實(shí)際上參加面試工作的人都知道要想在一個(gè)較短的時(shí)間內(nèi)(3...
閱讀 3338·2022-01-04 14:20
閱讀 3106·2021-09-22 15:08
閱讀 2188·2021-09-03 10:44
閱讀 2314·2019-08-30 15:44
閱讀 1490·2019-08-29 18:40
閱讀 2654·2019-08-29 17:09
閱讀 2988·2019-08-26 13:53
閱讀 3220·2019-08-26 13:37