2017年秋招史上最全前端面試題合集

前言

本文由我收集總結了一些前端面試題，初學者閱後也要用心鑽研其中的原理，重要知識須要系統學習、透徹學習，造成本身的知識鏈。萬不可投機取巧，臨時抱佛腳只求面試僥倖混過關是錯誤的！也是不可能的！不可能的！不可能的！

前端仍是一個年輕的行業，新的行業標準， 框架， 庫都不斷在更新和新增，正如赫門在2015深JS大會上的《前端服務化之路》主題演講中說的一句話：「每18至24個月，前端都會難一倍」，這些變化使前端的能力更加豐富、創造的應用也會更加完美。因此關注各類前端技術，跟上快速變化的節奏，也是身爲一個前端程序員必備的技能之一。

但願前端er達到既能使用也會表達，對理論知識有本身的理解。可根據下面的知識點一個一個去進階學習，造成本身的職業技能鏈。

面試有幾點需注意：

1. 面試題目： 根據你的等級和職位的變化，入門級到專家級，廣度和深度都會有所增長。

2. 題目類型： 理論知識、算法、項目細節、技術視野、開放性題、工做案例。

3. 細節追問： 能夠確保問到你開始不懂或面試官開始不懂爲止，這樣能夠大大延展題目的區分度和深度，知道你的實際能力。由於這種知識關聯是長時期的學習，臨時抱佛腳絕對是記不住的。

4. 回答問題再棒，面試官（多是你面試職位的直接領導），會考慮我要不要這我的作個人同事？因此態度很重要、除了能作事，還要會作人。（感受更像是相親( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )）

5. 資深的前端開發能把absolute和relative弄混，這樣的人不要也罷，由於團隊須要的是：你這我的具備能夠依靠的才能（靠譜）。

前端開發知識點：

HTML&CSS：
對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級、
HTML五、CSS三、Flexbox

JavaScript：
數據類型、運算、對象、Function、繼承、閉包、做用域、原型鏈、事件、RegExp、JSON、Ajax、
DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 六、Nodejs

其餘：
移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協做、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力

複製代碼

做爲一名前端工程師，不管工做年頭長短都應該掌握的知識點：

一、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

二、DOM操做 —— 如何添加、移除、移動、複製、建立和查找節點等。

三、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。

四、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

五、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

六、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型

七、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們

八、浮動元素 —— 怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

九、HTML與XHTML —— 兩者有什麼區別，你以爲應該使用哪個並說出理由。

十、JSON —— 做用、用途、設計結構。

複製代碼

備註：

根據本身須要選擇性閱讀，面試題是對理論知識的總結，讓本身學會應該如何表達。

資料答案不夠正確和全面，歡迎歡迎Star和提交issues。

格式不斷修改更新中。
複製代碼

HTML

• Doctype做用？標準模式與兼容模式各有什麼區別?

• HTML5 爲何只須要寫 ？

• 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

• 頁面導入樣式時，使用link和@import有什麼區別？

• 介紹一下你對瀏覽器內核的理解？

• 常見的瀏覽器內核有哪些？

• html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

• 簡述一下你對HTML語義化的理解？

• HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

• 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

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

• iframe有那些缺點？

• Label的做用是什麼？是怎麼用的？

• HTML5的form如何關閉自動完成功能？

• 如何實現瀏覽器內多個標籤頁之間的通訊? (阿里)

• webSocket如何兼容低瀏覽器？(阿里)

• 頁面可見性（Page Visibility API） 能夠有哪些用途？

• 如何在頁面上實現一個圓形的可點擊區域？

• 實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。

• 網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

• title與h1的區別、b與strong的區別、i與em的區別？

CSS

• 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不一樣的？

• CSS選擇符有哪些？哪些屬性能夠繼承？

• CSS優先級算法如何計算？

• CSS3新增僞類有那些？

• 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

• display有哪些值？說明他們的做用。

• position的值relative和absolute定位原點是？

• CSS3有哪些新特性？

• 請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

• 用純CSS建立一個三角形的原理是什麼？

• 一個滿屏 品 字佈局 如何設計?

• li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？

• 爲何要初始化CSS樣式。

• absolute的containing block(容器塊)計算方式跟正常流有什麼不一樣？

• CSS裏的visibility屬性有個collapse屬性值是幹嗎用的？在不一樣瀏覽器下之後什麼區別？

• position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

• 對BFC規範(塊級格式化上下文：block formatting context)的理解？

• css定義的權重

• 請解釋一下爲何會出現浮動和何時須要清除浮動？清除浮動的方式

• 移動端的佈局用過媒體查詢嗎？

• 使用 CSS 預處理器嗎？喜歡那個？

• CSS優化、提升性能的方法有哪些？

• 瀏覽器是怎樣解析CSS選擇器的？

• 在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

• margin和padding分別適合什麼場景使用？

• 抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]

• 元素豎向的百分比設定是相對於容器的高度嗎？

• 全屏滾動的原理是什麼？用到了CSS的那些屬性？

• 什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

• 視差滾動效果，如何給每頁作不一樣的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼作？）

• ::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用。

• 如何修改chrome記住密碼後自動填充表單的黃色背景 ？

• 你對line-height是如何理解的？

• 設置元素浮動後，該元素的display值是多少？（自動變成display:block）

• 怎麼讓Chrome支持小於12px 的文字？

• 讓頁面裏的字體變清晰，變細用CSS怎麼作？（-webkit-font-smoothing: antialiased;）

• font-style屬性可讓它賦值爲「oblique」 oblique是什麼意思？

• position:fixed;在android下無效怎麼處理？

• 若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

• display:inline-block 何時會顯示間隙？(攜程)

• overflow: scroll時不能平滑滾動的問題怎麼處理？

• 有一個高度自適應的div，裏面有兩個div，一個高度100px，但願另外一個填滿剩下的高度。

• png、jpg、gif 這些圖片格式解釋一下，分別何時用。有沒有了解過webp？

• 什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼作）

• style標籤寫在body後與body前有什麼區別？

• 什麼是CSS 預處理器 / 後處理器？

JavaScript

• 介紹js的基本數據類型。

• 介紹js有哪些內置對象？

• 說幾條寫JavaScript的基本規範？

• JavaScript原型，原型鏈 ? 有什麼特色？

• JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？

• Javascript如何實現繼承？

• JavaScript繼承的幾種實現方式？

• 參考：構造函數的繼承，非構造函數的繼承；

• javascript建立對象的幾種方式？

• Javascript做用鏈域?

• 談談This對象的理解。

• eval是作什麼的？

• 什麼是window對象? 什麼是document對象?

• null，undefined 的區別？

參考閱讀：undefined與null的區別

• 寫一個通用的事件偵聽器函數。

• ["1", "2", "3"].map(parseInt) 答案是多少？

• 事件是？IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

• 什麼是閉包（closure），爲何要用它？

• javascript 代碼中的"use strict";是什麼意思 ? 使用它區別是什麼？

• 如何判斷一個對象是否屬於某個類？

• new操做符具體幹了什麼呢?

• 用原生JavaScript的實現過什麼功能嗎？

• Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

• JSON 的瞭解？

• js延遲加載的方式有哪些？

• Ajax 是什麼? 如何建立一個Ajax？

• 同步和異步的區別?

• 如何解決跨域問題?

• 頁面編碼和被請求的資源編碼若是不一致如何處理？

• 模塊化開發怎麼作？

• AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

• requireJS的核心原理是什麼？（如何動態加載的？如何避免屢次加載的？如何 緩存的？）

• 談一談你對ECMAScript6的瞭解？

• ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?

• 異步加載JS的方式有哪些？

• documen.write和 innerHTML的區別

• DOM操做——怎樣添加、移除、移動、複製、建立和查找節點?

• .call() 和 .apply() 的區別？

• 數組和對象有哪些原生方法，列舉一下？

• JS 怎麼實現一個類。怎麼實例化這個類

• JavaScript中的做用域與變量聲明提高？

• 如何編寫高性能的Javascript？

• 那些操做會形成內存泄漏？

• JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？

• jQuery.fn的init方法返回的this指的是什麼對象？爲何要返回this？

• jquery中如何將數組轉化爲json字符串，而後再轉化回來？

• jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？

• jquery.extend 與 jquery.fn.extend的區別？

• jQuery 的隊列是如何實現的？隊列能夠用在哪些地方？

• 談一下Jquery中的bind(),live(),delegate(),on()的區別？

• JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

• 是否知道自定義事件。jQuery裏的fire函數是什麼意思，何時用？

• jQuery 是經過哪一個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）

• 針對 jQuery性能的優化方法？

• Jquery與jQuery UI 有啥區別？

• JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

• jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

• jQuery和Zepto的區別？各自的使用場景？

• 針對 jQuery 的優化方法？

• Zepto的點透問題如何解決？

• jQueryUI如何自定義組件?

• 需求：實現一個頁面操做不會整頁刷新的網站，而且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？

• 如何判斷當前腳本運行在瀏覽器仍是node環境中？（阿里）

• 移動端最小觸控區域是多大？

• jQuery 的 slideUp動畫 ，若是目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?

• 把 Script 標籤 放在頁面的最底部的body封閉以前 和封閉以後有什麼區別？瀏覽器會如何解析它們？

• 移動端的點擊事件的有延遲，時間是多久，爲何會有？ 怎麼解決這個延時？（click 有 300ms 延遲,爲了實現safari的雙擊事件的設計，瀏覽器要知道你是否是要雙擊操做。）

• 知道各類JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)麼? 能講出他們各自的優勢和缺點麼?

• Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？

• 解釋JavaScript中的做用域與變量聲明提高？

• 那些操做會形成內存泄漏？

• JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

• Node.js的適用場景？

• (若是會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering麼?

• 解釋一下 Backbone 的 MVC 實現方式？

• 什麼是「前端路由」?何時適合使用「前端路由」? 「前端路由」有哪些優勢和缺點?

• 知道什麼是webkit麼? 知道怎麼用瀏覽器的各類工具來調試和debug代碼麼?

• 如何測試前端代碼麼? 知道BDD, TDD, Unit Test麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)?

• 前端templating(Mustache, underscore, handlebars)是幹嗎的, 怎麼用?

• 簡述一下 Handlebars 的基本用法？

• 簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

• 用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)

• 檢測瀏覽器版本版本有哪些方式？

• What is a Polyfill?

• 作的項目中，有沒有用過或本身實現一些 polyfill 方案（兼容性處理方案）？

• 咱們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡。會執行幾回事件，會先執行冒泡仍是捕獲？

ECMAScript6 相關

• Object.is() 與原來的比較操做符「 ===」、「 ==」的區別？

前端框架相關

• react-router 路由系統的實現原理？

• React中如何解決第三方類庫的問題?

其餘問題

• 原來公司工做流程是怎麼樣的，如何與其餘人協做的？如何誇部門合做的？

• 你遇到過比較難的技術問題是？你是如何解決的？

• 設計模式 知道什麼是singleton, factory, strategy, decrator麼?

• 常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

• 頁面重構怎麼操做？

• 列舉IE與其餘瀏覽器不同的特性？

• 99%的網站都須要被重構是那本書上寫的？

• 什麼叫優雅降級和漸進加強？

• 是否瞭解公鑰加密和私鑰加密。

• WEB應用從服務器主動推送Data到客戶端有那些方式？

更多免費面試資料以及本套題答案掃描下方二維碼或搜索qq羣號642482868加羣領取。