本文由 "本文的原作者markyun" 收集總結了一些前端面試題，初學者閱後也要用心鑽研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。萬不可投機取巧，臨時抱佛腳只求面試僥幸混過關是錯誤的！也是不可能的！不可能的！不可能的！ 前端還是一個年輕的行業，新的行業標準， 框架， 庫都不斷在更 ...
本文由 本文的原作者markyun 收集總結了一些前端面試題，初學者閱後也要用心鑽研其中的原理，重要知識需要系統學習、透徹學習，形成自己的知識鏈。萬不可投機取巧，臨時抱佛腳只求面試僥幸混過關是錯誤的！也是不可能的！不可能的！不可能的！
前端還是一個年輕的行業，新的行業標準， 框架， 庫都不斷在更新和新增，正如赫門在2015深JS大會上的《前端服務化之路》主題演講中說的一句話：“每18至24個月，前端都會難一倍”，這些變化使前端的能力更加豐富、創造的應用也會更加完美。所以關註各種前端技術，跟上快速變化的節奏，也是身為一個前端程式員必備的技能之一。
最近也收到許多微博私信的鼓勵和更正題目信息，後面會經常更新題目和答案到github博客。希望前端er達到既能使用也會表達，對理論知識有自己的理解。可根據下麵的知識點一個一個去進階學習，形成自己的職業技能鏈。
前端開發知識點：
HTML&CSS：
對Web標準的理解、瀏覽器內核差異、相容性、hack、CSS基本功：佈局、盒子模型、選擇器優先順序、
HTML5、CSS3、Flexbox
JavaScript：
數據類型、運算、對象、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、
DOM、BOM、記憶體泄漏、跨域、非同步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、ECMAScript 6、Nodejs
其他：
移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協作、可維護、易用性、SEO、UED、架構、職業生涯、快速學習能力作為一名前端工程師，無論工作年頭長短都應該掌握的知識點：
HTML
Doctype作用？標準模式與相容模式各有什麼區別?
（1）、<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標簽之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以相容模式呈現。 （2）、標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。HTML5 為什麼只需要寫 ？
HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）； 而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
首先：CSS規範規定，每個元素都有display屬性，確定該元素的類型，每個元素都有預設的display值，如div的display預設值為“block”，則為“塊級”元素；span預設display屬性值為“inline”，是“行內”元素。 （1）行內元素有：a b span img input select strong（強調的語氣） （2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）常見的空元素： <br> <hr> <img> <input> <link> <meta> 鮮為人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 不同瀏覽器（版本）、HTML4（5）、CSS2等實際略有差異 參考: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements頁面導入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標簽，除了載入CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於載入CSS; （2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入; （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無相容問題;介紹一下你對瀏覽器內核的理解？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要內核。 JS引擎則：解析和執行javascript來實現網頁的動態效果。 最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML] Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等 Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;] Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]詳細文章：瀏覽器內核的解析和對比
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器相容問題？如何區分 HTML 和
HTML5？* HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。 繪畫 canvas; 用於媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失; sessionStorage 的數據在瀏覽器關閉後自動刪除; 語意化更好的內容元素，比如 article、footer、header、nav、section; 表單控制項，calendar、date、time、email、url、search; 新的技術webworker, websocket, Geolocation; 移除的元素： 純表現的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產生負面影響的元素：frame，frameset，noframes； * 支持HTML5新標簽： IE8/IE7/IE6支持通過document.createElement方法產生的標簽， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽， 瀏覽器支持新標簽後，還需要添加標簽預設的樣式。 當然也可以直接使用成熟的框架、比如html5shim; <!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]--> * 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素簡述一下你對HTML語義化的理解？
用正確的標簽做正確的事情。 html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析; 即使在沒有樣式CSS情況下也以一種文檔格式顯示，並且是容易閱讀的; 搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO; 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
在用戶沒有與網際網路連接時，可以正常訪問站點或應用，在用戶與網際網路連接時，更新用戶機器上的緩存文件。 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。 如何使用： 1、頁面頭部像下麵一樣加入一個manifest的屬性； 2、在cache.manifest文件的編寫離線存儲的資源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 3、在離線狀態時，操作window.applicationCache進行需求實現。詳細的使用請參考：
瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源併進行離線存儲。 離線的情況下，瀏覽器就直接使用離線存儲的資源。詳細請參考：有趣的HTML5：離線存儲
請描述一下 cookies，sessionStorage 和 localStorage 的區別？
cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。 cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和伺服器間來回傳遞。 sessionStorage和localStorage不會自動把數據發給伺服器，僅在本地保存。 存儲大小： cookie數據大小不能超過4k。 sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。 有期時間： localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據； sessionStorage 數據在當前瀏覽器視窗關閉後自動刪除。 cookie 設置的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉iframe有那些缺點？
*iframe會阻塞主頁面的Onload事件； *搜索引擎的檢索程式無法解讀這種頁面，不利於SEO; *iframe和主頁面共用連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的並行載入。 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。Label的作用是什麼？是怎麼用的？
label標簽來定義表單控制間的關係,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控制項上。 <label for="Name">Number:</label> <input type="text" name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label>HTML5的form如何關閉自動完成功能？
給不想要提示的 form 或某個 input 設置為 autocomplete=off。如何實現瀏覽器內多個標簽頁之間的通信? (阿裡)
WebSocket、SharedWorker； 也可以調用localstorge、cookies等本地存儲方式； localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件， 我們通過監聽事件，控制它的值來進行頁面信息通信； 註意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；webSocket如何相容低瀏覽器？(阿裡)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR頁面可見性（Page Visibility API） 可以有哪些用途？
通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等; 在頁面被切換到其他後臺進程的時候，自動暫停音樂或視頻的播放；如何在頁面上實現一個圓形的可點擊區域？
1、map+area或者svg 2、border-radius 3、純js實現 需要求一個點在不在圓上簡單演算法、獲取滑鼠坐標等等實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。
<div style="height:1px;overflow:hidden;background:red"></div>網頁驗證碼是幹嘛的，是為瞭解決什麼安全問題。
區分用戶是電腦還是人的公共全自動程式。可以防止惡意破解密碼、刷票、論壇灌水； 有效防止黑客對某一個特定註冊用戶用特定程式暴力破解方式進行不斷的登陸嘗試。title與h1的區別、b與strong的區別、i與em的區別？
title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響； strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網路時：<strong>會重讀，而<B>是展示強調內容。 i內容展示為斜體，em表示強調的文本； Physical Style Elements -- 自然樣式標簽 b, i, u, s, pre Semantic Style Elements -- 語義樣式標簽 strong, em, ins, del, code 應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。
本文轉載自 markyun 的 前端開發麵試題 一文
文章版權歸原作者所有，如有涉及侵權問題，請與我聯繫處理。
