- 相關(guān)推薦
前端開(kāi)發(fā)面試題
前言
本文由我收集總結(jié)了一些優(yōu)質(zhì)的前端面試題，初學(xué)者閱后也要用心鉆研其中的原理，重要知識(shí)需要系統(tǒng)學(xué)習(xí)、透徹學(xué)習(xí)，形成自己的知識(shí)鏈。萬(wàn)不可投機(jī)取巧，只求面試過(guò)關(guān)是錯(cuò)誤的!
前端還是一個(gè)年輕的行業(yè)，新的行業(yè)標(biāo)準(zhǔn)， 框架， 庫(kù)都不斷在更新和新增，正如赫門(mén)在2015深JS大會(huì)上的《前端服務(wù)化之路》主題演講中說(shuō)的一句話(huà)：“每18至24個(gè)月，前端都會(huì)難一倍”，這些變化使前端的能力更加豐富、創(chuàng)造的應(yīng)用也會(huì)更加完美。所以關(guān)注各種前端技術(shù), 跟上快速變化的節(jié)奏, 也是身為一個(gè)前端程序員必備的技能之一。
最近也收到許多微博私信的鼓勵(lì)和更正題目信息，后面會(huì)經(jīng)常更新題目和答案到github博客，但其他舊版本的分支和其他網(wǎng)站出現(xiàn)的拷貝版本上面的錯(cuò)誤回答我也管不了嘞。希望更多的前端開(kāi)發(fā)可以達(dá)到既能使用也會(huì)表達(dá)，對(duì)理論知識(shí)有自己的理解，也可根據(jù)下面的知識(shí)點(diǎn)一個(gè)一個(gè)去進(jìn)階學(xué)習(xí),形成自己的職業(yè)技能鏈。
面試有幾點(diǎn)需注意：
1、面試題目：根據(jù)你的等級(jí)和職位的變化，入門(mén)級(jí)到專(zhuān)家級(jí)，廣度和深度都會(huì)有所增加。
2、題目類(lèi)型：理論知識(shí)，算法，項(xiàng)目細(xì)節(jié)、技術(shù)視野、開(kāi)放性題，工作案例。
3、細(xì)節(jié)追問(wèn)：可以確保問(wèn)到你開(kāi)始不懂或面試官開(kāi)始不懂為止，這樣可以大大延展題目的區(qū)分度和深度，知道你的實(shí)際能力。因?yàn)檫@種知識(shí)關(guān)聯(lián)是長(zhǎng)時(shí)期的學(xué)習(xí)，臨時(shí)抱佛腳絕對(duì)是記不住的。
4、回答問(wèn)題再棒，面試官(可能是你面試職位的直接領(lǐng)導(dǎo))，會(huì)考慮我要不要這個(gè)人做我的同事?所以態(tài)度很重要、除了能做事，還要會(huì)做人。(感覺(jué)更像是相親( ))
5、資深的前端開(kāi)發(fā)能把a(bǔ)bsolute和relative弄混，這樣的人不要也罷，因?yàn)閳F(tuán)隊(duì)需要的是：你這個(gè)人具有可以依靠的才能(靠譜)。
前端開(kāi)發(fā)面試知識(shí)點(diǎn)大綱：
作為一名前端工程師，無(wú)論工作年頭長(zhǎng)短都應(yīng)該必須掌握的知識(shí)點(diǎn)：
HTML
Doctype作用?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
HTML5 為什么只需要寫(xiě) ?
行內(nèi)元素有哪些?塊級(jí)元素有哪些? 空(void)元素有那些?
首先：CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類(lèi)型，每個(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)的語(yǔ)氣)
(2)塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
(3)常見(jiàn)的空元素：
鮮為人知的是：
頁(yè)面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別?
(1)link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用;而@import是CSS提供的，只能用于加載CSS;
(2)頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載;
(3)import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題;
介紹一下你對(duì)瀏覽器內(nèi)核的理解?
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計(jì)算網(wǎng)頁(yè)的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(wǎng)頁(yè)的語(yǔ)法解釋會(huì)有不同，所以渲染的效果也不相同。所有網(wǎng)頁(yè)瀏覽器、電子郵件客戶(hù)端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
JS引擎則：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開(kāi)始渲染引擎和JS引擎并沒(méi)有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
常見(jiàn)的瀏覽器內(nèi)核有哪些?
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱(chēng)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的分支)]
詳細(xì)文章：瀏覽器內(nèi)核的解析和對(duì)比 - 依水間
html5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題?如何區(qū)分 HTML 和 HTML5?
* HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
繪畫(huà) canvas;
用于媒介回放的 video 和 audio 元素;
本地離線(xiàn)存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術(shù)webworker, websockt, Geolocation;
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes;
* 支持HTML5新標(biāo)簽：
IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，
瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式。
當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
* 如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解?
用正確的標(biāo)簽做正確的事情。
html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;
及時(shí)在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲(chóng)也依賴(lài)于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于SEO;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
HTML5的離線(xiàn)儲(chǔ)存怎么使用，工作原理能不能解釋一下?
在用戶(hù)沒(méi)有與因特網(wǎng)連接時(shí)，可以正常訪(fǎng)問(wèn)站點(diǎn)或應(yīng)用，在用戶(hù)與因特網(wǎng)連接時(shí)，更新用戶(hù)機(jī)器上的緩存文件。
原理：HTML5的離線(xiàn)存儲(chǔ)是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲(chǔ)技術(shù))，通過(guò)這個(gè)文件上的解析清單離線(xiàn)存儲(chǔ)資源，這些資源就會(huì)像cookie一樣被存儲(chǔ)了下來(lái)。之后當(dāng)網(wǎng)絡(luò)在處于離線(xiàn)狀態(tài)下時(shí)，瀏覽器會(huì)通過(guò)被離線(xiàn)存儲(chǔ)的數(shù)據(jù)進(jìn)行頁(yè)面展示。
如何使用：
1、頁(yè)面頭部像下面一樣加入一個(gè)manifest的屬性;
2、在cache.manifest文件的編寫(xiě)離線(xiàn)存儲(chǔ)的資源;
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線(xiàn)狀態(tài)時(shí)，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。
詳細(xì)的使用請(qǐng)參考：有趣的HTML5：離線(xiàn)存儲(chǔ)
瀏覽器是怎么對(duì)HTML5的離線(xiàn)儲(chǔ)存資源進(jìn)行管理和加載的呢?
在線(xiàn)的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會(huì)請(qǐng)求manifest文件，如果是第一次訪(fǎng)問(wèn)app，那么瀏覽器就會(huì)根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線(xiàn)存儲(chǔ)。如果已經(jīng)訪(fǎng)問(wèn)過(guò)app并且資源已經(jīng)離線(xiàn)存儲(chǔ)了，那么瀏覽器就會(huì)使用離線(xiàn)的資源加載頁(yè)面，然后瀏覽器會(huì)對(duì)比新的manifest文件與舊的manifest文件，如果文件沒(méi)有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會(huì)重新下載文件中的資源并進(jìn)行離線(xiàn)存儲(chǔ)。
離線(xiàn)的情況下，瀏覽器就直接使用離線(xiàn)存儲(chǔ)的資源。
詳細(xì)的使用請(qǐng)參考：有趣的HTML5：離線(xiàn)存儲(chǔ)
請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?
localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
iframe有那些缺點(diǎn)?
*iframe會(huì)阻塞主頁(yè)面的Onload事件;
*iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript
動(dòng)態(tài)給iframe添加src屬性值，這樣可以可以繞開(kāi)以上兩個(gè)問(wèn)題。
Label的作用是什么?是怎么用的?
label標(biāo)簽來(lái)定義表單控制間的關(guān)系,當(dāng)用戶(hù)選擇該標(biāo)簽時(shí)，瀏覽器會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
Number:
Date:
HTML5的form如何關(guān)閉自動(dòng)完成功能?
給不想要提示的 form 或下某個(gè)input 設(shè)置為autocomplete=off。
請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別?
cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage和localStorage不會(huì)
sessionStorage和localStorage的存儲(chǔ)空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間;
如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信? (阿里)
調(diào)用localstorge、cookies等本地存儲(chǔ)方式
webSocket如何兼容低瀏覽器?(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 編碼發(fā)送 XHR 、 基于長(zhǎng)輪詢(xún)的 XHR
CSS
介紹一下CSS的盒子模型?
(1)有兩種， IE 盒子模型、標(biāo)準(zhǔn) W3C 盒子模型;IE的content部分包含了 border 和 pading;
(2)盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border).
CSS 選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算? CSS3新增偽類(lèi)有那些?
* 1.id選擇器( # myid)
2.類(lèi)選擇器(.myclassname)
3.標(biāo)簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器( * )
8.屬性選擇器(a[rel = "external"])
9.偽類(lèi)選擇器(a: hover, li: nth - child)
* 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
* 不可繼承的樣式：border padding margin width height ;
* 優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
* 載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級(jí)為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級(jí)高
CSS3新增偽類(lèi)舉例：
p:first-of-type 選擇屬于其父元素的首個(gè)
元素的每個(gè)
元素。
p:last-of-type 選擇屬于其父元素的最后
元素的每個(gè)
元素。
p:only-of-type 選擇屬于其父元素唯一的
元素的每個(gè)
元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)
元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)
元素。
:enabled :disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
如何居中div?如何居中一個(gè)浮動(dòng)元素?
給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
居中一個(gè)浮動(dòng)元素
確定容器的寬高 寬500 高 300 的層
設(shè)置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設(shè)
Margin: -150px 0 0 -250px;
position:relative;相對(duì)定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
列出display的值，說(shuō)明他們的作用。position的值， relative和absolute定位原點(diǎn)是?
1、block 象塊類(lèi)型元素一樣顯示。
none 缺省值。象行內(nèi)元素類(lèi)型一樣顯示。
inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類(lèi)型元素一樣顯示。list-item 象塊類(lèi)型元素一樣顯示，并添加樣式列表標(biāo)記。
2、*absolute
生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
*fixed (老IE不支持)
生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。
【前端開(kāi)發(fā)面試題】相關(guān)文章：
前端工程師面試題10-20
Web前端面試題目及答案06-30
iOS開(kāi)發(fā)、設(shè)計(jì)面試題08-16
Microsoft面試題09-04
iOS面試題07-10
公司面試題09-12
hibernate面試題10-18
英語(yǔ)面試題精選06-13
小升初面試題06-10