前端開發(fā)面試題菜鳥教程

1、前端開發(fā)面試題菜鳥教程本文收集總結(jié)了一些前端面試題，初學(xué)者閱后也要用心 鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成 自己的知識(shí)鏈。萬不可投機(jī)取巧，臨時(shí)抱佛腳只求面試僥幸 混過關(guān)是錯(cuò)誤的！也是不可能的！不可能的！不可能的！前端還是一個(gè)年輕的行業(yè)，新的行業(yè)標(biāo)準(zhǔn)，框架， 庫都不斷在更新和新增，正如赫門在2015深JS大會(huì)上的前端 服務(wù)化之路主題演講中說的一句話：每18至24個(gè)月，前端都會(huì)難一倍，這些變化使前端的能力更加豐富、創(chuàng)造的 應(yīng)用也會(huì)更加完美。所以關(guān)注各種前端技術(shù)，跟上快速變化 的節(jié)奏，也是身為一個(gè)前端程序員必備的技能之一。最近也收到許多微博私信的豉勵(lì)和更正題目信息，后面會(huì)經(jīng)常更新題

2、目和答案到 g讓hub博客。希望前端er達(dá)到既能 使用也會(huì)表達(dá)，對(duì)理論知識(shí)有自己的理解?？筛鶕?jù)下面的知 識(shí)點(diǎn)一個(gè)一個(gè)去進(jìn)階學(xué)習(xí)，形成自己的職業(yè)技能鏈。面試有幾點(diǎn)需注意：（來源寒冬winter老師， github:wintercn）面試題目：根據(jù)你的等級(jí)和職位的變化，入門級(jí)到專家級(jí)，廣度和深度都會(huì)有所增加。題目類型：理論知識(shí)、算法、項(xiàng)目細(xì)節(jié)、技術(shù)視野、開放性題、 工作案例。 細(xì)節(jié)追問：可以確保問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的區(qū)分度和深度，知道你的實(shí)際能力。因?yàn)檫@種知識(shí)關(guān)聯(lián)是長(zhǎng)時(shí)期的學(xué)習(xí)，臨時(shí)抱佛腳絕對(duì)是記不住的?；卮饐栴}再棒，面試官（可能是你面試職位的直接領(lǐng)導(dǎo)），會(huì)考慮

3、我要不要這個(gè)人做我的同 事？所以態(tài)度很重要、除了能做事，還要會(huì)做人。 （感覺更 像是相親（ ? ?）資深的前端開發(fā)能把 absolute和relative弄混，這樣的人不要也罷，因?yàn)閳F(tuán)隊(duì)需 要的是：你這個(gè)人具有可以依靠的才能（靠譜）。 前端開發(fā)知識(shí)點(diǎn)：HTML&CSS :對(duì)Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、 CSS基本功：布局、盒子模型、選擇器優(yōu)先級(jí)、HTML5、CSS3、FlexboxJavaScript :數(shù)據(jù)類型、運(yùn)算、對(duì)象、 Function、繼承、閉包、作用 域、原型鏈、事件、 RegExp、JSON、Ajax、DOM、BOM、內(nèi)存泄漏、跨域、異步裝載、模板引擎、

4、前端 MVC、路由、模塊化、Canvas、ECMAScript 6、Nodejs其他：移動(dòng)端、響應(yīng)式、自動(dòng)化構(gòu)建、HTTP、離線存儲(chǔ)、WEB 安全、優(yōu)化、重構(gòu)、團(tuán)隊(duì)協(xié)作、可維護(hù)、易用性、SEO、UED、 架構(gòu)、職業(yè)生涯、快速學(xué)習(xí)能力 作為一名前端工程師，無論工作年頭長(zhǎng)短都應(yīng)該掌握的知識(shí)點(diǎn)：此條由王子墨發(fā)表在 攻城師的實(shí)驗(yàn)室1、DOM結(jié)構(gòu) 一一 兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。2、DOM操作一一如何添加、移除、移動(dòng)、復(fù)制、創(chuàng) 建和查找節(jié)點(diǎn)等。3、事件 一一 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事 件模型之間存在的差別。4、XMLHttpRequest這是什么、怎樣完整地執(zhí)行

5、一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。5、嚴(yán)格模式與混雜模式一一如何觸發(fā)這兩種模式，區(qū)分它們有何意義。6、盒模型 一一 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型怎么用CSS控制它們、7、塊級(jí)元素與行內(nèi)元素以及如何合理的使用它們8、浮動(dòng)元素 一一 怎么使用它們、它們有什么問題以 及怎么解決這些問題。9、HTML與XHTML 二者有什么區(qū)別，你覺得應(yīng) 該使用哪一個(gè)并說由理由。10、JSON 作用、用途、設(shè)計(jì)結(jié)構(gòu)。備注： 根據(jù)自己需要選擇性閱讀，面試題是對(duì)理論知識(shí)的總結(jié)，讓自 己學(xué)會(huì)應(yīng)該如何表達(dá)。資料答案不夠正確和全面，歡迎歡迎Star和提交issues。格式不斷修改更新中。更新記

6、錄：2016年3月25日：新增ECMAScript6 相關(guān)問題 更新時(shí)間： 2016-3-25 HTML Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各 有什么區(qū)別？（1）、聲明位于位于HTML 文檔中的第一行，處于標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)(2)、標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持 的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁面以寬松的向后兼容的 方式顯示，模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。HTML5 為什么只需要寫 ?HTML5不基于SGML ,因此不需要對(duì) DTD進(jìn)行引用，但 是需要doctype來規(guī)

7、范瀏覽器的行為(讓瀏覽器按照它們應(yīng) 該的方式來運(yùn)行)；而HTML4.01基于SGML,所以需要對(duì) DTD進(jìn)行引用，才 能告知瀏覽器文檔所使用的文檔類型。行內(nèi)元素有哪些？塊級(jí)元素有哪些？空(void)元素有那些？首先：CSS規(guī)范規(guī)定，每個(gè)元素都有 display屬性，確定該元素的類型，每 個(gè)元素都有默認(rèn)的 display值，如div的display默認(rèn)值為“block則為“塊級(jí)”元素span默認(rèn)display屬性值為inline 是“行內(nèi)”元素。(1) 行內(nèi)元素有： a b span img input select strong (強(qiáng)調(diào) 的語氣)(2)塊級(jí)元素有：div ul ol li dl

8、 dt dd h1 h2 h3 h4(3)常見的空元素： 鮮為人知的是： 頁面導(dǎo)入樣式時(shí)，使用 link和import有什么區(qū)別？ (1) link屬于XHTML標(biāo)簽，除了 加載CSS外，還能用于定義RSS,定義rel連接屬性等作用； 而import是CSS提供的，只能用于加載CSS;(2)頁面被加載的時(shí)，link會(huì)同時(shí)被加載，而import引用 的CSS會(huì)等到頁面被加載完再加載；(3) import是CSS2.1 提由的，只在IE5以上才能被識(shí)別， 而link是XHTML標(biāo)簽，無兼容問題；介紹一下你對(duì)瀏覽器 內(nèi)核的理解？ 主要分成兩部分：渲染引擎 (layout engineer 或 Ren

9、dering Engine) 和 JS 引擎。渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容 (HTML、XML、圖像等等)、 整理訊息(例如加入 CSS等)，以及計(jì)算網(wǎng)頁的顯示方式， 然后會(huì)輸由至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng) 頁的語法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng) 頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi) 容的應(yīng)用程序都需要內(nèi)核。JS引擎則：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動(dòng)態(tài)效果。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。常見的瀏覽器內(nèi)核有哪些？Trident 內(nèi)核：IE,MaxThon,TT,TheWorl

10、d,360,搜狗瀏覽器等。又稱MSHTMLGecko內(nèi)核：Netscape6 及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey 等Presto內(nèi)核：Opera7及以上。Opera內(nèi)核原為：Presto ,現(xiàn)為：Blink;Webkit 內(nèi)核:Safari,Chrome 等。 Chrome 的:Blink（WebKit的分支）詳細(xì)文章：瀏覽器內(nèi)核的解析和對(duì)比 html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5 ?* HTML5現(xiàn)在已經(jīng)不是 SGML的子集，主要是關(guān)于圖像， 位置，存儲(chǔ)，多任務(wù)等功能的增加。繪畫 canvas

11、;用于媒介回放的 video和audio元素；本地離線存儲(chǔ)localStorage長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器 關(guān)閉后數(shù)據(jù)不丟失；sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除；語意化更好的內(nèi)容元素，比如 article footer、header nav、section;表單控件，calendar、date、time、email、url、search;新的技術(shù) webworker, websocket, Geolocation;移除的元素：純表現(xiàn)的元素：basefont , big , center , font, s , strike , tt, u;對(duì)可用性產(chǎn)生負(fù)面影響的元素：fram

12、e , frameset ,noframes ;*支持HTML5新標(biāo)簽：IE8/IE7/IE6 支持通過 document.createElement 方法 產(chǎn)生的標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽,瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。當(dāng)然也可以直接使用成熟的框架、比如 html5shim;src= HYPERLINK /svn/trunk/html5.js /svn/trunk/html5.js *如何區(qū)分HTML5 : DOCTYPE 聲明 新增的結(jié)構(gòu)元素 功 能元素 簡(jiǎn)述一下你對(duì) HTML語義化的理解？ 用正確的標(biāo) 簽做正確的事情。html語義化讓頁面的內(nèi)容

13、結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽 器、搜索引擎解析；即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且 是容易閱讀的；搜索引擎的爬蟲也依賴于 HTML標(biāo)記來確定上下文和各個(gè) 關(guān)鍵字的權(quán)重，利于 SEO;使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。HTML5的離線儲(chǔ)存怎么使用，工作原理能不能解釋 一下？ 在用戶沒有與因特網(wǎng)連接時(shí)，可以正常訪問站點(diǎn)或 應(yīng)用，在用戶與因特網(wǎng)連接時(shí)， 更新用戶機(jī)器上的緩存文件。原理：HTML5的離線存儲(chǔ)是基于一個(gè)新建的 .appcache文件 的緩存機(jī)制（不是存儲(chǔ)技術(shù)），通過這個(gè)文件上的解析清單離 線存儲(chǔ)資源，這些資源就會(huì)像cookie 一樣被存儲(chǔ)了下來

14、。之 后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會(huì)通過被離線存儲(chǔ)的 數(shù)據(jù)進(jìn)行頁面展示。如何使用：1、頁面頭部像下面一樣加入一個(gè)manifest的屬性;2、在cache.manifest文件的編寫離線存儲(chǔ)的資源；CACHE MANIFEST #v0.11CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html3、在離線狀態(tài)時(shí)，操作window.applicationCache 進(jìn)行需求 實(shí)現(xiàn)。詳細(xì)的使用請(qǐng)參考：有趣的 HTML5 :離線存儲(chǔ) 瀏覽器是怎么對(duì) HTML5的離線儲(chǔ)存資源進(jìn)行管理和加載

15、的呢？ 在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪問app ,那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離 線存儲(chǔ)。如果已經(jīng)訪問過 app并且資源已經(jīng)離線存儲(chǔ)了，那 么瀏覽器就會(huì)使用離線的資源加載頁面，然后瀏覽器會(huì)對(duì)比 新的manifest文件與舊的manifest文件，如果文件沒有發(fā) 生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線存儲(chǔ)。離線的情況下，瀏覽器就直接使用離線存儲(chǔ)的資源。詳細(xì)的使用請(qǐng)參考：有趣的 HTML5 :離線存儲(chǔ) 請(qǐng)描述一下cookies , sessionS

16、torage 和 localStorage 的區(qū)另U?cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端（Client Side ）上的數(shù)據(jù)（通常經(jīng)過加密）。cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要）， 記會(huì)在瀏覽器和服務(wù)器間來回傳遞。sessionStorage 和localStorage 不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器, 僅在本地保存。存儲(chǔ)大?。篶ookie數(shù)據(jù)大小不能超過 4k。sessionStorage 和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到 5M或更大。有期時(shí)間：localStorage存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；sessionStorage數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪cookie設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉iframe有那些缺點(diǎn)？*iframe會(huì)阻塞主頁面