史上最全的web前端面試題匯總及答案一期

時(shí)間：2023-10-05 14:30:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-10-05 14:30:01 來源：網(wǎng)站運(yùn)營

史上最全的web前端面試題匯總及答案一期：很早之前就在看web前端面試題，一直想總結(jié)一個(gè)比較全面又詳細(xì)的面試題庫，現(xiàn)在總結(jié)了一些，分享給大家，以后還會(huì)持續(xù)更新，有些題目有多種答案，本文只給出其中一種，哪里有問題的歡迎指出。
Html&CSS
1、談?wù)勀銓?duì)web標(biāo)準(zhǔn)的理解

web標(biāo)準(zhǔn)的理解
2、列舉html中至少三個(gè)實(shí)體

&amp、&nbsp 、&lt、&gt、&reg、&copy
詳細(xì)請(qǐng)看w3schoolHTML實(shí)體符號(hào)參考手冊(cè)
w3schoolHTML實(shí)體符號(hào)參考手冊(cè)
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)絕對(duì)定位？

absolute
絕對(duì)定位與相對(duì)定位
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、你對(duì)瀏覽器兼容怎么看？通常你都做哪些處理？

瀏覽器的兼容性
11、get和post的區(qū)別？

GET：一般用于信息獲取，使用URL傳遞參數(shù)，對(duì)所發(fā)送信息的數(shù)量也有限制，一般在2000個(gè)字符
POST：一般用于修改服務(wù)器上的資源，對(duì)所發(fā)送的信息沒有限制。
GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
①無法使用緩存文件（更新服務(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)核分別是什么?介紹一下你對(duì)瀏覽器內(nèi)核的理解

Ie(Ie內(nèi)核) 火狐（Gecko） 谷歌（webkit） opera(blink)
對(duì)內(nèi)核的理解：
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
①渲染引擎：負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計(jì)算網(wǎng)頁的顯示方式，然后會(huì)輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對(duì)于網(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ù)器對(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)行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
注意點(diǎn)：
HTML5 只需要寫<!DOCTYPEHTML>不需要對(duì)DTD進(jìn)行引用，因?yàn)镠TML5不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）。
而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用,才能告知瀏覽器文檔所使用的文檔類型。
19、iframe有哪些缺點(diǎn)？

①iframe會(huì)阻塞主頁面的Onload事件，搜索引擎的檢索程序無法解讀這種頁面，不利于SEO；
②iframe和主頁面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(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）；
② 對(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
CSS3新增屬性
Html5
1、Html5與html4相比，各有何優(yōu)缺點(diǎn)？ 怎樣處理html5新標(biāo)簽的兼容性問題？

html5余html4的異同請(qǐng)看以下的鏈接
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è)表示"無"的對(duì)象，轉(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）對(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?

鏈接標(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ì)的請(qǐng)見下文鏈接。
JS中數(shù)組對(duì)象詳解
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(); return false; } 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(); 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í)間間隔，它還會(huì)自動(dòng)重復(fù)執(zhí)行代碼，而setTimeout只執(zhí)行一次那段代碼。
19、你在js中用過array嗎？如果用過，array中添加數(shù)據(jù)用什么方法？

在尾部添加使用push();
在頭部添加使用unshift();
在任意位置添加使用splice(),但要注意把它的刪除個(gè)數(shù)設(shè)置為0;
array詳細(xì)介紹請(qǐng)看下文鏈接
JS中數(shù)組對(duì)象詳解
20、簡述javascript的優(yōu)缺點(diǎn)。

優(yōu)點(diǎn)：簡單易用，與Java有類似的語法，可以使用任何文本編輯工具編寫，只需要瀏覽器就可執(zhí)行程序，并且事先不用編譯，逐行執(zhí)行，無需進(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，等就是事件，委托呢，就是讓別人來做，這個(gè)事件本來是加在某些元素上的，然而你卻加到別人身上來做，完成這個(gè)事件。
例子請(qǐng)看以下鏈接
JS中的事件委托
28、閉包是什么，有什么特性，對(duì)頁面有什么影響

什么是閉包
“官方”的解釋：所謂“閉包”，指的是一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。
在 Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等語言中都能找到對(duì)閉包不同程度的支持。
通俗的講就是函數(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ù)，而對(duì)于閉包來說，在外部函數(shù)被調(diào)用之后，閉包結(jié)構(gòu)依然保存在；
對(duì)頁面的影響
使用閉包會(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(){ 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對(duì)象的理解

①this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
②如果有new關(guān)鍵字，this指向new出來的那個(gè)對(duì)象；
③在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是，IE中的attachEvent中的this總是指向全局對(duì)象Window；
32、eval是做什么的？

①它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；
②應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(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代碼
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、請(qǐng)解釋一下 JavaScript 的同源策略

概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標(biāo)準(zhǔn)。它最早出自Netscape Navigator2.0，其目的是防止某個(gè)文檔或腳本從多個(gè)不同源裝載。
這里的同源策略指的是：協(xié)議，域名，端口相同，同源策略是一種安全協(xié)議。指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。
為什么要有同源限制？
我們舉例說明：比如一個(gè)黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當(dāng)你使用真實(shí)的用戶名，密碼登錄時(shí)，他的頁面就可以通過Javascript讀取到你的表單中input中的內(nèi)容，這樣用戶名，密碼就輕松到手了。
36、請(qǐng)描述一下 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對(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è)簡單的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操作如下。
var xhr = new XMLHttpRequest(); //在環(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ú)立于語言的文本格式，但是也使用了類似于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ù)器編碼，對(duì)請(qǐng)求和響應(yīng)的Content-Type設(shè)置正確編碼；對(duì)請(qǐng)求參數(shù)進(jìn)行編碼處理。
9、解釋jsonp的原理，以及為什么不是真正的ajax

①Ajax與JSONP這兩種技術(shù)看起來很像，目的也一樣，都是請(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)添加<script>標(biāo)簽來調(diào)用服務(wù)器提供的js文件。
③Ajax與JSONP的區(qū)別也不在于是否跨域，Ajax通過服務(wù)端代理也可以跨域，JSONP也可獲取同源數(shù)據(jù)。具體請(qǐng)看一下參考：
【原創(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é)。
②對(duì)搜索引擎的支持比較弱。
③不容易調(diào)試。
跨域問題：
jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面。
11、JavaScript原型，原型鏈 ? 有什么特點(diǎn)？

①原型對(duì)象也是普通的對(duì)象，是對(duì)象一個(gè)自帶隱式的 proto 屬性，原型也有可能有自己的原型，如果一個(gè)原型對(duì)象的原型不為null的話，我們就稱之為原型鏈。
②原型鏈?zhǔn)怯梢恍┯脕砝^承和共享屬性的對(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更好用，更簡單。
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(“<div>”)。
5、如何向頁面插入節(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)頁已永久移動(dòng)到新位置。
302 Found 臨時(shí)性重定向。
303 See Other 臨時(shí)性重定向，且總是使用 GET 請(qǐng)求新的 URI。
304 Not Modified 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁未修改過。
400 Bad Request 服務(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í)無法處理請(qǐng)求（可能是過載或維護(hù)）。
2、你有哪些性能優(yōu)化的方法

（1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁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í)了,為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效。
漸進(jìn)增強(qiáng)：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增加無害于基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來并發(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í)行控制。
⑤從邏輯角度來看，多線程的意義在于一個(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解析、查找該域名對(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ì)怎么樣？

④對(duì)加班有何看法？

⑤有沒有對(duì)象？