前端開發(fā)面試題

　　前言

　　本文由我收集總結(jié)了一些優(yōu)質(zhì)的前端面試題，初學者閱后也要用心鉆研其中的原理，重要知識需要系統(tǒng)學習、透徹學習，形成自己的知識鏈。萬不可投機取巧，只求面試過關是錯誤的!

　　前端還是一個年輕的行業(yè)，新的行業(yè)標準， 框架， 庫都不斷在更新和新增，正如赫門在2015深JS大會上的《前端服務化之路》主題演講中說的一句話：“每18至24個月，前端都會難一倍”，這些變化使前端的能力更加豐富、創(chuàng)造的應用也會更加完美。所以關注各種前端技術, 跟上快速變化的節(jié)奏, 也是身為一個前端程序員必備的技能之一。

　　最近也收到許多微博私信的鼓勵和更正題目信息，后面會經(jīng)常更新題目和答案到github博客，但其他舊版本的分支和其他網(wǎng)站出現(xiàn)的拷貝版本上面的錯誤回答我也管不了嘞。希望更多的前端開發(fā)可以達到既能使用也會表達，對理論知識有自己的理解，也可根據(jù)下面的知識點一個一個去進階學習,形成自己的職業(yè)技能鏈。

　　面試有幾點需注意：

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

　　2、題目類型：理論知識，算法，項目細節(jié)、技術視野、開放性題，工作案例。

　　3、細節(jié)追問：可以確保問到你開始不懂或面試官開始不懂為止，這樣可以大大延展題目的區(qū)分度和深度，知道你的實際能力。因為這種知識關聯(lián)是長時期的學習，臨時抱佛腳絕對是記不住的。

　　4、回答問題再棒，面試官(可能是你面試職位的直接領導)，會考慮我要不要這個人做我的同事?所以態(tài)度很重要、除了能做事，還要會做人。(感覺更像是相親( ))

　　5、資深的前端開發(fā)能把absolute和relative弄混，這樣的人不要也罷，因為團隊需要的是：你這個人具有可以依靠的才能(靠譜)。

　　前端開發(fā)面試知識點大綱：

　　作為一名前端工程師，無論工作年頭長短都應該必須掌握的知識點：

　　HTML

　　Doctype作用?標準模式與兼容模式各有什么區(qū)別?

　　HTML5 為什么只需要寫 ?

　　行內(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 dt dd h1 h2 h3 h4…p

　　(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或Rendering Engine)和JS引擎。

　　渲染引擎：負責取得網(wǎng)頁的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡內(nèi)容的應用程序都需要內(nèi)核。

　　JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。

　　最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來JS引擎越來越獨立，內(nèi)核就傾向于只指渲染引擎。

　　常見的瀏覽器內(nèi)核有哪些?

　　Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

　　Gecko內(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 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

　　繪畫 canvas;

　　用于媒介回放的 video 和 audio 元素;

　　本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失;

　　sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除;

　　語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;

　　表單控件，calendar、date、time、email、url、search;

　　新的技術webworker, websockt, Geolocation;

　　移除的元素：

　　純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;

　　對可用性產(chǎn)生負面影響的元素：frame，frameset，noframes;

　　* 支持HTML5新標簽：

　　IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，

　　可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

　　瀏覽器支持新標簽后，還需要添加標簽默認的樣式。

　　當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

　　* 如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

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

　　用正確的標簽做正確的事情。

　　html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;

　　及時在沒有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的;

　　搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權(quán)重，利于SEO;

　　使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解。

　　HTML5的離線儲存怎么使用，工作原理能不能解釋一下?

　　在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應用，在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件。

　　原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網(wǎng)絡在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。

　　如何使用：

　　1、頁面頭部像下面一樣加入一個manifest的屬性;

　　2、在cache.manifest文件的編寫離線存儲的資源;

　　CACHE MANIFEST

　　#v0.11

　　CACHE:

　　js/app.js

　　css/style.css

　　NETWORK:

　　resourse/logo.png

　　FALLBACK:

　　/ /offline.html

　　3、在離線狀態(tài)時，操作window.applicationCache進行需求實現(xiàn)。

　　詳細的使用請參考：有趣的HTML5：離線存儲

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

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

　　離線的情況下，瀏覽器就直接使用離線存儲的資源。

　　詳細的使用請參考：有趣的HTML5：離線存儲

　　請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?

　　localStorage 長期存儲數(shù)據(jù)，瀏覽器關閉后數(shù)據(jù)不丟失;

　　sessionStorage 數(shù)據(jù)在瀏覽器關閉后自動刪除。

　　iframe有那些缺點?

　　*iframe會阻塞主頁面的Onload事件;

　　*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。

　　使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript

　　動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。

　　Label的作用是什么?是怎么用的?

　　label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標簽相關的表單控件上。

　　Number:

　　Date:

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

　　給不想要提示的 form 或下某個input 設置為autocomplete=off。

　　請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?

　　cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會

　　sessionStorage和localStorage的存儲空間更大;

　　sessionStorage和localStorage有更多豐富易用的接口;

　　sessionStorage和localStorage各自獨立的存儲空間;

　　如何實現(xiàn)瀏覽器內(nèi)多個標簽頁之間的通信? (阿里)

　　調(diào)用localstorge、cookies等本地存儲方式

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

　　Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 、 基于長輪詢的 XHR

　　CSS

　　介紹一下CSS的盒子模型?

　　(1)有兩種， IE 盒子模型、標準 W3C 盒子模型;IE的content部分包含了 border 和 pading;

　　(2)盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).

　　CSS 選擇符有哪些?哪些屬性可以繼承?優(yōu)先級算法如何計算? CSS3新增偽類有那些?

　　* 1.id選擇器( # myid)

　　2.類選擇器(.myclassname)

　　3.標簽選擇器(div, h1, p)

　　4.相鄰選擇器(h1 + p)

　　5.子選擇器(ul > li)

　　6.后代選擇器(li a)

　　7.通配符選擇器( * )

　　8.屬性選擇器(a[rel = "external"])

　　9.偽類選擇器(a: hover, li: nth - child)

　　* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;

　　* 不可繼承的樣式：border padding margin width height ;

　　* 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準;

　　* 載入樣式以最后載入的定位為準;

　　優(yōu)先級為:

　　!important > id > class > tag

　　important 比 內(nèi)聯(lián)優(yōu)先級高

　　CSS3新增偽類舉例：

　　p:first-of-type 選擇屬于其父元素的首個

　　元素的每個

　　元素。

　　p:last-of-type 選擇屬于其父元素的最后

　　元素的每個

　　元素。

　　p:only-of-type 選擇屬于其父元素唯一的

　　元素的每個

　　元素。

　　p:only-child 選擇屬于其父元素的唯一子元素的每個

　　元素。

　　p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

　　元素。

　　:enabled :disabled 控制表單控件的禁用狀態(tài)。

　　:checked 單選框或復選框被選中。

　　如何居中div?如何居中一個浮動元素?

　　給div設置一個寬度，然后添加margin:0 auto屬性

　　div{

　　width:200px;

　　margin:0 auto;

　　}

　　居中一個浮動元素

　　確定容器的寬高 寬500 高 300 的層

　　設置層的外邊距

　　.div {

　　Width:500px ; height:300px;//高度可以不設

　　Margin: -150px 0 0 -250px;

　　position:relative;相對定位

　　background-color:pink;//方便看效果

　　left:50%;

　　top:50%;

　　}

　　列出display的值，說明他們的作用。position的值， relative和absolute定位原點是?

　　1、block 象塊類型元素一樣顯示。

　　none 缺省值。象行內(nèi)元素類型一樣顯示。

　　inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。list-item 象塊類型元素一樣顯示，并添加樣式列表標記。

　　2、*absolute

　　生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

　　*fixed (老IE不支持)

　　生成絕對定位的元素，相對于瀏覽器窗口進行定位。

【前端開發(fā)面試題】相關文章：

前端工程師面試題10-20

Web前端面試題目及答案06-30

iOS開發(fā)、設計面試題08-16

iPhone軟件開發(fā)面試題10-23

Microsoft面試題09-04

iOS面試題07-10

公司面試題09-12

hibernate面試題10-18

英語面試題精選06-13

小升初面試題06-10