- 相關(guān)推薦
完整版前端工程師筆試問(wèn)題列表
導讀：請記住，下面的很多問(wèn)題都是開(kāi)放式的，無(wú)標準答案，并能引發(fā)有趣的討論。相比直接的答案，相信你在面試前端工程師時(shí)，從討論中你對候選人會(huì )了解的更多。以下是由應屆畢業(yè)生網(wǎng)小編J.L為您整理推薦的完整版前端工程師筆試問(wèn)題列表，歡迎參考閱讀。
一般問(wèn)題
★你用Twitter嗎? (在天朝最好問(wèn)你用微博嗎?)
→如果用，你都關(guān)注那些人?
★你用Github嗎?
→如果用，你關(guān)注的項目有什么?
★你關(guān)注的博客有那些?
★你使用那些版本管理系統，比如Git，SVN等?
★你常用的開(kāi)發(fā)環(huán)境是怎樣的?比如操作系統，文本編輯器，瀏覽器，及其他工具等。
★你能描述一下你制作一個(gè)網(wǎng)頁(yè)的工作流程嗎?
★你能描述一下漸進(jìn)增強和優(yōu)雅降級之間的不同嗎?
→如果提到了特性檢測，可以加分。
★請解釋一下什么是語(yǔ)義化的HTML?
★你更喜歡在哪個(gè)瀏覽器下進(jìn)行開(kāi)發(fā)?你使用那些開(kāi)發(fā)人員工具?
★你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化?期待的解決方案包括：
· 文件合并
· 文件最小化/文件壓縮
· 使用CDN托管
· 緩存的使用
· 其他
★為什么利用多個(gè)域名來(lái)存儲網(wǎng)站資源會(huì )更有效?
→瀏覽器一次可以從一個(gè)域名下做多少資源?
★請說(shuō)出三種減低頁(yè)面加載時(shí)間的方法。(加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間)
★如果你接到了一個(gè)使用Tab來(lái)縮進(jìn)代碼的項目，但是你喜歡空格，你會(huì )怎么做?
· 建議這個(gè)項目使用像EditorConfig 之類(lèi)的規范
· 為了保持一致性，轉換成項目原有的風(fēng)格
· 直接使用VIM的retab命令
★請寫(xiě)一個(gè)簡(jiǎn)單的幻燈效果頁(yè)面
→如果不使用JS來(lái)完成，可以加分。
★你都使用那些工作來(lái)測試代碼的性能?
· 例如JSPerf
· 例如Dromaeo
· 其它。
★如果今年你打算熟練掌握一項新技術(shù)，那會(huì )是什么?
★請談一下你對網(wǎng)頁(yè)標準和標準制定機構重要性的理解。
★什么是FOUC?你如何來(lái)避免FOUC?
HTML相關(guān)問(wèn)題
★文檔類(lèi)型的作用是什么?你知道多少種文檔類(lèi)型?
★瀏覽器標準模式和怪異模式之間的區別是什么?
★使用XHTML的局限有那些?
→如果頁(yè)面使用’application/xhtml+xml’會(huì )有什么問(wèn)題嗎?
★如果網(wǎng)頁(yè)內容需要支持多語(yǔ)言，你會(huì )怎么做?
★在設計和開(kāi)發(fā)多語(yǔ)言網(wǎng)站時(shí)，有哪些問(wèn)題你必須要考慮?
★在HTML5的頁(yè)面中可以使用XHTML的語(yǔ)法嗎?
★在HTML5中如何使用XML?
★’data-’屬性的作用是什么?
★如果把HTML5看作做一個(gè)開(kāi)放平臺，那它的構建模塊有那些?
★請描述一下cookies、sessionStorage和localStorage的區別?
JS相關(guān)問(wèn)題
★你使用過(guò)那些Javascript庫?
★你是否研究過(guò)你所使用的JS庫或者框架的源代碼?
★什么是哈希表?
★’undefined’變量和’undeclared’變量分別指什么?
★閉包是什么，如何使用它，為什么要使用它?
→你喜歡的使用閉包的模式是什么?
★請舉出一個(gè)匿名函數的典型用例?
★請解釋什么是Javascript的模塊模式，并舉出實(shí)用實(shí)例。
·如果有提到無(wú)污染的命名空間，可以考慮加分。
·如果你的模塊沒(méi)有自己的命名空間會(huì )怎么樣?
★你如何組織自己的代碼?是使用模塊模式，還是使用經(jīng)典繼承的方法?
★請指出Javascript宿主對象和內置對象的區別?
★指出下列代碼的區別：
1 | function Person(){} var person = Person() var person = new Person() |
★’.call’和’.apply’的區別是什么?
★請解釋’Funciton.prototype.bind’的作用?
★你如何優(yōu)化自己的代碼?
★你能解釋一下JavaScript中的繼承是如何工作的嗎?
★在什么時(shí)候你會(huì )使用’document.write()’?
→大多數生成的廣告代碼依舊使用’document.write()’，雖然這種用法會(huì )讓人很不爽。
★請指出瀏覽器特性檢測，特性推斷和瀏覽器UA字符串嗅探的區別?
★請盡可能詳盡的解釋AJAX的工作原理。
★請解釋JSONP的工作原理，以及它為什么不是真正的AJAX。
★你使用過(guò)JavaScript的模板系統嗎?
→如有使用過(guò)，請談?wù)勀愣际褂眠^(guò)那些類(lèi)似庫文件。比如Mustache.js、Handlebars等等。
★請解釋變量聲明提升。
★請描述一下事件冒泡機制。
★”attribute”和”property”的區別是什么?
★為什么擴展JavaScript內置對象是個(gè)壞做法?
★為什么擴展JavaScript內置對象是個(gè)好做法?
★請指出document load和document ready的區別。(這是個(gè)問(wèn)題的問(wèn)題)
★’==’和’===’有什么不同?
★你如何獲取瀏覽器URL中查詢(xún)字符串中的參數。
★請解釋一下JavaScript的同源策略。
★請解釋一下事件代理。
★請描述一下JavaScript的繼承模式。
★如何實(shí)現下列代碼：
1 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] |
★描述一種JavaScript memoization(避免重復運算)的策略。
★什么是三元條件語(yǔ)句?
★函數的參數元是什么?
★什么是”use strict”?使用它的好處和壞處分別是什么?
JS代碼示例：
1 | ~~3.14 |
★問(wèn)題：上面的語(yǔ)句的返回值是什么? **答案：3
1 | "i'm a lasagna hog".split("").reverse().join(""); |
★問(wèn)題：上面的語(yǔ)句的返回值是什么? **答案：”goh angasal a m’i”
1 | ( window.foo || ( window.foo = "bar" ) ); |
★問(wèn)題：window.foo的值是什么? **答案：”bar” 只有window.foo為假時(shí)的才是上面答案，否則就是它本身的值。
1 2 3 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); |
★問(wèn)題：上面兩個(gè)alert的結果是什么 答案: “Hello World” & ReferenceError: bar is not defined
1 2 3 | var foo = [];foo.push(1);foo.push(2); |
★問(wèn)題：foo.length的值是什么? **答案：’2′
1 2 | var foo = {};foo.bar = 'hello'; |
★問(wèn)題：foo.length的值是什么? **答案: undefined
jQuery相關(guān)問(wèn)題
★解釋”chaining”。
★解釋”deferreds”。
★你知道那些針對jQuery的優(yōu)化方法。
★請解釋’.end()’的用途。
★你如何給一個(gè)事件處理函數命名空間，為什么要這樣做?
★請說(shuō)出你可以傳遞到j(luò )Query方法的四種不同值。
→選擇器(字符串)，HTML(字符串)，回調函數，HTML元素，對象，數組，元素數組，jQuery對象等。
★什么是效果隊列?
★請指出’.get()’、’[]‘、’eq()’,的區別。
★請指出’.bing()’、’.live()’ 和 ‘.delegate()’的區別。
★請指出 ‘$’ 和 ‘$.fn’ 的區別?或者解釋什么是 ‘$.fn’ 。
★請優(yōu)化下列選擇器：
1 | $(".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è)內容，只讓它們在屏幕閱讀器中可用。
★你使用過(guò)網(wǎng)格系統嗎?如果使用過(guò)，你最喜歡哪種?
★你使用過(guò)meidia queries(媒體查詢(xún))嗎，或者移動(dòng)網(wǎng)站相關(guān)的CSS布局。
★你熟悉SVG樣式的書(shū)寫(xiě)嗎?
★如何優(yōu)化網(wǎng)頁(yè)的打印樣式。
★在書(shū)寫(xiě)高效CSS文件時(shí)會(huì )有哪些問(wèn)題需要考慮。
★你使用CSS預處理器嗎?(SASS,Compass,Stylus,LESS)
→如果使用，描述你的喜好。
★你是否接觸過(guò)使用非標準字體的設計?
→字體服務(wù)，Google Webfonts, Typekit,等等。
★請解釋瀏覽器是如何根據CSS選擇器選擇對應元素的。
可選的有趣問(wèn)題
★你編寫(xiě)過(guò)的最酷的代碼是什么?其中你最自豪的是什么?
★你知道HTML5的幫派標志嗎?
★你是否正在或曾經(jīng)在一艘船上。(不懂這個(gè)幽默)
★你使用的開(kāi)發(fā)工具中，你最喜歡的部分是什么?
★你有什么業(yè)余項目嗎?是那種類(lèi)型的?
★解釋cornify的重要性?(本題完全摸不到頭腦)
★在一張紙上，垂直寫(xiě)下ABCDE，然后不用任何代碼，將他們到序排列。
→靜靜地看他們是否將紙翻轉。
★海盜還是忍者?
→如果是兩者的合體，并有恰當理由，可以加分。如果是僵尸猴子海盜加忍者加兩分。(譯注，此題文化差異過(guò)大)
★如果沒(méi)有在Web開(kāi)發(fā)，你會(huì )做什么?
★卡門(mén)圣迭哥的隱藏處在哪里?
→提示：本題的答案永遠是錯的。
★你最?lèi)?ài)的IE特性是什么?
★完句填空： Brendan Eich和Doug Crockford是JavaScript的________。
★討論：jQuery是牛逼的庫還是最牛逼的庫。
【完整版前端工程師筆試問(wèn)題列表】相關(guān)文章：
最新前端開(kāi)發(fā)筆試題（題目列表+答案 完整版）02-14
阿里在線(xiàn)前端筆試題08-04
阿里在線(xiàn)前端筆試題201508-03
現場(chǎng)筆試與在線(xiàn)筆試的問(wèn)題11-21
關(guān)于筆試的問(wèn)題08-08
BNP的筆試問(wèn)題11-21
請問(wèn)關(guān)于筆試的問(wèn)題08-08
51的筆試問(wèn)題？11-19