- 前端開(kāi)發(fā)面試題及答案 推薦度：
- 相關(guān)推薦
前端開(kāi)發(fā)的面試題
當(dāng)我們?cè)谝粋�(gè)新環(huán)境中，時(shí)常要進(jìn)行自我介紹，自我介紹是讓陌生人彼此認(rèn)識(shí)的好方法。那么自我介紹有什么格式呢？以下是小編幫大家整理的前端開(kāi)發(fā)的面試題，希望對(duì)大家有所幫助。
web前端面試題
以下是收集一些面試中經(jīng)常會(huì)遇到的經(jīng)典面試題以及自己面試過(guò)程中無(wú)法解決的問(wèn)題，通過(guò)對(duì)知識(shí)的整理以及經(jīng)驗(yàn)的總結(jié)，重新鞏固自身的前端基礎(chǔ)知識(shí)。
1.對(duì)WEB標(biāo)準(zhǔn)以及W3C的理解與認(rèn)識(shí)
標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、提高搜索機(jī)器人搜索幾率、使用外 鏈css和js腳本、結(jié)構(gòu)行為表現(xiàn)的分離、文件下載與頁(yè)面速度更快、內(nèi)容能被更多的用戶(hù)所訪問(wèn)、內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)、更少的代碼和組件，容易維 護(hù)、改版方便，不需要變動(dòng)頁(yè)面內(nèi)容、提供打印版本而不需要復(fù)制內(nèi)容、提高網(wǎng)站易用性;
2.xhtml和html有什么區(qū)別
HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫(xiě)字母。
XHTML 文檔必須擁有根元素。
3.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式，區(qū)分它們有何意義?
用于聲明文檔使用那種規(guī)范(html/Xhtml)一般為 嚴(yán)格 過(guò)度 基于框架的html文檔
加入XMl聲明可觸發(fā)，解析方式更改為IE5.5 擁有IE5.5的bug
4.行內(nèi)元素有哪些?塊級(jí)元素有哪些?CSS的盒模型?
塊級(jí)元素：div p h1 h2 h3 h4 form ul
行內(nèi)元素: a b br i span input select
Css盒模型:內(nèi)容，border ,margin，padding
5.CSS引入的方式有哪些? link和@import的區(qū)別是?
內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 ：同時(shí)加載
前者無(wú)兼容性，后者CSS2.1以下瀏覽器不支持
Link 支持使用javascript改變樣式，后者不可
6.CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?內(nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高?
標(biāo)簽選擇符 類(lèi)選擇符 id選擇符
繼承不如指定 Id>class>標(biāo)簽選擇
后者優(yōu)先級(jí)高
7.前端頁(yè)面有哪三層構(gòu)成，分別是什么?作用是什么?
結(jié)構(gòu)層 Html 表示層 CSS 行為層 js
8.css的基本語(yǔ)句構(gòu)成是?
選擇器{屬性1:值1;屬性2:值2;……}
9.你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么?
Ie(Ie內(nèi)核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10.寫(xiě)出幾種IE6 BUG的解決方法
1.雙邊距BUG float引起的 使用display
2.3像素問(wèn)題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點(diǎn)擊后失效 使用正確的書(shū)寫(xiě)順序 link visited hover active
4.Ie z-index問(wèn)題 給父級(jí)添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 !Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什么沒(méi)有辦法定義1px左右的寬度容器(IE6默認(rèn)的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)
11.標(biāo)簽上title與alt屬性的區(qū)別是什么?
Alt 當(dāng)圖片不顯示是 用文字代表。
Title 為該屬性提供信息
12.描述css reset的作用和用途。
Reset重置瀏覽器的css默認(rèn)屬性 瀏覽器的品種不同，樣式不同，然后重置，讓他們統(tǒng)一
13.解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對(duì)圖片的請(qǐng)求數(shù)量
14.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
15.你如何對(duì)網(wǎng)站的文件和資源進(jìn)行優(yōu)化?期待的解決方案包括：
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
16.什么是語(yǔ)義化的HTML?
直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處
17.清除浮動(dòng)的幾種方式，各自的優(yōu)缺點(diǎn)
1.使用空標(biāo)簽清除浮動(dòng) clear:both(理論上能清楚任何標(biāo)簽，增加無(wú)意義的標(biāo)簽)
2.使用overflow:auto(空標(biāo)簽元素清除浮動(dòng)而不得不增加無(wú)意代碼的弊端,,使用zoom:1用于兼容IE)
3.是用afert偽元素清除浮動(dòng)(用于非IE瀏覽器)
Javascript
1.javascript的typeof返回哪些數(shù)據(jù)類(lèi)型
Object number function boolean underfind
2.例舉3種強(qiáng)制類(lèi)型轉(zhuǎn)換和2種隱式類(lèi)型轉(zhuǎn)換?
強(qiáng)制(parseInt,parseFloat,number)
隱式(== – ===)
3.split() join() 的區(qū)別
前者是切割成數(shù)組的形式，后者是將數(shù)組轉(zhuǎn)換成字符串
4.數(shù)組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
5.事件綁定和普通事件有什么區(qū)別
6.IE和DOM事件流的區(qū)別
1.執(zhí)行順序不一樣、
2.參數(shù)不一樣
3.事件加不加on
4.this指向問(wèn)題
7.IE和標(biāo)準(zhǔn)下有哪些兼容性的寫(xiě)法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax請(qǐng)求的時(shí)候get 和post方式的區(qū)別
一個(gè)在url后面 一個(gè)放在虛擬載體里面
有大小限制
安全問(wèn)題
應(yīng)用不同 一個(gè)是論壇等只需要請(qǐng)求的，一個(gè)是類(lèi)似修改密碼的
9.call和apply的區(qū)別
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax請(qǐng)求時(shí)，如何解釋json數(shù)據(jù)
使用eval parse 鑒于安全性考慮 使用parse更靠譜
11.b繼承a的方法
12.寫(xiě)一個(gè)獲取非行間樣式的函數(shù)
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
13.事件委托是什么
讓利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行!
14.閉包是什么，有什么特性，對(duì)頁(yè)面有什么影響
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
15.如何阻止事件冒泡和默認(rèn)事件
canceBubble return false
16.添加 刪除 替換 插入到某個(gè)接點(diǎn)的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17.解釋jsonp的原理，以及為什么不是真正的ajax
動(dòng)態(tài)創(chuàng)建script標(biāo)簽，回調(diào)函數(shù)
Ajax是頁(yè)面無(wú)刷新請(qǐng)求數(shù)據(jù)操作
18.javascript的本地對(duì)象，內(nèi)置對(duì)象和宿主對(duì)象
本地對(duì)象為array obj regexp等可以new實(shí)例化
內(nèi)置對(duì)象為gload Math 等不可以實(shí)例化的
宿主為瀏覽器自帶的document,window 等
19.document load 和document ready的區(qū)別
Document.onload 是在結(jié)構(gòu)和樣式加載完才執(zhí)行js
Document.ready原生種沒(méi)有這個(gè)方法，jquery中有 $().ready(function)
20.”==”和“===”的不同
前者會(huì)自動(dòng)轉(zhuǎn)換類(lèi)型
后者不會(huì)
21.javascript的同源策略
一段腳本只能讀取來(lái)自于同一來(lái)源的窗口和文檔的屬性，這里的同一來(lái)源指的是主機(jī)名、協(xié)議和端口號(hào)的組合
22.編寫(xiě)一個(gè)數(shù)組去重的方法
function oSort(arr)
{
var result ={};
var newArr=[];
for(var i=0;i
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}
前端面試常見(jiàn)問(wèn)題
1. 常用那幾種瀏覽器測(cè)試？有哪些內(nèi)核(Layout Engine)?
(Q1) 瀏覽器：IE，Chrome，F(xiàn)ireFox，Safari，Opera。
(Q2) 內(nèi)核：Trident，Gecko，Presto，Webkit。
2. 說(shuō)下行內(nèi)元素和塊級(jí)元素的區(qū)別？行內(nèi)塊元素的兼容性使用？（IE8 以下）
(Q1) 行內(nèi)元素：會(huì)在水平方向排列，不能包含塊級(jí)元素，設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)，margin上下無(wú)效，padding上下無(wú)效。
塊級(jí)元素：各占據(jù)一行，垂直方向排列。從新行開(kāi)始結(jié)束接著一個(gè)斷行。
(Q2) 兼容性：display:inline-block;*display:inline;*zoom:1;
3. 清除浮動(dòng)有哪些方式？比較好的方式是哪一種？
(Q1)
�。�1）父級(jí)div定義height。
�。�2）結(jié)尾處加空div標(biāo)簽clear:both。
�。�3）父級(jí)div定義偽類(lèi):after和zoom。
�。�4）父級(jí)div定義overflow:hidden。
�。�5）父級(jí)div定義overflow:auto。
（6）父級(jí)div也浮動(dòng)，需要定義寬度。
（7）父級(jí)div定義display:table。
�。�8）結(jié)尾處加br標(biāo)簽clear:both。
(Q2) 比較八好的是第3種方式，好多網(wǎng)站都這么用。
4. box-sizing常用的屬性有哪些？分別有什么作用？
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認(rèn)效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
5. Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
(Q1) 告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
(Q2) 標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
6. HTML5 為什么只需要寫(xiě) ？
HTML5不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）。
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類(lèi)型。
7. 頁(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)題。
8. 介紹一下你對(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)核就傾向于只指渲染引擎。
9. html5有哪些新特性？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和 HTML5？
(Q1)
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
(1)繪畫(huà) canvas;
(2)用于媒介回放的 video 和 audio 元素;
(3)本地離線存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
(4)sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除;
(5)語(yǔ)意化更好的內(nèi)容元素，比如 article、footer、header、nav、section;
(6)表單控件，calendar、date、time、email、url、search;
(7)新的技術(shù)webworker, websocket, Geolocation;
(Q2)
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，
10. 簡(jiǎn)述一下你對(duì)HTML語(yǔ)義化的理解？
用正確的標(biāo)簽做正確的事情。
html語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對(duì)瀏覽器、搜索引擎解析;
即使在沒(méi)有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲(chóng)也依賴(lài)于HTML標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于seo;
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
JavaScript
1. 介紹js的基本數(shù)據(jù)類(lèi)型
Undefined、Null、Boolean、Number、String
2. js有哪些內(nèi)置對(duì)象？
數(shù)據(jù)封裝類(lèi)對(duì)象：Object、Array、Boolean、Number 和 String
其他對(duì)象：Function、Arguments、Math、Date、RegExp、Error
3. this對(duì)象的理解
this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
如果有new關(guān)鍵字，this指向new出來(lái)的那個(gè)對(duì)象；
在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是，IE中的attachEvent中的this總是指向全局對(duì)象Window。
4. eval是做什么的？
它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；
應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語(yǔ)句，一次執(zhí)行）。
由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval，var obj =eval((+ str +))。
5. DOM怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)
// 創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
// 添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
Before() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
// 查找
getElementsByTagName() //通過(guò)標(biāo)簽名稱(chēng)
getElementsByName() //通過(guò)元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)
getElementById() //通過(guò)元素Id，唯一性
6. null和undefined的區(qū)別？
null是一個(gè)表示"無(wú)"的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示"無(wú)"的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。
undefined：
（1）變量被聲明了，但沒(méi)有賦值時(shí)，就等于undefined。
�。�2) 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒(méi)有提供，該參數(shù)等于undefined。
（3）對(duì)象沒(méi)有賦值的屬性，該屬性的值為undefined。
�。�4）函數(shù)沒(méi)有返回值時(shí)，默認(rèn)返回undefined。
null：
�。�1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。
�。�2） 作為對(duì)象原型鏈的終點(diǎn)。
7. new操作符具體干了什么呢?
�。�1）創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
（2）屬性和方法被加入到 this 引用的對(duì)象中。
�。�3）新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。
8. JSON 的了解？
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫(xiě), 占用帶寬小。
格式：采用鍵值對(duì)，例如：{age:12, name:back}
9. call() 和 apply() 的區(qū)別和作用？
apply()函數(shù)有兩個(gè)參數(shù)：第一個(gè)參數(shù)是上下文，第二個(gè)參數(shù)是參數(shù)組成的數(shù)組。如果上下文是null，則使用全局對(duì)象代替。
如：function.apply(this,[1,2,3]);
call()的第一個(gè)參數(shù)是上下文，后續(xù)是實(shí)例傳入的參數(shù)序列。
如：function.call(this,1,2,3);
10. 如何獲取UA？
function whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
}
其他
1. HTTP狀態(tài)碼知道哪些？
100 Continue 繼續(xù)，一般在發(fā)送post請(qǐng)求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息，表示確認(rèn)，之后發(fā)送具體參數(shù)信息
200 OK 正常返回信息
201 Created 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請(qǐng)求，但尚未處理
301 Moved Permanently 請(qǐng)求的網(wǎng)頁(yè)已永久移動(dòng)到新位置。
302 Found 臨時(shí)性重定向。
303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。
304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁(yè)未修改過(guò)。
400 Bad Request 服務(wù)器無(wú)法理解請(qǐng)求的格式，客戶(hù)端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。
401 Unauthorized 請(qǐng)求未授權(quán)。
403 Forbidden 禁止訪問(wèn)。
404 Not Found 找不到如何與 URI 相匹配的資源。
500 Internal Server Error 最常見(jiàn)的服務(wù)器端錯(cuò)誤。
503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求（可能是過(guò)載或維護(hù)）。
2. 你有哪些性能優(yōu)化的方法？
�。�1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁(yè)Gzip，CDN托管，data緩存 ，圖片服務(wù)器。
�。�2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存ajax請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)
�。�3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
（4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
（5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少I(mǎi)O讀取操作。
�。�6） 避免使用CSS Expression（css表達(dá)式)又稱(chēng)Dynamic properties(動(dòng)態(tài)屬性)。
�。�7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳。
3. 什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？
優(yōu)雅降級(jí)：web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶(hù)使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。
由于IE獨(dú)特的盒模型布局問(wèn)題，針對(duì)不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級(jí)了,為那些無(wú)法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效。
漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開(kāi)始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用。
4. 哪些常見(jiàn)操作會(huì)造成內(nèi)存泄漏？
內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒(méi)有其他對(duì)象引用過(guò)該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的，那么該對(duì)象的內(nèi)存即可回收。
setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏。
閉包、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）。
5. 線程與進(jìn)程的區(qū)別
一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程。
線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高。
另外，進(jìn)程在執(zhí)行過(guò)程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率。
線程在執(zhí)行過(guò)程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。
從邏輯角度來(lái)看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒(méi)有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別。
前端面試筆試題
1.XHTML和HTML有什么區(qū)別
HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言
最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉。
標(biāo)簽名必須用小寫(xiě)字母。
XHTML 文檔必須擁有根元素。
2.前端頁(yè)面有哪三層構(gòu)成，分別是什么?作用是什么?
結(jié)構(gòu)層 Html 表示層 CSS 行為層 js;
3.你做的頁(yè)面在哪些流覽器測(cè)試過(guò)?這些瀏覽器的內(nèi)核分別是什么?
Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit,Blink） opera(Presto),Safari(wbkit)
4.什么是語(yǔ)義化的HTML?
直觀的認(rèn)識(shí)標(biāo)簽 對(duì)于搜索引擎的抓取有好處，用正確的標(biāo)簽做正確的事情！
html語(yǔ)義化就是讓頁(yè)面的內(nèi)容結(jié)構(gòu)化，便于對(duì)瀏覽器、搜索引擎解析；
在沒(méi)有樣式CCS情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重，利于 SEO。
使閱讀源代碼的人對(duì)網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護(hù)理解。
5.HTML5 為什么只需要寫(xiě) !DOCTYPE HTML？
HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）；而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類(lèi)型。
6.Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
!DOCTYPE聲明位于位于HTML文檔中的第一行，處于html 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。
標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
7.html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？如何區(qū)分 HTML 和
HTML5？
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。
繪畫(huà) canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲(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)的樣式：
8.請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage和localStorage不會(huì)
sessionStorage和localStorage的存儲(chǔ)空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間；
9.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
調(diào)用localstorge、cookies等本地存儲(chǔ)方式
web前端面試題及答案
1、怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)？
創(chuàng)建新節(jié)點(diǎn)：
creatDocumentFragment()，創(chuàng)建一個(gè)DOM片段。
creatElement()，創(chuàng)建一個(gè)具體的元素。
creatTextNode()，創(chuàng)建一個(gè)文本節(jié)點(diǎn)。
添加、移除、替換、插入：
appendChild()，添加。
removeChild()，移除。
replaceChild()，替換。
Before()，插入。
查找：
getElementsByTagName()，通過(guò)標(biāo)簽名稱(chēng)。
getElementsByName()，通過(guò)元素的Name屬性的值。
getElementById()，通過(guò)元素id，唯一性。
2、JS中什么是偽數(shù)組？如何將偽數(shù)組轉(zhuǎn)化為標(biāo)準(zhǔn)數(shù)組？
偽數(shù)組（類(lèi)數(shù)組）：無(wú)法直接調(diào)用數(shù)組方法或期望length屬性有什么特殊的行為。但仍可以對(duì)真正數(shù)組遍歷方法來(lái)遍歷它們。典型的是函數(shù)的arguement參數(shù)，還有像調(diào)用getElementsByTagName()、document.childNodes()之類(lèi)的，它們都返回NodeList對(duì)象，都屬于偽數(shù)組。可以用Array.prototype.slice.call(fakeArray)將數(shù)組轉(zhuǎn)化為真正的Array對(duì)象。
3、JS中callee和caller的作用。
caller是返回一個(gè)對(duì)函數(shù)的引用，該函數(shù)調(diào)用了當(dāng)前函數(shù)；
callee是返回正在被執(zhí)行的函數(shù)，也就是所指定的function對(duì)象的正文。
4、請(qǐng)說(shuō)出三種減低頁(yè)面加載時(shí)間的方法。
1.壓縮CSS、JS文件。
2.合并JS、CSS文件，減少HTTP請(qǐng)求。
3.外部JS、CSS文件放最底下。
4.減少DOM的操作，盡可能用變量替代不必要的DOM操作。
5、為什么用多個(gè)域名來(lái)存儲(chǔ)網(wǎng)絡(luò)資源會(huì)更有效？
確保用戶(hù)在不同地區(qū)用最快的速度打開(kāi)網(wǎng)站，其中某個(gè)域名崩潰，用戶(hù)也能通過(guò)其他域名訪問(wèn)網(wǎng)站。
6、如何消除一個(gè)數(shù)組里面重復(fù)的元素？
indexOf():返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，對(duì)大小寫(xiě)敏感，若沒(méi)有，則返回-1。
7、寫(xiě)一個(gè)function，清除字符串前后的空格（兼容所有的瀏覽器）。
8、統(tǒng)計(jì)字符串中字母?jìng)�(gè)數(shù)或統(tǒng)計(jì)最多字母數(shù)。
str.charAt(i)：返回指定位置的字符，i在0~str.length之間，如果i不在0~str.length之間，該方法返回一個(gè)空字符串。
9、截取字符串"abcdefg"中的"egf"。
10、實(shí)現(xiàn)一個(gè)函數(shù)clone，可以對(duì)JS中的5種主要的數(shù)據(jù)類(lèi)型（包括Number、String、Object、Array、Boolean）進(jìn)行值復(fù)制。
11、JS中如何檢測(cè)一個(gè)變量是string類(lèi)型？
typeof(obj)=="string";
obj.constructor==string;
12、寫(xiě)出三個(gè)使用this的典型應(yīng)用。
事件：onclick this，發(fā)生事件的對(duì)象；
構(gòu)造函數(shù)：this，new出來(lái)的object；
call/apply：改變this；
13、網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒計(jì)時(shí)程序，要求網(wǎng)頁(yè)上實(shí)時(shí)動(dòng)態(tài)顯示“xx年還剩xx天xx時(shí)xx分xx秒”。
【前端開(kāi)發(fā)的面試題】相關(guān)文章：
前端開(kāi)發(fā)面試題及答案01-22
PHP前端開(kāi)發(fā)中的性能05-25
網(wǎng)頁(yè)設(shè)計(jì)前端面試題集合11-08
web前端js面試題及參考答案08-26
Java開(kāi)發(fā)崗位面試題06-17
網(wǎng)頁(yè)設(shè)計(jì)和web前端開(kāi)發(fā)哪個(gè)好09-20
學(xué)習(xí)前端的心得09-29
web前端技巧解說(shuō)06-11