很早之前就在看web前端面試題，一直想總結(jié)一個(gè)比較全面又詳細(xì)的面試題庫(kù)，現(xiàn)在總結(jié)了一些，分享給大家，以后還會(huì)持續(xù)更新，有些題目有多種答案，本文只給出其中一種，哪里有問題的歡迎指出。
Html&CSS
1、談?wù)勀銓?duì)web標(biāo)準(zhǔn)的理解
2、列舉html中至少三個(gè)實(shí)體
&、? 、<、>、?、?
詳細(xì)請(qǐng)看w3schoolHTML實(shí)體符號(hào)參考手冊(cè)
w3schoolHTML實(shí)體符號(hào)參考手冊(cè)
3、cellpadding與cellspacing有何區(qū)別？
cellpadding：代表單元格邊框到內(nèi)容之間的距離（留白）
cellspacing：cellspacing屬性用來(lái)指定表格各單元格之間的空隙。此屬性的參數(shù)值是數(shù)字，表示單元格間隙所占的像素點(diǎn)數(shù)。
4、CSS 選擇符有哪些？哪些屬性可以繼承？?jī)?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)頁(yè)中實(shí)現(xiàn)絕對(duì)定位？
absolute
7、table-layout、border-collapse有何用途？
①table-layout：設(shè)置表格是否自動(dòng)調(diào)整寬高
②border-collapse：表格與單元格及單元格間的邊框是否融合在一起。
8、簡(jiǎn)述盒模型
9、鏈接標(biāo)記target屬性的_top、_parent、_blank、main、left、top各有何用處?
10、你對(duì)瀏覽器兼容怎么看？通常你都做哪些處理？
11、get和post的區(qū)別？
GET：一般用于信息獲取，使用URL傳遞參數(shù)，對(duì)所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符
POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒有限制。
GET方式需要使用Request.QueryString來(lái)取得變量的值，而POST方式通過Request.Form來(lái)獲取變量的值，也就是說Get是通過地址欄來(lái)傳值，而Post是通過提交表單來(lái)傳值。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
①無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）。
②發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠。
12、xhtml和html有什么區(qū)別
①HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言,XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言
②最主要的不同：
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)的語(yǔ)氣）
常見空元素：
<br>/<hr>/<img>/<input>/<link>/<meta>
不常見空元素：
<area>/<base>/<col>/<command>/<embed>/<keygen>/<param>/<source>/<track>/<wbr>
行內(nèi)元素：會(huì)在水平方向排列，不能包含塊級(jí)元素，設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)，margin上下無(wú)效，padding上下無(wú)效。
塊級(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；
②頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載；
③import是CSS2.1 提出的，只在IE5以上才能被識(shí)別，而link是XHTML標(biāo)簽，無(wú)兼容問題；
④后者優(yōu)先級(jí)更高
15、你做的頁(yè)面在哪些流覽器測(cè)試過?這些瀏覽器的內(nèi)核分別是什么?介紹一下你對(duì)瀏覽器內(nèi)核的理解
Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit） opera(blink)
對(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è)瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核。
②JS引擎：解析和執(zhí)行javascript來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果。
最開始渲染引擎和JS引擎并沒有區(qū)分的很明確，后來(lái)JS引擎越來(lái)越獨(dú)立，內(nèi)核就傾向于只指渲染引擎。
16、解釋css sprites，如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務(wù)器對(duì)圖片的請(qǐng)求數(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)行。在兼容模式中，頁(yè)面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無(wú)法工作。
注意點(diǎn)：
HTML5 只需要寫不需要對(duì)DTD進(jìn)行引用，因?yàn)镠TML5不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行）。
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用,才能告知瀏覽器文檔所使用的文檔類型。
19、iframe有哪些缺點(diǎn)？
①iframe會(huì)阻塞主頁(yè)面的Onload事件，搜索引擎的檢索程序無(wú)法解讀這種頁(yè)面，不利于SEO；
②iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。
使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過javascript動(dòng)態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個(gè)問題。
20、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信?
①通過WebSocket、SharedWorker來(lái)實(shí)現(xiàn)；
②也可以調(diào)用localstorge、cookies等本地存儲(chǔ)方式。
localstorge另一個(gè)瀏覽上下文（另一個(gè)標(biāo)簽頁(yè)）里被添加、修改或刪除時(shí)，它都會(huì)觸發(fā)一個(gè)事件，我們通過監(jiān)聽事件，控制它的值來(lái)進(jìn)行頁(yè)面信息通信。
注意quirks：Safari 在無(wú)痕模式下設(shè)置localstorge值時(shí)會(huì)拋出 QuotaExceededError 的異常。
21、如何在頁(yè)面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域？
①map+area或者svg
②border-radius
③純js實(shí)現(xiàn) 需要求一個(gè)點(diǎn)在不在圓上簡(jiǎn)單算法、獲取鼠標(biāo)坐標(biāo)等等
22、CSS3有哪些新特性？
①? CSS3實(shí)現(xiàn)圓角（border-radius:8px），陰影（box-shadow:10px）；
②? 對(duì)文字加特效（text-shadow、），線性漸變（gradient），旋轉(zhuǎn)（transform）；
③? transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);
//旋轉(zhuǎn),縮放,定位,傾斜
④ 增加了更多的CSS選擇器? 多背景 rgba
Html5
1、Html5與html4相比，各有何優(yōu)缺點(diǎn)？ 怎樣處理html5新標(biāo)簽的兼容性問題？
html5余html4的異同請(qǐng)看以下的鏈接
兼容性問題
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如何使頁(yè)面跳轉(zhuǎn)?怎么引入一個(gè)外部JS文件?
①直接在head標(biāo)簽內(nèi)寫入js代碼，如下
<ScriptLanguage="JavaScript">js 語(yǔ)句</Script>
②引入寫好的js文件，使用語(yǔ)句
<scriptlanguage="JavaScript"src="test.js"></script>
也是直接放入到head標(biāo)簽里頭，也有的是放在</body>前面。
2、輸入框的驗(yàn)證用什么事件?
change(fn)
3、undefined與null有何異同？
null是一個(gè)表示"無(wú)"的對(duì)象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示"無(wú)"的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。
undefined：
（1）變量被聲明了，但沒有賦值時(shí)，就等于undefined。
（2) 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
（3）對(duì)象沒有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined。
null：
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象。
（2） 作為對(duì)象原型鏈的終點(diǎn)。
它們都表示空，轉(zhuǎn)換為boolean后都為false，但是null代表一個(gè)對(duì)象變量已經(jīng)被初始化，但未裝入對(duì)象；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?
7、Array的join、push、splice、slice各有何用途，splice與slice有何異同？
join：使用指定間隔符連接所有元素為字符串
push：在尾部添加元素并維護(hù)array實(shí)例的length
splice與slice都是截取一部分元素。不同的在于：slice返回截取后的新實(shí)例，splice在原array實(shí)例上操作，更詳細(xì)的請(qǐng)見下文鏈接。
8、如何阻止表單提交？
在onsubmit事件中返回false
9、如何動(dòng)態(tài)操作表格？
可以像普通dom一樣操作，但是因?yàn)楸砀竦膁om比較復(fù)雜，所以我通常是使用table的insertRow、deleteRow及tr對(duì)象的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)碼格式不正確！請(qǐng)重新輸入！</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、簡(jiǎn)述COOKIE。在JS中如何操作Cookie?
15、談?wù)刯avascript數(shù)組排序方法sort()的使用，重點(diǎn)介紹sort()參數(shù)的使用及其內(nèi)部機(jī)制。
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的語(yǔ)法相同。它們都有兩個(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ì)介紹請(qǐng)看下文鏈接
20、簡(jiǎn)述javascript的優(yōu)缺點(diǎn)。
優(yōu)點(diǎn)：簡(jiǎn)單易用，與Java有類似的語(yǔ)法，可以使用任何文本編輯工具編寫，只需要瀏覽器就可執(zhí)行程序，并且事先不用編譯，逐行執(zhí)行，無(wú)需進(jìn)行嚴(yán)格的變量聲明，而且內(nèi)置大量現(xiàn)成對(duì)象，編寫少量程序可以完成目標(biāo)；
缺點(diǎn)：不適合開發(fā)大型應(yīng)用程序；
21、Javascript有哪些內(nèi)置對(duì)象?
只有Math和Global（在瀏覽器環(huán)境中，Global就是Window）
22、列舉Javascript的本地對(duì)象。
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ū)別
①事件綁定就是針對(duì)dom元素的事件，綁定在dom元素上
②普通事件即為非針對(duì)dom元素的事件
27、事件委托是什么
利用事件冒泡的原理，讓自己的所觸發(fā)的事件，由他的父元素代替執(zhí)行！
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來(lái)做，這個(gè)事件本來(lái)是加在某些元素上的，然而你卻加到別人身上來(lái)做，完成這個(gè)事件。
例子請(qǐng)看以下鏈接
28、閉包是什么，有什么特性，對(duì)頁(yè)面有什么影響
什么是閉包
“官方”的解釋：所謂“閉包”，指的是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。
在 Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等語(yǔ)言中都能找到對(duì)閉包不同程度的支持。
通俗的講就是函數(shù)a的內(nèi)部函數(shù)b，被函數(shù)a外部的一個(gè)變量引用的時(shí)候，就創(chuàng)建了一個(gè)閉包。
閉包的特性：
①.封閉性：外界無(wú)法訪問閉包內(nèi)部的數(shù)據(jù)，如果在閉包內(nèi)聲明變量，外界是無(wú)法訪問的，除非閉包主動(dòng)向外界提供訪問接口；
②.持久性：一般的函數(shù)，調(diào)用完畢之后，系統(tǒng)自動(dòng)注銷函數(shù)，而對(duì)于閉包來(lái)說，在外部函數(shù)被調(diào)用之后，閉包結(jié)構(gòu)依然保存在；
對(duì)頁(yè)面的影響
使用閉包會(huì)占有內(nèi)存資源，過多的使用閉包會(huì)導(dǎo)致內(nèi)存溢出等。
詳細(xì)請(qǐng)看以下推薦鏈接
深入理解JavaScript的閉包特性 如何給循環(huán)中的對(duì)象添加事件
29、javascript的本地對(duì)象，內(nèi)置對(duì)象和宿主對(duì)象
①本地對(duì)象為array obj regexp等可以new實(shí)例化
②內(nèi)置對(duì)象為gload Math 等不可以實(shí)例化的
③宿主為瀏覽器自帶的document,window 等
30、編寫一個(gè)數(shù)組去重的方法
思路：
1.創(chuàng)建一個(gè)新的數(shù)組存放結(jié)果
2.創(chuàng)建一個(gè)空對(duì)象
3.for循環(huán)時(shí)，每次取出一個(gè)元素與對(duì)象進(jìn)行對(duì)比，如果這個(gè)元素不重復(fù)，則把它存放到結(jié)果數(shù)組中，同時(shí)把這個(gè)元素的內(nèi)容作為對(duì)象的一個(gè)屬性，并賦值為1，存入到第2步建立的對(duì)象中。
說明：至于如何對(duì)比，就是每次從原數(shù)組中取出一個(gè)元素，然后到對(duì)象中去訪問這個(gè)屬性，如果能訪問到值，則說明重復(fù)。
代碼如下：
Array.prototype.unique3=function(){varres=[];varjson={};for(vari=0;i<this.length;i++){if(!json[this[i]]){res.push(this[i]);json[this[i]]=1;}}returnres;}vararr=[112,112,34,'你好',112,112,34,'你好','str','str1'];alert(arr.unique3());
31、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；
32、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 +')');
33、new操作符具體干了什么呢?
①創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
②屬性和方法被加入到 this 引用的對(duì)象中。
③新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。
34、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)；
如何獲取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、請(qǐng)解釋一下 JavaScript 的同源策略
概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0，其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。
這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。指一段腳本只能讀取來(lái)自同一來(lái)源的窗口和文檔的屬性。
為什么要有同源限制？
我們舉例說明：比如一個(gè)黑客程序，他利用Iframe把真正的銀行登錄頁(yè)面嵌到他的頁(yè)面上，當(dāng)你使用真實(shí)的用戶名，密碼登錄時(shí)，他的頁(yè)面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。
36、請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
cookie在瀏覽器和服務(wù)器間來(lái)回傳遞。 sessionStorage和localStorage不會(huì)
sessionStorage和localStorage的存儲(chǔ)空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間；
Ajax
1、什么是Ajax？
Ajax（Asynchronous JavaScript + XML），即異步JavaScript + XML的縮寫，主要用來(lái)頁(yè)面異步刷新，也是構(gòu)建RIA的一種基礎(chǔ)技術(shù)。
2、如何使用Ajax從服務(wù)器獲取數(shù)據(jù)？
①創(chuàng)建XMLHttpRequest對(duì)象，注意兼容IE6的情況
②使用XMLHttpRequest對(duì)象的open方法，其中有三個(gè)參數(shù)：
a.字符串，代表html的請(qǐng)求:GET,POST。
b.要訪問的服務(wù)器的URL。
c.Boolean值，true表示異步，flase表示同步，一般情況下是異步，默認(rèn)為true。
③ajax的回調(diào)函數(shù)。xhr.readyState==4表示請(qǐng)求已經(jīng)結(jié)束，服務(wù)器響應(yīng)完成。
status表示http請(qǐng)求的狀態(tài)，200表示正常響應(yīng)；404表示資源找不到；500表示服務(wù)器端錯(cuò)誤。
④發(fā)送ajax請(qǐng)求。如果沒有數(shù)據(jù)，可以不傳或者傳遞null；如果post請(qǐng)求傳遞數(shù)據(jù)：首先設(shè)置xhr的請(qǐng)求頭信息：
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)為本地對(duì)象。XMLHttpRequest雖然不是W3C標(biāo)準(zhǔn)，但卻得到了FireFox、Safari、Opera、Konqueror、IE等絕大多數(shù)瀏覽器的支持。
4、談?wù)勀銓?duì)Ajax的理解。你在項(xiàng)目中如何使用Ajax？手寫一個(gè)簡(jiǎn)單的Ajax操作。
Ajax（Asynchronous JavaScript + XML），即異步JavaScript + XML的縮寫，主要用來(lái)頁(yè)面異步刷新，也是構(gòu)建RIA的一種基礎(chǔ)技術(shù)。因?yàn)樗婕盀g覽器兼容、跨域等問題，在項(xiàng)目中一般會(huì)使用一些基礎(chǔ)類庫(kù)輔助實(shí)現(xiàn)，如jQuery等。
一個(gè)簡(jiǎn)單的Ajax操作如下。
varxhr=newXMLHttpRequest();//在環(huán)境中需要做瀏覽器兼容，這里省略了xhr.onreadystatechange=function(){//這里注冊(cè)當(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)正常請(qǐng)求到資源時(shí)的處理,可以調(diào)用xhr.responseText或xhr.responseXml獲取數(shù)據(jù)}else{//當(dāng)請(qǐng)求資源失敗時(shí)的處理}}}xhr.open("GET",url);//設(shè)置xhr的請(qǐng)求方式和url,這里使用的是GET方式，//如果有參數(shù)，則連接在url后面/*
? 如果是POST請(qǐng)求，還當(dāng)設(shè)置請(qǐng)求的Content-Type
? 數(shù)據(jù)使用send作為參數(shù)發(fā)送
? */xhr.send();
5、談?wù)勀銓?duì)JSON的理解。
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。 易于人閱讀和編寫。同時(shí)也易于機(jī)器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個(gè)子集。 JSON采用完全獨(dú)立于語(yǔ)言的文本格式，但是也使用了類似于C語(yǔ)言家族的習(xí)慣（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 這些特性使JSON成為理想的數(shù)據(jù)交換語(yǔ)言。
所以它往往在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)頁(yè)到服務(wù)器的即時(shí)通信嗎？說說你都采用什么手段處理以及你所知道的處理辦法？
沒有用到，但我知道html的websockets、flash的socket、ajax長(zhǎng)輪詢等都可以實(shí)現(xiàn)。
8、你在AJAX中有遇到亂碼嗎？如果遇到，你是如何解決的？
①遇到過。
②一般我首先統(tǒng)一頁(yè)面和服務(wù)器編碼，對(duì)請(qǐng)求和響應(yīng)的Content-Type設(shè)置正確編碼；對(duì)請(qǐng)求參數(shù)進(jìn)行編碼處理。
9、解釋jsonp的原理，以及為什么不是真正的ajax
①Ajax與JSONP這兩種技術(shù)看起來(lái)很像，目的也一樣，都是請(qǐng)求一個(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)簽來(lái)調(diào)用服務(wù)器提供的js文件。
③Ajax與JSONP的區(qū)別也不在于是否跨域，Ajax通過服務(wù)端代理也可以跨域，JSONP也可獲取同源數(shù)據(jù)。具體請(qǐng)看一下參考：
【原創(chuàng)】說說json和jsonp,也許你會(huì)豁然開朗，含jQuery用例
10、ajax 有那些優(yōu)缺點(diǎn)?如何解決跨域問題?
優(yōu)點(diǎn)：
①通過異步模式，提升了用戶體驗(yàn).
②優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用.
③Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。
④Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）
缺點(diǎn)：
①安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
②對(duì)搜索引擎的支持比較弱。
③不容易調(diào)試。
跨域問題：
jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁(yè)面。
11、JavaScript原型，原型鏈 ? 有什么特點(diǎn)？
①原型對(duì)象也是普通的對(duì)象，是對(duì)象一個(gè)自帶隱式的proto屬性，原型也有可能有自己的原型，如果一個(gè)原型對(duì)象的原型不為null的話，我們就稱之為原型鏈。
②原型鏈?zhǔn)怯梢恍┯脕?lái)繼承和共享屬性的對(duì)象組成的（有限的）對(duì)象鏈。
JQuery
1、你使用過jQuery嗎？如果有，你為什么要使用jQuery呢？
①用過。
②如果使用原生javascript開發(fā)的話，會(huì)面臨很多問題，如瀏覽器兼容、Ajax數(shù)據(jù)解析、Dom、事件注冊(cè)操作等都非常煩鎖，而jQuery正好解決了這些問題。
③當(dāng)然jQuery還有非常有用的其它特性，如為dom對(duì)象綁定數(shù)據(jù)、動(dòng)畫、等。并且jQuery還非常容易擴(kuò)展，在它的基礎(chǔ)上開發(fā)非常靈活，也有眾多的插件可用，如jQueryUI、easyUI等。
2、Javascript與jQuery有什么區(qū)別？
jquery 就對(duì)javascript的一個(gè)擴(kuò)展，封裝，就是讓javascript更好用，更簡(jiǎn)單。
3、在jQuery中如何注冊(cè)事件？
使用bind()方法注冊(cè)事件，但通常我們使用與事件同名的方法注冊(cè)更方便，如：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、如何向頁(yè)面插入節(jié)點(diǎn)？
調(diào)用append方法，將新節(jié)點(diǎn)作為參數(shù)。
6、ajax、get、post、ajaxSetup、getJSON各有何用途？
①ajax：jQuery對(duì)ajax執(zhí)行的核心方法。其它ajax方法都是使用該方法實(shí)現(xiàn)。
②get：專門用于發(fā)送get請(qǐng)求的便捷方法。
③post：專門用于發(fā)送post請(qǐng)求的便捷方法。
④ajaxSetup：設(shè)置調(diào)用ajax方法時(shí)的默認(rèn)值。
⑤getJSON：專門用于向服務(wù)器請(qǐng)求json格式數(shù)據(jù)的便捷方法。
7、如何使用從服務(wù)器獲取一個(gè)復(fù)雜數(shù)據(jù)（對(duì)象）？
①通常會(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對(duì)象。
8、addClass、css有何用途？
①addClass：為元素設(shè)置class屬性，如果該元素已經(jīng)存在class屬性，則在其值后添加空格及新的class值。
②css：操作元素的style屬性的方法。
9、如何獲取一個(gè)元素的實(shí)際位置？
使用position()或offset()都可以。
10、bind()、unbind()、hover()有何用途？
bind()：注冊(cè)特定事件。
unbind()：刪除特定事件。
hover()：同時(shí)注冊(cè)鼠標(biāo)移入、移出事件。
11、你知道jQuery插件嗎？你了解jQuery執(zhí)行原理和插件機(jī)制嗎？你都用過哪些jQuery插件？
①知道jQuery插件。
②其原理是擴(kuò)展jQuery本身及其核心函數(shù)的原型實(shí)現(xiàn)?？梢哉{(diào)用其extend實(shí)現(xiàn)對(duì)它的擴(kuò)展。
③jQuery插件有很多，常見的有：jQueryUI、jQuery-Cookie、jQuery-Timer等。
其它
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è)未修改過。
400 Bad Request? 服務(wù)器無(wú)法理解請(qǐng)求的格式，客戶端不應(yīng)當(dāng)嘗試再次使用相同的內(nèi)容發(fā)起請(qǐng)求。
401 Unauthorized? 請(qǐng)求未授權(quán)。
403 Forbidden? 禁止訪問。
404 Not Found? 找不到如何與 URI 相匹配的資源。
500 Internal Server Error? 最常見的服務(wù)器端錯(cuò)誤。
503 Service Unavailable 服務(wù)器端暫時(shí)無(wú)法處理請(qǐng)求（可能是過載或維護(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é)果。減少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ú)特的盒模型布局問題，針對(duì)不同版本的IE的hack實(shí)踐過優(yōu)雅降級(jí)了,為那些無(wú)法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效。
漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁(yè)面增加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用。
4、哪些常見操作會(huì)造成內(nèi)存泄漏？
①內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。
②垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒有其他對(duì)象引用過該對(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í)行過程中擁有獨(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í)行控制。
⑤從邏輯角度來(lái)看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來(lái)實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別。
6、一個(gè)頁(yè)面從輸入 URL 到頁(yè)面加載顯示完成，這個(gè)過程中都發(fā)生了什么？
（1）查找瀏覽器緩存
（2）DNS解析、查找該域名對(duì)應(yīng)的IP地址、重定向（301）、發(fā)出第二個(gè)GET請(qǐng)求
（3）進(jìn)行HTTP協(xié)議會(huì)話
（4）客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭)
（5）服務(wù)器回饋報(bào)頭(響應(yīng)報(bào)頭)
（6）html文檔開始下載
（7）文檔樹建立，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類型的文件
（8）文件顯示
以下自行發(fā)揮
①為什么換工作
②你常用的開發(fā)工具是什么，為什么？
③對(duì)前端界面工程師這個(gè)職位是怎么樣理解的？它的前景會(huì)怎么樣？
④加班的看法？
⑤有沒有女朋友
在這里我還是要推薦下我自己的前端學(xué)習(xí)群：1127094789，不管你是小白還是大牛，小編我都挺歡迎，不定期分享干貨，包括我自己整理的一份2020最新的前端資料和零基礎(chǔ)入門教程，送給大家，歡迎初學(xué)和進(jìn)階中的小伙伴
