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

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

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

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

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

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

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

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

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

9、dering Engine) 和 JS 引擎。渲染引擎：負責取得網(wǎng)頁的內(nèi)容 (HTML、XML、圖像等等)、 整理訊息(例如加入 CSS等)，以及計算網(wǎng)頁的顯示方式， 然后會輸由至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng) 頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng) 頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi) 容的應(yīng)用程序都需要內(nèi)核。JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(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的分支）詳細文章：瀏覽器內(nèi)核的解析和對比 html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5 ?* HTML5現(xiàn)在已經(jīng)不是 SGML的子集，主要是關(guān)于圖像， 位置，存儲，多任務(wù)等功能的增加。繪畫 canvas

11、;用于媒介回放的 video和audio元素；本地離線存儲localStorage長期存儲數(shù)據(jù)，瀏覽器 關(guān)閉后數(shù)據(jù)不丟失；sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除；語意化更好的內(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;對可用性產(chǎn)生負面影響的元素：fram

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

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

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

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

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