常見前端開發面試題

HTML相關

1、 標籤的定義與用法

   http://www.xinran001.com/bbs/thread-72998-1-1.html

2、塊級元素和行內元素

   http://www.w3cwhy.com/css-html/html-hkmarka.html 

3、你真的瞭解HTML嗎？ 雅虎面試題

   http://club.topsage.com/thread-2738399-1-1.html

幸運且光榮的被老大安排了一個任務 - “去整理些前端面試題”。年前確實不是招人的好時候，所以我們前端團隊經過了超負荷的運轉，終於堅持過了春節。春節以後就開始招人啦，這套題考察的目標就是基礎基礎再基礎，嘿嘿。

事先聲明：

◆ 這些題目的來源：面試曾經被問過;工作被別人問過或者遇見過;網上看見過...

◆ 答案真心不給提供，真的是許多問題都需要個人的理解和沉澱，所以還請各位自己動手...前端可以試試自己差不多能回答多少題，哈哈。

◆ 其實很多題我也沒有好答案，面試的時候如果遇到牛人我也可以順便交流交流，反正我也只是一面，不丟人也不怕丟人。

◆ 如果朋友們有好的面試題歡迎提建議，我會其實補充更新的，先謝謝各位了。

HTML相關

1.

標籤的定義與用法。

2. 塊級元素和行內元素都有哪些?

3. 你真的瞭解HTML嗎? 雅虎面試題　　把前面黃底那段拿去搜索下就知道了(曾在某浪公司面試的時候被問到過，確實是很好的問題)。

CSS相關

1. 介紹所知道的CSS hack技巧(如：_， *， +， \9， !important 之類)。

2. 介紹CSS盒模型。

3. CSS層疊是什麼?介紹一下。

4. 都知道哪些CSS瀏覽器兼容性問題。

5. 有時會被問到些刁鑽點的題，比如position值都有哪些，CSS3都有哪些新內容...

JavaScript基礎相關

1. HTTP協議的狀態消息都有哪些?(如200、302對應的描述)

2. AJAX是什麼? AJAX的交互模型(流程)? AJAX跨域的解決辦法?

3. 同步和異步的區別?

4. 簡述JavaScript封裝。

5. JavaScript繼承有哪兩種形式形式，進行描述。

6. 什麼是閉包?以下代碼點擊

會輸出什麼?爲什麼?能大概說明白的話繼續問能想出幾種解決辦法。

1. > 
2. <</span>html> 
3. <</span>head> 
4. <</span>meta charset="utf-8" /> 
5. <</span>title>閉包演示</</span>title> 
6. <</span>style type="text/css"> 
7.     p {background:gold;}  
8. </</span>style> 
9. <</span>script type="text/javascript">   
10. function init() {      
11.     var pAry = document.getElementsByTagName_r("p");      
12.     for( var i=0; i<</span>pAry.length; i++ ) {      
13.          pAry[i].onclick = function() {      
14.          alert(i);      
15.     }   
16.   }  
17. }  
18. </</span>script>   
19. </</span>head>   
20. <</span>body onload="init();">   
21. <</span>p>產品 0</</span>p>   
22. <</span>p>產品 1</</span>p>   
23. <</span>p>產品 2</</span>p>   
24. <</span>p>產品 3</</span>p>   
25. <</span>p>產品 4</</span>p>   
26. </</span>body>   
27. </</span>html>  

7. 在JS中this關鍵字的使用場合和用法(如在構造函數中、setTimeout中等)。

8. 簡述下cookie的操作，還有cookie的屬性都知道哪些。

9. IE與FF的JS兼容性都知道哪些。

10. DOM操作 - 怎樣添加、移除、移動、複製、創建和查找節點(這個問題真心是基礎題，一般不會問)。

jQuery相關

1. jQuery源碼是否嘗試去讀過?說說基本的架構或者 jQuery.fn.init 中都做了哪些判斷。

2. 都知道哪些不好的jQuery書寫方式。

3. Sizzle是否有讀過?

其它相關的加分項：

1. 都使用和了解過哪些編輯器?都使用和了解過哪些日常工具?

2. 都知道有哪些瀏覽器內核?開發過的項目都兼容哪些瀏覽器?

3. 國內外的JS牛人都知道哪些?

4. 瀑布流佈局或者流式佈局是否有了解

4. 正則表達式有系統學習過嗎(看書或網上教程)?有的話就問問簡單點的郵箱驗證、URL驗證， 或者問問 貪婪匹配與懶惰匹配 的理論知識。

5. Node.js是否有過嘗試?到什麼程度?說說個人理解的看法?

6. HTML5都有哪些新的JS API?

7. 前端優化知識都知道哪些?

8. 基礎算法題(如快速排序，能否一兩句說說重要的核心原理或者數組消重等)。

9. 是否有接觸過或者瞭解過重構。

原文：http://www.cnblogs.com/Darren_code/archive/2012/01/31/questions.html

///////////////////////////////

//////////////////////////////

一般問題

---

你用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是牛逼的庫還是最牛逼的庫。

原文鏈接：GitHub

感謝這些貢獻者：

@bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.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/) and @darcy_clarke (http://darcyclarke.me)

謝謝原博主~