很早之前就在看web前端面試題，一直想總結(jié)一個(gè)比較全面又詳細(xì)的面試題庫倚舀，現(xiàn)在總結(jié)了一些叹哭，分享給大家，以后還會持續(xù)更新痕貌，有些題目有多種答案风罩，本文只給出其中一種，哪里有問題的歡迎指出舵稠。

Html&CSS

1超升、談?wù)勀銓eb標(biāo)準(zhǔn)的理解

web標(biāo)準(zhǔn)的理解

2、列舉html中至少三個(gè)實(shí)體

&amp哺徊、&nbsp 室琢、&lt、&gt落追、&reg盈滴、&copy
詳細(xì)請看w3schoolHTML實(shí)體符號參考手冊
w3schoolHTML實(shí)體符號參考手冊

3、cellpadding與cellspacing有何區(qū)別轿钠？

cellpadding：代表單元格邊框到內(nèi)容之間的距離（留白）
cellspacing：cellspacing屬性用來指定表格各單元格之間的空隙巢钓。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點(diǎn)數(shù)疗垛。

4症汹、CSS 選擇符有哪些？哪些屬性可以繼承继谚？優(yōu)先級算法如何計(jì)算烈菌？ CSS3新增偽類有哪些？

1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（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)先級
優(yōu)先級就近原則花履，同權(quán)重情況下樣式定義最近者為準(zhǔn)芽世，載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:
!important > id > class > tag
important 比 內(nèi)聯(lián)優(yōu)先級高
CSS3新增偽類舉例
p:first-of-type 選擇屬于其父元素的首個(gè)<p> 元素的每個(gè)<p>元素。
p:last-of-type 選擇屬于其父元素的最后 <p>元素的每個(gè)<p>元素诡壁。
p:only-of-type 選擇屬于其父元素唯一的<p>元素的每個(gè)<p>元素济瓢。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)<p>元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)<p>元素妹卿。
:enabled :disabled 控制表單控件的禁用狀態(tài)旺矾。
:checked 單選框或復(fù)選框被選中蔑鹦。

5、display與visibility有何異同箕宙？

display可以有很多值嚎朽，visibility只有兩個(gè)常用值：visible、hidden柬帕。
當(dāng)display為none哟忍、visibility為hidden時(shí)都會隱藏元素。但display會隱藏掉元素空間陷寝，visibility會保留元素空間锅很。

6、怎么在網(wǎng)頁中實(shí)現(xiàn)絕對定位凤跑？

absolute
絕對定位與相對定位

7爆安、table-layout、border-collapse有何用途仔引？

①table-layout：設(shè)置表格是否自動調(diào)整寬高
②border-collapse：表格與單元格及單元格間的邊框是否融合在一起扔仓。

8、簡述盒模型

簡述盒模型

9肤寝、鏈接標(biāo)記target屬性的_top当辐、_parent、_blank鲤看、main缘揪、left、top各有何用處?

鏈接標(biāo)記target與Dom义桂，Bom

10找筝、你對瀏覽器兼容怎么看？通常你都做哪些處理慷吊？

瀏覽器的兼容性

11袖裕、get和post的區(qū)別？

GET：一般用于信息獲取溉瓶，使用URL傳遞參數(shù)急鳄，對所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符
POST：一般用于修改服務(wù)器上的資源堰酿，對所發(fā)送的信息沒有限制疾宏。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值触创，也就是說Get是通過地址欄來傳值坎藐，而Post是通過提交表單來傳值。
然而，在以下情況中岩馍，請使用 POST 請求：
①無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）碉咆。
②發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠蛀恩。

12疫铜、xhtml和html有什么區(qū)別

①HTML是一種基本的WEB網(wǎng)頁設(shè)計(jì)語言,XHTML是一個(gè)基于XML的置標(biāo)語言
②最主要的不同：
XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關(guān)閉双谆。
標(biāo)簽名必須用小寫字母块攒。
XHTML 文檔必須擁有根元素。

13佃乘、行內(nèi)元素有哪些?塊級元素有哪些?空(void)元素有那些？
行內(nèi)元素和塊級元素的區(qū)別是什么驹尼？行內(nèi)塊元素的兼容性使用趣避？（IE8 以下）

塊級元素：div p h1 h2 h3 h4 form ul ol dl dt dd
行內(nèi)元素: a b br i span input select image strong（強(qiáng)調(diào)的語氣）
常見空元素：
<br>/<hr>/<img>/<input>/<link>/<meta>
不常見空元素：
<area>/<base>/<col>/<command>/<embed>/<keygen>/<param>/<source>/<track>/<wbr>
行內(nèi)元素：會在水平方向排列，不能包含塊級元素新翎，設(shè)置width無效程帕，height無效(可以設(shè)置line-height)，margin上下無效地啰，padding上下無效愁拭。
塊級元素：各占據(jù)一行，垂直方向排列亏吝。從新行開始結(jié)束接著一個(gè)斷行岭埠。
兼容性：
display:inline-block;*display:inline;*zoom:1;

14、CSS引入的方式有哪些? link和@import的區(qū)別是?

CSS引入的方式包括內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
link和@import的區(qū)別是 ：
①link屬于XHTML標(biāo)簽蔚鸥，除了加載CSS外惜论，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的止喷，只能用于加載CSS馆类；
②頁面被加載的時(shí)，link會同時(shí)被加載弹谁，而@import引用的CSS會等到頁面被加載完再加載乾巧；
③import是CSS2.1 提出的，只在IE5以上才能被識別预愤，而link是XHTML標(biāo)簽沟于，無兼容問題；
④后者優(yōu)先級更高

15鳖粟、你做的頁面在哪些流覽器測試過?這些瀏覽器的內(nèi)核分別是什么?介紹一下你對瀏覽器內(nèi)核的理解

Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit） opera(blink)
對內(nèi)核的理解：
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎社裆。
①渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML向图、圖像等等）泳秀、整理訊息（例如加入CSS等）标沪，以及計(jì)算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)嗜傅。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同金句，所以渲染的效果也不相同。所有網(wǎng)頁瀏覽器吕嘀、電子郵件客戶端以及其它需要編輯违寞、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
②JS引擎：解析和執(zhí)行javascript來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果偶房。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確趁曼，后來JS引擎越來越獨(dú)立，內(nèi)核就傾向于只指渲染引擎棕洋。

16挡闰、解釋css sprites，如何使用掰盘。

Css 精靈 把一堆小的圖片整合到一張大的圖片上摄悯，減輕服務(wù)器對圖片的請求數(shù)量牺蹄。
適用于以下情況：
①靜態(tài)圖片纱新，不隨用戶信息的變化而變化
②小圖片，圖片容量比較小
③加載量比較大

17叉袍、清除浮動的幾種方式次绘，各自的優(yōu)缺點(diǎn)

（1）父級div定義height瘪阁。
（2）結(jié)尾處加空div標(biāo)簽clear:both。
（3）父級div定義偽類:after和zoom断盛。
（4）父級div定義overflow:hidden罗洗。
（5）父級div定義overflow:auto。
（6）父級div也浮動钢猛，需要定義寬度伙菜。
（7）父級div定義display:table。
（8）結(jié)尾處加br標(biāo)簽clear:both命迈。
比較好的是第3種方式贩绕，好多網(wǎng)站都這么用。

18壶愤、Doctype作用淑倾？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

①<!DOCTYPE>告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)征椒。
②標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行娇哆。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
注意點(diǎn)：
HTML5 只需要寫<!DOCTYPEHTML>不需要對DTD進(jìn)行引用碍讨，因?yàn)镠TML5不基于 SGML治力，因此不需要對DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）勃黍。
而HTML4.01基于SGML,所以需要對DTD進(jìn)行引用,才能告知瀏覽器文檔所使用的文檔類型宵统。

19、iframe有哪些缺點(diǎn)覆获？

①iframe會阻塞主頁面的Onload事件马澈，搜索引擎的檢索程序無法解讀這種頁面，不利于SEO弄息；
②iframe和主頁面共享連接池痊班，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載摹量。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)辩块。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值荆永，這樣可以繞開以上兩個(gè)問題。

20国章、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信?

①通過WebSocket具钥、SharedWorker來實(shí)現(xiàn)；
②也可以調(diào)用localstorge液兽、cookies等本地存儲方式骂删。
localstorge另一個(gè)瀏覽上下文（另一個(gè)標(biāo)簽頁）里被添加、修改或刪除時(shí)四啰，它都會觸發(fā)一個(gè)事件宁玫，我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信柑晒。
注意quirks：Safari 在無痕模式下設(shè)置localstorge值時(shí)會拋出 QuotaExceededError 的異常欧瘪。

21、如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域匙赞？

①map+area或者svg
②border-radius
③純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡單算法佛掖、獲取鼠標(biāo)坐標(biāo)等等

22、CSS3有哪些新特性涌庭？

① CSS3實(shí)現(xiàn)圓角（border-radius:8px）芥被，陰影（box-shadow:10px）；
② 對文字加特效（text-shadow坐榆、）拴魄，線性漸變（gradient），旋轉(zhuǎn)（transform）；
③ transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋轉(zhuǎn),縮放,定位,傾斜
④ 增加了更多的CSS選擇器 多背景 rgba
CSS3新增屬性

Html5

1匹中、Html5與html4相比夏漱，各有何優(yōu)缺點(diǎn)？ 怎樣處理html5新標(biāo)簽的兼容性問題职员？

html5余html4的異同請看以下的鏈接
html5與html4的異同
兼容性問題
IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽麻蹋，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽，瀏覽器支持新標(biāo)簽后焊切，還需要添加標(biāo)簽?zāi)J(rèn)的樣式扮授。當(dāng)然也可以直接使用成熟的框架、比如html5shim专肪。

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

Javascript

1刹勃、JS如何使頁面跳轉(zhuǎn)?怎么引入一個(gè)外部JS文件?

①直接在head標(biāo)簽內(nèi)寫入js代碼，如下

<Script Language="JavaScript">js 語句</Script>

②引入寫好的js文件嚎尤，使用語句

<script language="JavaScript" src="test.js"></script>

也是直接放入到head標(biāo)簽里頭荔仁，也有的是放在</body>前面。

2芽死、輸入框的驗(yàn)證用什么事件?

change(fn)

3乏梁、undefined與null有何異同？

null是一個(gè)表示"無"的對象关贵，轉(zhuǎn)為數(shù)值時(shí)為0遇骑；undefined是一個(gè)表示"無"的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN揖曾。
undefined：
（1）變量被聲明了落萎，但沒有賦值時(shí)，就等于undefined炭剪。
（2) 調(diào)用函數(shù)時(shí)练链，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined奴拦。
（3）對象沒有賦值的屬性媒鼓，該屬性的值為undefined。
（4）函數(shù)沒有返回值時(shí)错妖，默認(rèn)返回undefined隶糕。
null：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象站玄。
（2） 作為對象原型鏈的終點(diǎn)枚驻。
它們都表示空，轉(zhuǎn)換為boolean后都為false株旷，但是null代表一個(gè)對象變量已經(jīng)被初始化再登，但未裝入對象尔邓；undefined表示未初始化變量

4、===與==有何異同锉矢？

相同點(diǎn)：都是判定兩個(gè)值是否相等
不同點(diǎn)：==不會判斷類型梯嗽，而===會判斷類型

5、如何判斷一個(gè)變量的值是否為數(shù)字沽损？以及有哪些手段判斷變量值的數(shù)據(jù)類型灯节？

全局函數(shù)isNaN可以判斷一個(gè)變量的值是否為數(shù)字。
可以使用運(yùn)算符type绵估、instanceof判斷變量值的數(shù)據(jù)類型炎疆。

6、什么是Bom什么是Dom?你如何理解Dom?

鏈接標(biāo)記target與Dom国裳，Bom

7形入、Array的join、push缝左、splice亿遂、slice各有何用途，splice與slice有何異同渺杉？

join：使用指定間隔符連接所有元素為字符串
push：在尾部添加元素并維護(hù)array實(shí)例的length
splice與slice都是截取一部分元素蛇数。不同的在于：slice返回截取后的新實(shí)例，splice在原array實(shí)例上操作是越，更詳細(xì)的請見下文鏈接苞慢。
JS中數(shù)組對象詳解

8、如何阻止表單提交英妓？

在onsubmit事件中返回false

9、如何動態(tài)操作表格绍赛？

可以像普通dom一樣操作蔓纠，但是因?yàn)楸砀竦膁om比較復(fù)雜，所以我通常是使用table的insertRow吗蚌、deleteRow及tr對象的insetCell腿倚、deleteCell操作。

10蚯妇、String.match與RegExp.exec有何區(qū)別敷燎？

match只會返回沒有分組的全部匹配結(jié)果或者有分組的第一次匹配結(jié)果；
而exec可以利用循環(huán)返回全部匹配結(jié)果箩言。

11硬贯、為驗(yàn)證手機(jī)號寫一個(gè)正則。

function checkSubmitMobil()
 {
 if ($("#phoneNum").val() == "") {
 alert("手機(jī)號碼不能為空陨收！");
 //$("#moileMsg").html("<font color='red'>手機(jī)號碼不能為空饭豹！</font>"); 
 $("#mobile").focus();
 return false;
   }
if (!$("#phoneNum").val().match(/^(?:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/)) 
{
 alert("手機(jī)號碼格式不正確鸵赖！");
 //$("#moileMsg").html("<font color='red'>手機(jī)號碼格式不正確！請重新輸入拄衰！</font>"); 
$("#phoneNum").focus();
  return false;
  }
    return true;
}

12它褪、正則的i標(biāo)記與g標(biāo)記各有何用途？

i：不區(qū)分大小寫翘悉；
g：全局匹配茫打。

13、為String添加trim()方法妖混。

String.prototype.trim = function() {
    return this.replace(/^ +| +$/g,"");
}

14老赤、簡述COOKIE。在JS中如何操作Cookie?

簡述cookie源葫，在JS中如何操作cookie

15诗越、談?wù)刯avascript數(shù)組排序方法sort()的使用，重點(diǎn)介紹sort()參數(shù)的使用及其內(nèi)部機(jī)制息堂。

JS數(shù)組排序方法sort()的使用

16嚷狞、談?wù)刬nnerHTML outerHTML innerText之間的區(qū)別。

①innerHTML是w3c的html dom定義的方法荣堰，而后兩者是IE獨(dú)有的方法床未；
②innerHTML代表一個(gè)元素節(jié)點(diǎn)內(nèi)由所有子節(jié)點(diǎn)，不包括當(dāng)前節(jié)點(diǎn)組成的html代碼振坚；
③outerHTML代表一個(gè)元素節(jié)點(diǎn)內(nèi)由所有子節(jié)點(diǎn)和當(dāng)前節(jié)點(diǎn)組成的html代碼薇搁；
④innerText代表一個(gè)元素節(jié)點(diǎn)內(nèi)由所有子文本節(jié)點(diǎn)內(nèi)容組成的文本；

17渡八、在JavaScript中定時(shí)調(diào)用函數(shù) foo() 如何寫啃洋？

setTimeout(
    foo,
    1000    //這里設(shè)置延時(shí)數(shù)
);

18、setTimeout與setInterval有何區(qū)別?

①setTimeout和setInterval的語法相同屎鳍。它們都有兩個(gè)參數(shù)宏娄，一個(gè)是將要執(zhí)行的代碼字符串，還有一個(gè)是以毫秒為單位的時(shí)間間隔逮壁，當(dāng)過了那個(gè)時(shí)間段之后就將執(zhí)行那段代碼孵坚。
②不過這兩個(gè)函數(shù)還是有區(qū)別的，setInterval在執(zhí)行完一次代碼之后窥淆，經(jīng)過了那個(gè)固定的時(shí)間間隔卖宠，它還會自動重復(fù)執(zhí)行代碼，而setTimeout只執(zhí)行一次那段代碼忧饭。

19扛伍、你在js中用過array嗎？如果用過词裤，array中添加數(shù)據(jù)用什么方法蜒秤？

在尾部添加使用push();
在頭部添加使用unshift();
在任意位置添加使用splice(),但要注意把它的刪除個(gè)數(shù)設(shè)置為0;
array詳細(xì)介紹請看下文鏈接
JS中數(shù)組對象詳解

20汁咏、簡述javascript的優(yōu)缺點(diǎn)。

優(yōu)點(diǎn)：簡單易用作媚，與Java有類似的語法攘滩，可以使用任何文本編輯工具編寫，只需要瀏覽器就可執(zhí)行程序纸泡，并且事先不用編譯漂问，逐行執(zhí)行，無需進(jìn)行嚴(yán)格的變量聲明女揭，而且內(nèi)置大量現(xiàn)成對象蚤假，編寫少量程序可以完成目標(biāo)；
缺點(diǎn)：不適合開發(fā)大型應(yīng)用程序吧兔；

21磷仰、Javascript有哪些內(nèi)置對象?

只有Math和Global（在瀏覽器環(huán)境中，Global就是Window）

22境蔼、列舉Javascript的本地對象灶平。

Object、Function箍土、Array逢享、String、Boolean吴藻、Number瞒爬、Date、RegExp沟堡、Error侧但、EvalError、RangeError航罗、ReferenceError禀横、SyntaxError、TypeError伤哺、URIError

23、javascript的typeof返回哪些數(shù)據(jù)類型

object number function boolean undefind string

24者祖、例舉3種強(qiáng)制類型轉(zhuǎn)換和2種隱式類型轉(zhuǎn)換?

強(qiáng)制（parseInt,parseFloat,number）
隱式（== – ===）

25立莉、IE和DOM事件流的區(qū)別

①執(zhí)行順序不一樣、
②參數(shù)不一樣
③事件加不加on
④this指向問題

26七问、事件綁定和普通事件有什么區(qū)別

①事件綁定就是針對dom元素的事件蜓耻，綁定在dom元素上
②普通事件即為非針對dom元素的事件

27、事件委托是什么

利用事件冒泡的原理械巡，讓自己的所觸發(fā)的事件刹淌，由他的父元素代替執(zhí)行饶氏！
通俗的講，事件就是onclick有勾，onmouseover疹启，onmouseout，等就是事件蔼卡，委托呢喊崖，就是讓別人來做，這個(gè)事件本來是加在某些元素上的雇逞，然而你卻加到別人身上來做荤懂，完成這個(gè)事件。
例子請看以下鏈接
JS中的事件委托

28塘砸、閉包是什么节仿，有什么特性，對頁面有什么影響

什么是閉包
“官方”的解釋：所謂“閉包”掉蔬，指的是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)）廊宪，因而這些變量也是該表達(dá)式的一部分。
在 Scala眉踱、Scheme挤忙、Common Lisp、Smalltalk谈喳、Groovy册烈、JavaScript、Ruby婿禽、 Python赏僧、Go、Lua扭倾、objective c淀零、swift 以及Java（Java8及以上）等語言中都能找到對閉包不同程度的支持。
通俗的講就是函數(shù)a的內(nèi)部函數(shù)b膛壹，被函數(shù)a外部的一個(gè)變量引用的時(shí)候驾中，就創(chuàng)建了一個(gè)閉包。
閉包的特性：
①.封閉性：外界無法訪問閉包內(nèi)部的數(shù)據(jù)模聋，如果在閉包內(nèi)聲明變量肩民，外界是無法訪問的，除非閉包主動向外界提供訪問接口链方；
②.持久性：一般的函數(shù)持痰，調(diào)用完畢之后，系統(tǒng)自動注銷函數(shù)祟蚀，而對于閉包來說工窍，在外部函數(shù)被調(diào)用之后割卖，閉包結(jié)構(gòu)依然保存在；
對頁面的影響
使用閉包會占有內(nèi)存資源患雏，過多的使用閉包會導(dǎo)致內(nèi)存溢出等鹏溯。
詳細(xì)請看以下推薦鏈接
深入理解JavaScript的閉包特性 如何給循環(huán)中的對象添加事件

29、javascript的本地對象纵苛，內(nèi)置對象和宿主對象

①本地對象為array obj regexp等可以new實(shí)例化
②內(nèi)置對象為gload Math 等不可以實(shí)例化的
③宿主為瀏覽器自帶的document,window 等

30剿涮、編寫一個(gè)數(shù)組去重的方法

思路：
1.創(chuàng)建一個(gè)新的數(shù)組存放結(jié)果
2.創(chuàng)建一個(gè)空對象
3.for循環(huán)時(shí)，每次取出一個(gè)元素與對象進(jìn)行對比攻人，如果這個(gè)元素不重復(fù)取试，則把它存放到結(jié)果數(shù)組中，同時(shí)把這個(gè)元素的內(nèi)容作為對象的一個(gè)屬性怀吻，并賦值為1瞬浓，存入到第2步建立的對象中。
說明：至于如何對比蓬坡，就是每次從原數(shù)組中取出一個(gè)元素猿棉，然后到對象中去訪問這個(gè)屬性，如果能訪問到值屑咳，則說明重復(fù)萨赁。
代碼如下：

Array.prototype.unique3 = function(){
 var res = [];
 var json = {};
 for(var i = 0; i < this.length; i++){
  if(!json[this[i]]){
   res.push(this[i]);
   json[this[i]] = 1;
  }
 }
 return res;
}
var arr = [112,112,34,'你好',112,112,34,'你好','str','str1'];
alert(arr.unique3());

31、this對象的理解

①this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）兆龙；
②如果有new關(guān)鍵字杖爽，this指向new出來的那個(gè)對象；
③在事件中紫皇，this指向觸發(fā)這個(gè)事件的對象慰安，特殊的是，IE中的attachEvent中的this總是指向全局對象Window聪铺；

32化焕、eval是做什么的？

①它的功能是把對應(yīng)的字符串解析成JS代碼并運(yùn)行铃剔；
②應(yīng)該避免使用eval撒桨，不安全，非常耗性能（2次键兜，一次解析成js語句凤类，一次執(zhí)行）。
③由JSON字符串轉(zhuǎn)換為JSON對象的時(shí)候可以用eval蝶押，var obj =eval('('+ str +')');

33踱蠢、new操作符具體干了什么呢?

①創(chuàng)建一個(gè)空對象火欧，并且 this 變量引用該對象棋电，同時(shí)還繼承了該函數(shù)的原型茎截。
②屬性和方法被加入到 this 引用的對象中。
③新創(chuàng)建的對象由 this 所引用赶盔，并且最后隱式的返回 this 企锌。

34、call() 和 apply() 的區(qū)別和作用于未？

①apply()函數(shù)有兩個(gè)參數(shù)：第一個(gè)參數(shù)是上下文撕攒，第二個(gè)參數(shù)是參數(shù)組成的數(shù)組。如果上下文是null烘浦，則使用全局對象代替抖坪。
如：function.apply(this,[1,2,3])；
②call()的第一個(gè)參數(shù)是上下文闷叉，后續(xù)是實(shí)例傳入的參數(shù)序列擦俐。
如：function.call(this,1,2,3)；

如何獲取UA

JS代碼

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;  
    } 

35握侧、請解釋一下 JavaScript 的同源策略

概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)蚯瞧。它最早出自Netscape Navigator2.0，其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載品擎。
這里的同源策略指的是：協(xié)議埋合，域名，端口相同萄传，同源策略是一種安全協(xié)議甚颂。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制盲再？
我們舉例說明：比如一個(gè)黑客程序西设，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實(shí)的用戶名答朋，密碼登錄時(shí)贷揽，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名梦碗，密碼就輕松到手了禽绪。

36、請描述一下 cookies洪规，sessionStorage 和 localStorage 的區(qū)別印屁？

cookie在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大斩例；
sessionStorage和localStorage有更多豐富易用的接口雄人；
sessionStorage和localStorage各自獨(dú)立的存儲空間；

Ajax

1、什么是Ajax础钠？

Ajax（Asynchronous JavaScript + XML）恰力，即異步JavaScript + XML的縮寫，主要用來頁面異步刷新旗吁，也是構(gòu)建RIA的一種基礎(chǔ)技術(shù)踩萎。

2、如何使用Ajax從服務(wù)器獲取數(shù)據(jù)很钓？

①創(chuàng)建XMLHttpRequest對象香府，注意兼容IE6的情況
②使用XMLHttpRequest對象的open方法，其中有三個(gè)參數(shù)：
a.字符串码倦，代表html的請求:GET,POST企孩。
b.要訪問的服務(wù)器的URL。
c.Boolean值袁稽，true表示異步柠硕，flase表示同步，一般情況下是異步运提，默認(rèn)為true蝗柔。
③ajax的回調(diào)函數(shù)。xhr.readyState==4表示請求已經(jīng)結(jié)束民泵，服務(wù)器響應(yīng)完成癣丧。
status表示http請求的狀態(tài)，200表示正常響應(yīng)栈妆；404表示資源找不到胁编；500表示服務(wù)器端錯(cuò)誤。
④發(fā)送ajax請求鳞尔。如果沒有數(shù)據(jù)嬉橙，可以不傳或者傳遞null；如果post請求傳遞數(shù)據(jù)：首先設(shè)置xhr的請求頭信息：

xhr.setRequestHeader("Content-type","application/x-www-formurlencoded");

再傳遞參數(shù)：

xhr.send(name=liujianhong&password=123); 

3寥假、解釋XMLHttpRequest是什么市框？

XMLHttpRequest是我們得以實(shí)現(xiàn)異步通訊的根本。最早在IE5 中以ActiveX組件實(shí)現(xiàn)糕韧；最近枫振，Mozilla 1.0和Safari 1.2中實(shí)現(xiàn)為本地對象。XMLHttpRequest雖然不是W3C標(biāo)準(zhǔn)萤彩，但卻得到了FireFox粪滤、Safari、Opera雀扶、Konqueror杖小、IE等絕大多數(shù)瀏覽器的支持。

4、談?wù)勀銓jax的理解予权。你在項(xiàng)目中如何使用Ajax县踢？手寫一個(gè)簡單的Ajax操作。

Ajax（Asynchronous JavaScript + XML）伟件，即異步JavaScript + XML的縮寫，主要用來頁面異步刷新议经，也是構(gòu)建RIA的一種基礎(chǔ)技術(shù)斧账。因?yàn)樗婕盀g覽器兼容、跨域等問題煞肾，在項(xiàng)目中一般會使用一些基礎(chǔ)類庫輔助實(shí)現(xiàn)咧织，如jQuery等。
一個(gè)簡單的Ajax操作如下籍救。

var xhr = new XMLHttpRequest();
//在環(huán)境中需要做瀏覽器兼容习绢，這里省略了
xhr.onreadystatechange = function() {
//這里注冊當(dāng)xhr狀態(tài)發(fā)生改變后調(diào)用事件
if( xhr.readyState == 4 ) {
//通常在讀取狀態(tài)為4的時(shí)候才能獲取到部分?jǐn)?shù)據(jù)
所以一般狀態(tài)在4的時(shí)候才進(jìn)行處理
if(status==200) {
            //當(dāng)正常請求到資源時(shí)的處理,
可以調(diào)用xhr.responseText或xhr.responseXml獲取數(shù)據(jù)
        }
        else {
        //當(dāng)請求資源失敗時(shí)的處理
        }
    }
}
xhr.open( "GET", url);
//設(shè)置xhr的請求方式和url,這里使用的是GET方式，
 //如果有參數(shù)蝙昙，則連接在url后面
 /*
  如果是POST請求闪萄，還當(dāng)設(shè)置請求的Content-Type
  數(shù)據(jù)使用send作為參數(shù)發(fā)送
  */
xhr.send();

5、談?wù)勀銓SON的理解奇颠。

JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式败去。 易于人閱讀和編寫。同時(shí)也易于機(jī)器解析和生成烈拒。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個(gè)子集圆裕。 JSON采用完全獨(dú)立于語言的文本格式，但是也使用了類似于C語言家族的習(xí)慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）荆几。 這些特性使JSON成為理想的數(shù)據(jù)交換語言吓妆。
所以它往往在AJAX中替代XML，交換數(shù)據(jù)吨铸。

6行拢、你的項(xiàng)目中有使用到跨域嗎？你在項(xiàng)目中是如何處理JS跨域問題的诞吱？

①有剂陡。
②主要是使用其它網(wǎng)站提供的javascript api如QQ。使用script的src可以直接讀取跨域資源狐胎。
③當(dāng)然跨域還有其它處理方式：如代理服務(wù)器鸭栖、改變domain、JSONP等握巢。

7晕鹊、你在項(xiàng)目中有使用到網(wǎng)頁到服務(wù)器的即時(shí)通信嗎？說說你都采用什么手段處理以及你所知道的處理辦法？

沒有用到溅话，但我知道html的websockets晓锻、flash的socket、ajax長輪詢等都可以實(shí)現(xiàn)飞几。

8砚哆、你在AJAX中有遇到亂碼嗎？如果遇到屑墨，你是如何解決的躁锁？

①遇到過。
②一般我首先統(tǒng)一頁面和服務(wù)器編碼卵史，對請求和響應(yīng)的Content-Type設(shè)置正確編碼战转；對請求參數(shù)進(jìn)行編碼處理。

9以躯、解釋jsonp的原理槐秧，以及為什么不是真正的ajax

①Ajax與JSONP這兩種技術(shù)看起來很像，目的也一樣忧设，都是請求一個(gè)url刁标，然后把服務(wù)器返回的數(shù)據(jù)進(jìn)行處理，因此jQuery等框架都把JSONP作為Ajax的一種形式址晕。
②實(shí)際上Ajax與JSONP有著本質(zhì)上的不同命雀。Ajax的核心是通過XMLHttpRequest獲取數(shù)據(jù)，而JSONP的核心則是動態(tài)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js文件斩箫。
③Ajax與JSONP的區(qū)別也不在于是否跨域吏砂，Ajax通過服務(wù)端代理也可以跨域，JSONP也可獲取同源數(shù)據(jù)乘客。具體請看一下參考：
【原創(chuàng)】說說json和jsonp,也許你會豁然開朗狐血，含jQuery用例
深入淺出jsonp--解決ajax跨域問題
瀏覽器的同源策略-MDN

10、ajax 有那些優(yōu)缺點(diǎn)?如何解決跨域問題?

優(yōu)點(diǎn)：
①通過異步模式易核，提升了用戶體驗(yàn).
②優(yōu)化了瀏覽器和服務(wù)器之間的傳輸匈织，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.
③Ajax在客戶端運(yùn)行牡直，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作缀匕，減少了大用戶量下的服務(wù)器負(fù)載。
④Ajax可以實(shí)現(xiàn)動態(tài)不刷新（局部刷新）
缺點(diǎn)：
①安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)碰逸。
②對搜索引擎的支持比較弱乡小。
③不容易調(diào)試。
跨域問題：
jsonp饵史、 iframe满钟、window.name胜榔、window.postMessage、服務(wù)器上設(shè)置代理頁面湃番。

11夭织、JavaScript原型，原型鏈 ? 有什么特點(diǎn)吠撮？

①原型對象也是普通的對象尊惰，是對象一個(gè)自帶隱式的 proto 屬性，原型也有可能有自己的原型泥兰，如果一個(gè)原型對象的原型不為null的話弄屡，我們就稱之為原型鏈。
②原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對象組成的（有限的）對象鏈逾条。

JQuery

1、你使用過jQuery嗎投剥？如果有师脂，你為什么要使用jQuery呢？

①用過江锨。
②如果使用原生javascript開發(fā)的話吃警，會面臨很多問題，如瀏覽器兼容啄育、Ajax數(shù)據(jù)解析酌心、Dom、事件注冊操作等都非常煩鎖挑豌，而jQuery正好解決了這些問題安券。
③當(dāng)然jQuery還有非常有用的其它特性，如為dom對象綁定數(shù)據(jù)氓英、動畫碱璃、等杈绸。并且jQuery還非常容易擴(kuò)展，在它的基礎(chǔ)上開發(fā)非常靈活，也有眾多的插件可用历极，如jQueryUI、easyUI等绍哎。

2央碟、Javascript與jQuery有什么區(qū)別？

jquery 就對javascript的一個(gè)擴(kuò)展吹害，封裝螟凭，就是讓javascript更好用，更簡單它呀。

3赂摆、在jQuery中如何注冊事件挟憔？

使用bind()方法注冊事件，但通常我們使用與事件同名的方法注冊更方便烟号，如：click()绊谭、hover()等。

4汪拥、如何獲取Html內(nèi)容达传？如何獲取文本內(nèi)容？如何獲取屬性值迫筑？如何獲取input值宪赶？如何創(chuàng)建新的節(jié)點(diǎn)？

可以使用html()獲取html內(nèi)容脯燃。
使用text()獲取文本內(nèi)容搂妻。
使用attr()可以獲取屬性值，使用css()可以獲取樣式屬性值辕棚。
通過val()便可以獲取input的值
把節(jié)點(diǎn)元素名加上<欲主、>作為參數(shù)調(diào)用jQuery方法便可創(chuàng)建新節(jié)點(diǎn),如：jQuery(“<div>”)。

5逝嚎、如何向頁面插入節(jié)點(diǎn)扁瓢？

調(diào)用append方法，將新節(jié)點(diǎn)作為參數(shù)补君。

6引几、ajax、get挽铁、post伟桅、ajaxSetup、getJSON各有何用途叽掘？

①ajax：jQuery對ajax執(zhí)行的核心方法贿讹。其它ajax方法都是使用該方法實(shí)現(xiàn)。
②get：專門用于發(fā)送get請求的便捷方法够掠。
③post：專門用于發(fā)送post請求的便捷方法民褂。
④ajaxSetup：設(shè)置調(diào)用ajax方法時(shí)的默認(rèn)值。
⑤getJSON：專門用于向服務(wù)器請求json格式數(shù)據(jù)的便捷方法疯潭。

7赊堪、如何使用從服務(wù)器獲取一個(gè)復(fù)雜數(shù)據(jù)（對象）？

①通常會把這個(gè)數(shù)據(jù)轉(zhuǎn)換為通用的數(shù)據(jù)交換格式竖哩，如xml或json哭廉。由于xml解析比較麻煩，所以使用json比較多相叁。
②在jQuery中有專門的獲取服務(wù)器json數(shù)據(jù)的方法遵绰，getJSON()辽幌，在回調(diào)中，jQuery會自動將json轉(zhuǎn)換為javascript對象椿访。

8乌企、addClass、css有何用途成玫？

①addClass：為元素設(shè)置class屬性加酵，如果該元素已經(jīng)存在class屬性，則在其值后添加空格及新的class值哭当。
②css：操作元素的style屬性的方法猪腕。

9、如何獲取一個(gè)元素的實(shí)際位置钦勘？

使用position()或offset()都可以陋葡。

10、bind()彻采、unbind()腐缤、hover()有何用途？

bind()：注冊特定事件颊亮。
unbind()：刪除特定事件柴梆。
hover()：同時(shí)注冊鼠標(biāo)移入陨溅、移出事件终惑。

11、你知道jQuery插件嗎门扇？你了解jQuery執(zhí)行原理和插件機(jī)制嗎雹有？你都用過哪些jQuery插件？

①知道jQuery插件臼寄。
②其原理是擴(kuò)展jQuery本身及其核心函數(shù)的原型實(shí)現(xiàn)霸奕。可以調(diào)用其extend實(shí)現(xiàn)對它的擴(kuò)展吉拳。
③jQuery插件有很多质帅，常見的有：jQueryUI、jQuery-Cookie留攒、jQuery-Timer等煤惩。

其它

1、HTTP狀態(tài)碼知道哪些炼邀？

100 Continue 繼續(xù)魄揉，一般在發(fā)送post請求時(shí)，已發(fā)送了http header之后服務(wù)端將返回此信息拭宁，表示確認(rèn)洛退，之后發(fā)送具體參數(shù)信息
200 OK 正常返回信息
201 Created 請求成功并且服務(wù)器創(chuàng)建了新的資源
202 Accepted 服務(wù)器已接受請求瓣俯，但尚未處理
301 Moved Permanently 請求的網(wǎng)頁已永久移動到新位置。
302 Found 臨時(shí)性重定向兵怯。
303 See Other 臨時(shí)性重定向彩匕，且總是使用 GET 請求新的 URI。
304 Not Modified 自從上次請求后摇零，請求的網(wǎng)頁未修改過推掸。
400 Bad Request 服務(wù)器無法理解請求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請求驻仅。
401 Unauthorized 請求未授權(quán)谅畅。
403 Forbidden 禁止訪問。
404 Not Found 找不到如何與 URI 相匹配的資源噪服。
500 Internal Server Error 最常見的服務(wù)器端錯(cuò)誤毡泻。
503 Service Unavailable 服務(wù)器端暫時(shí)無法處理請求（可能是過載或維護(hù)）。

2粘优、你有哪些性能優(yōu)化的方法

（1） 減少http請求次數(shù)：CSS Sprites, JS仇味、CSS源碼壓縮、圖片大小控制合適雹顺；網(wǎng)頁Gzip丹墨，CDN托管，data緩存 嬉愧，圖片服務(wù)器贩挣。
（2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)没酣，前端用變量保存AJAX請求結(jié)果王财，每次操作本地變量，不用請求裕便，減少請求次數(shù)绒净。
（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)偿衰，優(yōu)化javascript性能挂疆。
（4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
（5） 少用全局變量下翎、緩存DOM節(jié)點(diǎn)查找的結(jié)果缤言。減少IO讀取操作。
（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動態(tài)屬性)漏设。
（7） 圖片預(yù)加載墨闲，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳郑口。

3鸳碧、什么叫優(yōu)雅降級和漸進(jìn)增強(qiáng)盾鳞？

優(yōu)雅降級：Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器瞻离，則代碼會檢查以確認(rèn)它們是否能正常工作腾仅。由于IE獨(dú)特的盒模型布局問題，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級了,為那些無法支持功能的瀏覽器增加候選方案套利，使之在舊式瀏覽器上以某種形式降級體驗(yàn)卻不至于完全失效推励。
漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的肉迫。當(dāng)瀏覽器支持時(shí)验辞，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

4喊衫、哪些常見操作會造成內(nèi)存泄漏跌造？

①內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
②垃圾回收器定期掃描對象族购，并計(jì)算引用了每個(gè)對象的其他對象的數(shù)量壳贪。如果一個(gè)對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的寝杖，那么該對象的內(nèi)存即可回收违施。
③setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會引發(fā)內(nèi)存泄漏瑟幕。
④閉包磕蒲、控制臺日志、循環(huán)（在兩個(gè)對象彼此引用且彼此保留時(shí)收苏，就會產(chǎn)生一個(gè)循環(huán)）

5亿卤、線程與進(jìn)程的區(qū)別

①一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程愤兵。
②線程的劃分尺度小于進(jìn)程鹿霸，使得多線程程序的并發(fā)性高。
③另外秆乳，進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元懦鼠，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率屹堰。
④線程在執(zhí)行過程中與進(jìn)程還是有區(qū)別的肛冶。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口扯键。但是線程不能夠獨(dú)立執(zhí)行睦袖，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制荣刑。
⑤從邏輯角度來看馅笙，多線程的意義在于一個(gè)應(yīng)用程序中伦乔，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用董习，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配烈和。這就是進(jìn)程和線程的重要區(qū)別。

6皿淋、一個(gè)頁面從輸入 URL 到頁面加載顯示完成招刹，這個(gè)過程中都發(fā)生了什么？

（1）查找瀏覽器緩存
（2）DNS解析窝趣、查找該域名對應(yīng)的IP地址疯暑、重定向（301）、發(fā)出第二個(gè)GET請求
（3）進(jìn)行HTTP協(xié)議會話
（4）客戶端發(fā)送報(bào)頭(請求報(bào)頭)
（5）服務(wù)器回饋報(bào)頭(響應(yīng)報(bào)頭)
（6）html文檔開始下載
（7）文檔樹建立哑舒，根據(jù)標(biāo)記請求所需指定MIME類型的文件
（8）文件顯示

以下自行發(fā)揮

①為什么換工作
②你常用的開發(fā)工具是什么缰儿，為什么？
③對前端界面工程師這個(gè)職位是怎么樣理解的散址？它的前景會怎么樣乖阵？
④加班的看法？
⑤有沒有女朋友

更多的前端面試題预麸，請看下篇文章
史上最全的web前端面試題匯總及答案2
史上最全的web前端面試題匯總及答案3
前端面試題系列將會持續(xù)更新瞪浸，歡迎關(guān)注