791      阿裏雲  技術社區[雲棲]

常見前端開發麵試題

摘要：麵試題是招聘公司和開發者都非常關心的話題，公司希望通過它了解開發者的真實水平和細節處理能力，而開發者希望能夠最大程度地展示自己的水平（甚至超常發揮）。本文提供了眾多前端開發麵試題，無論是招聘方還是應聘方都值得一看！

reference:https://www.csdn.net/article/2012-10-18/2810902-Front-end-Developer-Interview-Questions

一般問題

你用Twitter嗎？ （在天朝最好問你用微博嗎？）

• 如果用，你都關注那些人？

你用Github嗎？

• 如果用，你關注的項目有什麼？

你關注的博客有那些？

你使用那些版本管理係統，比如Git，SVN等？

你常用的開發環境是怎樣的？比如操作係統，文本編輯器，瀏覽器，及其他工具等。

你能描述一下你製作一個網頁的工作流程嗎？

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

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

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

你更喜歡在哪個瀏覽器下進行開發？你使用那些開發人員工具？

你如何對網站的文件和資源進行優化？

• 期待的解決方案包括：

1. 文件合並
2. 文件最小化/文件壓縮
3. 使用CDN托管
4. 緩存的使用
5. 其他

為什麼利用多個域名來存儲網站資源會更有效？

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

請說出三種減低頁麵加載時間的方法。（加載時間指感知的時間或者實際加載時間）

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

• 建議這個項目使用像EditorConfig(https://editorconfig.org)之類的規範
• 為了保持一致性，轉換成項目原有的風格
• 直接使用VIM的retab命令

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

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

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

• 例如JSPerf (https://jsperf.com/)
• 例如Dromaeo (https://dromaeo.com/)
• 其它。

如果今年你打算熟練掌握一項新技術，那會是什麼？

請談一下你對網頁標準和標準製定機構重要性的理解。

什麼是FOUC？你如何來避免FOUC？

HTML相關問題

文檔類型的作用是什麼？你知道多少種文檔類型？

瀏覽器標準模式和怪異模式之間的區別是什麼？

使用XHTML的局限有那些？

• 如果頁麵使用'application/xhtml+xml'會有什麼問題嗎？

如果網頁內容需要支持多語言，你會怎麼做？

• 在設計和開發多語言網站時，有哪些問題你必須要考慮？

在HTML5的頁麵中可以使用XHTML的語法嗎？

在HTML5中如何使用XML？

'data-'屬性的作用是什麼？

如果把HTML5看作做一個開放平台，那它的構建模塊有那些？

請描述一下cookies，sessionStorage和localStorage的區別？

JS相關問題

你使用過那些Javascript庫？

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

什麼是哈希表？

'undefined'變量和'undeclared'變量分別指什麼？

閉包是什麼，如何使用它，為什麼要使用它？

• 你喜歡的使用閉包的模式是什麼？

請舉出一個匿名函數的典型用例？

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

• 如果有提到無汙染的命名空間，可以考慮加分。
• 如果你的模塊沒有自己的命名空間會怎麼樣？

你如何組織自己的代碼？是使用模塊模式，還是使用經典繼承的方法？

請指出Javascript宿主對象和內置對象的區別？

指出下列代碼的區別：

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

'.call'和'.apply'的區別是什麼？

請解釋'Funciton.prototype.bind'的作用？

你如何優化自己的代碼？

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

在什麼時候你會使用'document.write()'？

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

請指出瀏覽器特性檢測，特性推斷和瀏覽器UA字符串嗅探的區別？

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

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

你使用過JavaScript的模板係統嗎？

• 如有使用做，請談談你都使用過那些類似庫文件。比如Mustache.js,Handlebars等等。

請解釋變量聲明提升。

請描述下事件冒泡機製。

"attribute"和"property"的區別是什麼？

為什麼擴展JavaScript內置對象是個壞做法？

為什麼擴展JavaScript內置對象是個好做法？

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

'=='和'==='有什麼不同？

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

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

請解釋一下事件代理。

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

如何實現下列代碼：

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

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

什麼是三元條件語句？

函數的參數元是什麼？

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

JS代碼示例：

1. ~~3.14 

問題：上麵的語句的返回值是什麼？ 答案：3

1. "i'm a lasagna hog".split("").reverse().join(""); 

問題：上麵的語句的返回值是什麼？ 答案："goh angasal a m'i"

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

問題：window.foo的值是什麼？ 答案："bar" 隻有window.foo為假時的才是上麵答案，否則就是它本身的值。

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

問題：上麵兩個alert的結果是什麼？ 答案: "Hello World" & ReferenceError: bar is not defined

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

問題：foo.length的值是什麼？ 答案：'2'

1. var foo = {}; 
2. foo.bar = 'hello'; 

問題：foo.length的值是什麼？ **答案: undefined

jQuery相關問題

解釋"chaining"。

解釋"deferreds"。

你知道那些針對jQuery的優化方法。

請解釋'.end()'的用途。

你如何給一個事件處理函數命名空間，為什麼要這樣做？

請說出你可以傳遞到jQuery方法的四種不同值。

• 選擇器（字符串），HTML（字符串），回調函數，HTML元素，對象，數組，元素數組，jQuery對象等。

什麼是效果隊列？

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

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

請指出'$'和'$.fn'的區別？或者說出'$.fn'的用戶。

請優化下列選擇器：

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

CSS相關問題

描述css reset的作用和用途。

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

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

解釋css sprites,如何使用。

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

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

如何為有功能限製的瀏覽器提供網頁。

• 你會使用那些技術和處理方法。

如何視覺隱藏網頁內容，隻讓它們在屏幕閱讀器中可用。

你使用過網格係統嗎？如果使用過，你最喜歡哪種？

你使用過meidia queries（媒體查詢）嗎，或者移動網站相關的CSS布局。

你熟悉SVG樣式的書寫嗎？

如何優化網頁的打印樣式。

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

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

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

你是否接觸過使用非標準字體的設計？

• 字體服務，Google Webfonts, Typekit,等等。

請解釋瀏覽器是如何根據CSS選擇器選擇對應元素的。

可選的有趣問題

你編寫過的最酷的代碼是什麼？其中你最自豪的是什麼？

你知道HTML5的幫派標誌嗎？

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

你使用的開發工具中，你最喜歡的部分是什麼？

你有什麼業餘項目嗎？是那種類型的？

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

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

• 靜靜的看他們是否將紙反轉。

海盜還是忍者？

• 如果是兩者的合體，並有恰當理由，可以加分。如果是僵屍猴子海盜加忍者加兩分。（注：此題文化差異過大）

如果沒有在Web開發，你會做什麼？

卡門聖迭哥的隱藏處在哪裏？

• 提示：本題的答案永遠是錯的。

你最愛的IE特性是什麼？

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

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

原文鏈接：GitHub

感謝這些貢獻者：

@bentruyman (https://bentruyman.com/), @roger_raymond (https://twitter.com/iansym), @ajpiano (https://ajpiano.com/), @paul_irish (https://paulirish.com/), @SlexAxton (https://alexsexton.com/), @boazsender (https://boazsender.com/), @miketaylr (https://miketaylr.com/), @vladikoff (https://vladfilippov.com/), @gf3 (https://gf3.ca/), @jon_neal (https://twitter.com/jon_neal), @wookiehangover (https://wookiehangover.com/) and @darcy_clarke (https://darcyclarke.me)

最後更新：2017-04-03 05:46:49

  上一篇： Objective-C 是如何慢慢走紅的?

  下一篇： DataGridView 添加checkbox