很早之前就在看web前端面試題洒疚，一直想總結(jié)一個(gè)比較全面又詳細(xì)的面試題庫歹颓，現(xiàn)在總結(jié)了一些坯屿，分享給大家，以后還會(huì)持續(xù)更新巍扛，有些題目有多種答案领跛，本文只給出其中一種，哪里有問題的歡迎指出撤奸。

Html&CSS

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

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

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

&胧瓜、? 矢棚、<、>府喳、?蒲肋、?

詳細(xì)請看w3schoolHTML實(shí)體符號(hào)參考手冊

w3schoolHTML實(shí)體符號(hào)參考手冊

3、cellpadding與cellspacing有何區(qū)別劫拢？

cellpadding：代表單元格邊框到內(nèi)容之間的距離（留白）

cellspacing：cellspacing屬性用來指定表格各單元格之間的空隙肉津。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點(diǎn)數(shù)舱沧。

4妹沙、CSS 選擇符有哪些？哪些屬性可以繼承熟吏？優(yōu)先級(jí)算法如何計(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)先級(jí)

優(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新增偽類舉例

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í)都會(huì)隱藏元素臭脓。但display會(huì)隱藏掉元素空間祸泪，visibility會(huì)保留元素空間吗浩。

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

absolute

絕對定位與相對定位

7拓萌、table-layout、border-collapse有何用途升略？

①table-layout：設(shè)置表格是否自動(dòng)調(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)元素有哪些?塊級(jí)元素有哪些?空(void)元素有那些？

行內(nèi)元素和塊級(jí)元素的區(qū)別是什么恋拷？行內(nèi)塊元素的兼容性使用资厉？（IE8 以下）

塊級(jí)元素：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)元素：會(huì)在水平方向排列，不能包含塊級(jí)元素蔬顾，設(shè)置width無效宴偿，height無效(可以設(shè)置line-height)，margin上下無效诀豁，padding上下無效窄刘。

塊級(jí)元素：各占據(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會(huì)同時(shí)被加載遇汞，而@import引用的CSS會(huì)等到頁面被加載完再加載未妹；

③import是CSS2.1 提出的，只在IE5以上才能被識(shí)別空入，而link是XHTML標(biāo)簽络它，無兼容問題；

④后者優(yōu)先級(jí)更高

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)頁的顯示方式白对，然后會(huì)輸出至顯示器或打印機(jī)掠廓。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會(huì)有不同，所以渲染的效果也不相同甩恼。所有網(wǎng)頁瀏覽器蟀瞧、電子郵件客戶端以及其它需要編輯沉颂、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。

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

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

16彻坛、解釋css sprites，如何使用踏枣。

Css 精靈 把一堆小的圖片整合到一張大的圖片上昌屉，減輕服務(wù)器對圖片的請求數(shù)量。

適用于以下情況：

①靜態(tài)圖片椰于，不隨用戶信息的變化而變化

②小圖片怠益，圖片容量比較小

③加載量比較大

17、清除浮動(dòng)的幾種方式瘾婿，各自的優(yōu)缺點(diǎn)

（1）父級(jí)div定義height蜻牢。

（2）結(jié)尾處加空div標(biāo)簽clear:both。

（3）父級(jí)div定義偽類: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饥脑。

比較好的是第3種方式恳邀，好多網(wǎng)站都這么用。

18灶轰、Doctype作用谣沸？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

①<!DOCTYPE>告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)笋颤。

②標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行乳附。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作伴澄。

注意點(diǎn)：

HTML5 只需要寫不需要對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會(huì)阻塞主頁面的Onload事件祭犯，搜索引擎的檢索程序無法解讀這種頁面，不利于SEO滚停；

②iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制粥惧，所以會(huì)影響頁面的并行加載键畴。

使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe突雪，最好是通過javascript動(dòng)態(tài)給iframe添加src屬性值起惕，這樣可以繞開以上兩個(gè)問題。

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

①通過WebSocket惹想、SharedWorker來實(shí)現(xiàn)；

②也可以調(diào)用localstorge督函、cookies等本地存儲(chǔ)方式嘀粱。

localstorge另一個(gè)瀏覽上下文（另一個(gè)標(biāo)簽頁）里被添加、修改或刪除時(shí)辰狡，它都會(huì)觸發(fā)一個(gè)事件锋叨，我們通過監(jiān)聽事件，控制它的值來進(jìn)行頁面信息通信宛篇。

注意quirks：Safari 在無痕模式下設(shè)置localstorge值時(shí)會(huì)拋出 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代碼，如下

js 語句

②引入寫好的js文件鸵鸥，使用語句

也是直接放入到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)：==不會(huì)判斷類型，而===會(huì)判斷類型

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、如何動(dòng)態(tài)操作表格赠堵？

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

10揍愁、String.match與RegExp.exec有何區(qū)別呐萨？

match只會(huì)返回沒有分組的全部匹配結(jié)果或者有分組的第一次匹配結(jié)果；

而exec可以利用循環(huán)返回全部匹配結(jié)果莽囤。

11谬擦、為驗(yàn)證手機(jī)號(hào)寫一個(gè)正則。

function checkSubmitMobil() {if($("#phoneNum").val() =="") { alert("手機(jī)號(hào)碼不能為空朽缎！");//$("#moileMsg").html("<font color='red'>手機(jī)號(hào)碼不能為空惨远！</font>");? $("#mobile").focus();returnfalse;? }if(!$("#phoneNum").val().match(/^(?:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/)) { alert("手機(jī)號(hào)碼格式不正確！");//$("#moileMsg").html("<font color='red'>手機(jī)號(hào)碼格式不正確话肖！請重新輸入北秽！</font>"); $("#phoneNum").focus();returnfalse;? }returntrue;}

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

i：不區(qū)分大小寫羡儿；

g：全局匹配。

13是钥、為String添加trim()方法掠归。

String.prototype.trim =function(){returnthis.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í)間間隔朋贬，它還會(huì)自動(dòng)重復(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)聲明變量掌桩，外界是無法訪問的边锁，除非閉包主動(dòng)向外界提供訪問接口；

②.持久性：一般的函數(shù)波岛，調(diào)用完畢之后茅坛，系統(tǒng)自動(dòng)注銷函數(shù)，而對于閉包來說则拷，在外部函數(shù)被調(diào)用之后灰蛙，閉包結(jié)構(gòu)依然保存在；

對頁面的影響

使用閉包會(huì)占有內(nèi)存資源隔躲，過多的使用閉包會(huì)導(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(){varres = [];varjson = {};for(vari =0; i

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代碼

functionwhatBrowser(){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不會(huì)

sessionStorage和localStorage的存儲(chǔ)空間更大；

sessionStorage和localStorage有更多豐富易用的接口只锭；

sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間著恩；

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)目中一般會(huì)使用一些基礎(chǔ)類庫輔助實(shí)現(xiàn)霹俺，如jQuery等柔吼。

一個(gè)簡單的Ajax操作如下。

varxhr =newXMLHttpRequest();//在環(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) 是一種輕量級(jí)的數(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的核心則是動(dòng)態(tài)添加標(biāo)簽來調(diào)用服務(wù)器提供的js文件。

③Ajax與JSONP的區(qū)別也不在于是否跨域宴抚，Ajax通過服務(wù)端代理也可以跨域勒魔，JSONP也可獲取同源數(shù)據(jù)。具體請看一下參考：

【原創(chuàng)】說說json和jsonp,也許你會(huì)豁然開朗菇曲，含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)動(dòng)態(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ā)的話诊霹，會(huì)面臨很多問題羞延，如瀏覽器兼容、Ajax數(shù)據(jù)解析脾还、Dom伴箩、事件注冊操作等都非常煩鎖，而jQuery正好解決了這些問題晶乔。

③當(dāng)然jQuery還有非常有用的其它特性拗窃，如為dom對象綁定數(shù)據(jù)她奥、動(dòng)畫、等巩步。并且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(“

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ù)（對象）？

①通常會(huì)把這個(gè)數(shù)據(jù)轉(zhuǎn)換為通用的數(shù)據(jù)交換格式胳嘲，如xml或json厂僧。由于xml解析比較麻煩，所以使用json比較多了牛。

②在jQuery中有專門的獲取服務(wù)器json數(shù)據(jù)的方法颜屠，getJSON()，在回調(diào)中鹰祸，jQuery會(huì)自動(dòng)將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)頁已永久移動(dò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(動(dòng)態(tài)屬性)眶蕉。

（7） 圖片預(yù)加載砰粹，將樣式表放在頂部，將腳本放在底部? 加上時(shí)間戳造挽。

3碱璃、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

優(yōu)雅降級(jí)：Web站點(diǎn)在所有新式瀏覽器中都能正常工作饭入，如果用戶使用的是老式瀏覽器嵌器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問題谐丢，針對不同版本的IE的hack實(shí)踐過優(yōu)雅降級(jí)了,為那些無法支持功能的瀏覽器增加候選方案爽航，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效蚓让。

漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的讥珍。當(dāng)瀏覽器支持時(shí)历极，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(fā)揮作用。

4衷佃、哪些常見操作會(huì)造成內(nèi)存泄漏趟卸？

①內(nèi)存泄漏指任何對象在您不再擁有或需要它之后仍然存在。

②垃圾回收器定期掃描對象氏义，并計(jì)算引用了每個(gè)對象的其他對象的數(shù)量锄列。如果一個(gè)對象的引用數(shù)量為 0（沒有其他對象引用過該對象），或?qū)υ搶ο蟮奈┮灰檬茄h(huán)的觅赊，那么該對象的內(nèi)存即可回收。

③setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話琼稻，會(huì)引發(fā)內(nèi)存泄漏吮螺。

④閉包、控制臺(tái)日志帕翻、循環(huán)（在兩個(gè)對象彼此引用且彼此保留時(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í)行過程中擁有獨(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é)議會(huì)話

（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è)職位是怎么樣理解的耕捞？它的前景會(huì)怎么樣衔掸？

④對加班有何看法？

⑤有沒有對象俺抽？