1. 程式人生 > >常見前端開發面試題

常見前端開發面試題

一般問題

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

  • 如果用,你都關注那些人?

你用Github嗎?

  • 如果用,你關注的專案有什麼?

你關注的部落格有那些?

你使用那些版本管理系統,比如Git,SVN等?

你常用的開發環境是怎樣的?比如作業系統,文字編輯器,瀏覽器,及其他工具等。

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

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

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

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

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

你如何對網站的檔案和資源進行優化?

  • 期待的解決方案包括:
  1. 檔案合併
  2. 檔案最小化/檔案壓縮
  3. 使用CDN託管
  4. 快取的使用
  5. 其他

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

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

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

如果你接到了一個使用Tab來縮排程式碼的專案,但是你喜歡空格,你會怎麼做?

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

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

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

你都使用那些工作來測試程式碼的效能?

  • 例如JSPerf (http://jsperf.com/)
  • 例如Dromaeo (http://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是牛逼的庫還是最牛逼的庫。

感謝這些貢獻者: