JavaEE
鴻蒙應(yīng)用開發(fā)
HTML&JS+前端
Python+大數(shù)據(jù)開發(fā)
人工智能開發(fā)
電商視覺設(shè)計(jì)
軟件測(cè)試
新媒體+短視頻
集成電路應(yīng)用開發(fā)
C/C++
狂野架構(gòu)師
IP短視頻
70道web前端開發(fā)面試題（2018版含答案）
更新時(shí)間:2018年11月27日14時(shí)54分 來源:傳智播客 瀏覽次數(shù):
1.一個(gè)200*200的div在不同分辨率屏幕上下左右居中，用css實(shí)現(xiàn)
div
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-50px;
height:-50px;
z-index:1000;
}
2.寫一個(gè)左中右布局占滿屏幕，其中左右兩塊是固定寬度200 ，中間自適應(yīng)寬，要求先加載中間塊，請(qǐng)寫出結(jié)構(gòu)及樣式：
<body>
<h3>實(shí)現(xiàn)三列寬度自適應(yīng)布局</h3>
<divid="left">我是左邊</div>
<divid="right">我是右邊</div>
<divid="center">我是中間</div>
</body>
html,body{margin:0px;width:100%;}
h3{height:100px;margin:20px00;}
#left,#right{width:200px;height:200px;background-color:#ffe6b8;position:absolute;top:120px;}
#left{left:0px;}
#right{right:0px;}
#center{margin:2px210px;background-color:#eee;height:200px;}
3.闡述清楚浮動(dòng)的幾種方式（常見問題）
1.父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題。
優(yōu)點(diǎn)：簡單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問題
2.父級(jí)div定義 overflow:hidden
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
4.結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動(dòng)布局多，就要增加很多空div，讓人感覺很不好
5.解釋css sprites ，如何使用？
CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗(yàn)，不需要加載更多的圖片
6.如何用原生js給一個(gè)按鈕綁定兩個(gè)onclick事件？
Var btn=document.getElementById(‘btn’);
//事件監(jiān)聽 綁定多個(gè)事件
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
7.拖拽會(huì)用到哪些事件
·dragstart:拖拽開始時(shí)在被拖拽元素上觸發(fā)此事件,監(jiān)聽器需要設(shè)置拖拽所需數(shù)據(jù),從操作系統(tǒng)拖拽文件到瀏覽器時(shí)不觸發(fā)此事件.
·dragenter:拖拽鼠標(biāo)進(jìn)入元素時(shí)在該元素上觸發(fā),用于給拖放元素設(shè)置視覺反饋,如高亮
·dragover:拖拽時(shí)鼠標(biāo)在目標(biāo)元素上移動(dòng)時(shí)觸發(fā).監(jiān)聽器通過阻止瀏覽器默認(rèn)行為設(shè)置元素為可拖放元素.
·dragleave:拖拽時(shí)鼠標(biāo)移出目標(biāo)元素時(shí)在目標(biāo)元素上觸發(fā).此時(shí)監(jiān)聽器可以取消掉前面設(shè)置的視覺效果.
·drag:拖拽期間在被拖拽元素上連續(xù)觸發(fā)
·drop:鼠標(biāo)在拖放目標(biāo)上釋放時(shí),在拖放目標(biāo)上觸發(fā).此時(shí)監(jiān)聽器需要收集數(shù)據(jù)并且執(zhí)行所需操作.如果是從操作系統(tǒng)拖放文件到瀏覽器,需要取消瀏覽器默認(rèn)行為.
·dragend:鼠標(biāo)在拖放目標(biāo)上釋放時(shí),在拖拽元素上觸發(fā).將元素從瀏覽器拖放到操作系統(tǒng)時(shí)不會(huì)觸發(fā)此事件.
8.請(qǐng)列舉jquery中的選擇器：
9.Javascript中的定時(shí)器有哪些？他們的區(qū)別及用法是什么？
setTimeout 只執(zhí)行一次
setInterval 會(huì)一直重復(fù)執(zhí)行
9.請(qǐng)描述一下 cookies sessionStorage和localstorage區(qū)別
相同點(diǎn)：都存儲(chǔ)在客戶端
不同點(diǎn)：1.存儲(chǔ)大小
·cookie數(shù)據(jù)大小不能超過4k。
·sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。
2.有效時(shí)間
·localStorage 存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)；
·sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。
·cookie 設(shè)置的cookie過期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉
3. 數(shù)據(jù)與服務(wù)器之間的交互方式
·cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端
·sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存。
10.計(jì)算一個(gè)數(shù)組arr所有元素的和
var arr1=[1,2,3,4,5,6,7,8,9];
var sum1=0;
for (var i=0;i<=arr1.length;i++) {
if (typeof arr1[i]=="number") {
sum1+=arr1[i];
}
}
document.write(sum1);
//====================================
functionsum2(arr){
var all=0;
for (var i=0;i<arr.length;i++) {
if (typeof arr[i]=="number") {
all+=arr[i];
}
}
returnall;
}
document.write(sum2([1,2,3,4]));
11.編寫一個(gè)方法去掉數(shù)組里面 重復(fù)的內(nèi)容 var arr=[1,2,3,4,5,1,2,3]
一個(gè)數(shù)組去重的簡單實(shí)現(xiàn)
var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定義一個(gè)新的數(shù)組
var s = [];
//遍歷數(shù)組
for(var i = 0;i<arr.length;i++){
if(s.indexOf(arr[i]) == -1){ //判斷在s數(shù)組中是否存在，不存在則push到s數(shù)組中
s.push(arr[i]);
}
}
console.log(s);
//輸出結(jié)果：["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]
方法二：用sort() 然后相鄰比較也可以實(shí)現(xiàn)
12.document.write和innerHTML的區(qū)別：
document.write是直接寫入到頁面的內(nèi)容流，如果在寫之前沒有調(diào)用document.open, 瀏覽器會(huì)自動(dòng)調(diào)用open。每次寫完關(guān)閉之后重新調(diào)用該函數(shù)，會(huì)導(dǎo)致頁面被重寫。
innerHTML則是DOM頁面元素的一個(gè)屬性，代表該元素的html內(nèi)容。你可以精確到某一個(gè)具體的元素來進(jìn)行更改。如果想修改document的內(nèi)容，則需要修改document.documentElement.innerElement。
innerHTML將內(nèi)容寫入某個(gè)DOM節(jié)點(diǎn)，不會(huì)導(dǎo)致頁面全部重繪
innerHTML很多情況下都優(yōu)于document.write，其原因在于其允許更精確的控制要刷新頁面的那一個(gè)部分。
13.ajax的步驟
什么是ajax
ajax(異步j(luò)avascript xml) 能夠刷新局部網(wǎng)頁數(shù)據(jù)而不是重新加載整個(gè)網(wǎng)頁。
如何使用ajax
第一步，創(chuàng)建xmlhttprequest對(duì)象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest對(duì)象用來和服務(wù)器交換數(shù)據(jù)。
var xhttp;
if (window.XMLHttpRequest) {
//現(xiàn)代主流瀏覽器
xhttp = new XMLHttpRequest();
} else {
// 針對(duì)瀏覽器，比如IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步，使用xmlhttprequest對(duì)象的open（）和send（）方法發(fā)送資源請(qǐng)求給服務(wù)器。
第三步，使用xmlhttprequest對(duì)象的responseText或responseXML屬性獲得服務(wù)器的響應(yīng)。
第四步，onreadystatechange函數(shù)，當(dāng)發(fā)送請(qǐng)求到服務(wù)器，我們想要服務(wù)器響應(yīng)執(zhí)行一些功能就需要使用onreadystatechange函數(shù)，每次xmlhttprequest對(duì)象的readyState發(fā)生改變都會(huì)觸發(fā)onreadystatechange函數(shù)
14.xml和json的區(qū)別，請(qǐng)用四個(gè)詞語來形容
·JSON相對(duì)于XML來講，數(shù)據(jù)的體積小，傳遞的速度更快些
·JSON與JavaScript的交互更加方便，更容易解析處理，更好的數(shù)據(jù)交互
·XML對(duì)數(shù)據(jù)描述性比較好；
·JSON的速度要遠(yuǎn)遠(yuǎn)快于XML
15.清楚浮動(dòng)的方法？(多次出現(xiàn)在面試題)
1.父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題。
優(yōu)點(diǎn)：簡單、代碼少、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度，如果高度和父級(jí)div不一樣時(shí)，會(huì)產(chǎn)生問題
2，結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁面浮動(dòng)布局多，就要增加很多空div，讓人感覺很不好
3，父級(jí)div定義 偽類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問題
優(yōu)點(diǎn)：瀏覽器支持好、不容易出現(xiàn)怪問題（目前：大型網(wǎng)站都有使用，如：騰迅，網(wǎng)易，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持
4，父級(jí)div定義 overflow:hidden
原理：必須定義width或zoom:1，同時(shí)不能定義height，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡單、代碼少、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏。
16.box-sizing常用的屬性有哪些？分別有什么作用？
屬性值
·box-sizing：content-box
·box-sizing：border-box
·box-sizing：inherit
content-box
·這是box-sizing的默認(rèn)屬性值
·是CSS2.1中規(guī)定的寬度高度的顯示行為
·在CSS中定義的寬度和高度就對(duì)應(yīng)到元素的內(nèi)容框
·在CSS中定義的寬度和高度之外繪制元素的內(nèi)邊距和邊框
border-box
·在CSS中微元素設(shè)定的寬度和高度就決定了元素的邊框盒
·即為元素在設(shè)置內(nèi)邊距和邊框是在已經(jīng)設(shè)定好的寬度和高度之內(nèi)進(jìn)行繪制
·CSS中設(shè)定的寬度和高度減去邊框和內(nèi)間距才能得到元素內(nèi)容所占的實(shí)際寬度和高度
(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)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
17.css選擇器有哪些，選擇器的權(quán)重的優(yōu)先級(jí)
選擇器類型
1、ID #id
2、class .class
3、標(biāo)簽 p
4、通用 *
5、屬性 [type="text"]
6、偽類 ：hover
7、偽元素 ::first-line
8、子選擇器、相鄰選擇器
三、權(quán)重計(jì)算規(guī)則
1.第一等：代表內(nèi)聯(lián)樣式，如: style=””，權(quán)值為1000。
2.第二等：代表ID選擇器，如：#content，權(quán)值為0100。
3.第三等：代表類，偽類和屬性選擇器，如.content，權(quán)值為0010。
4.第四等：代表類型選擇器和偽元素選擇器，如div p，權(quán)值為0001。
5.通配符、子選擇器、相鄰選擇器等的。如*、>、+,權(quán)值為0000。
6.繼承的樣式?jīng)]有權(quán)值。
18.塊級(jí)元素水平垂直居中的方法有哪些（三個(gè)方法）
讓div等塊級(jí)元素水平和垂直都居中，即永遠(yuǎn)處于屏幕的正中央，當(dāng)我們做如登錄塊時(shí)非常有用！
實(shí)現(xiàn)一、原理：要讓div等塊級(jí)元素水平和垂直居中，必需知道該div等塊級(jí)元素的寬度和高度，然后設(shè)置位置為絕對(duì)位置，距離頁面窗口左邊框和上邊框的距離設(shè)置為50%，這個(gè)50%就是指頁面窗口的寬度和高度的50%，最后將該div等塊級(jí)元素分別左移和上移，左移和上移的大小就是該div等塊級(jí)元素寬度和高度的一半。
CSS代碼：
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px }
實(shí)現(xiàn)二原理：利用CSS的margin設(shè)置為auto讓瀏覽器自己幫我們水平和垂直居中。
CSS代碼：
.mycss{
position:absolute;
left:0px;
right:0;
top:0;
bottom:0;
margin:auto;
height:200px;
width:300px;
}
jQuery實(shí)現(xiàn)水平和垂直居中
原理：jQuery實(shí)現(xiàn)水平和垂直居中的原理就是通過jQuery設(shè)置div等塊級(jí)元素的CSS，獲取div等塊級(jí)元素的左、上的邊距偏移量，邊距偏移量的算法就是用頁面窗口 的寬度減去該div等塊級(jí)元素的寬度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等塊級(jí)元素的CSS設(shè)置要在resize()方法中完成，就是每次改變窗口大 小時(shí)，都要執(zhí)行設(shè)置div等塊級(jí)元素的CSS。
jquery代碼：
$(window).resize(function(){
$(".myblock").css({
position: "absolute",
left: ($(window).width() - $(".myblock").outerWidth())/2,
top: ($(window).height() - $(".myblock").outerHeight())/2 });
});
此外在頁面載入時(shí)，就需要調(diào)用resize()方法
$(function(){
$(window).resize();
});
19.三個(gè)盒子，左右定寬，中間自適應(yīng)有幾種方法
第一種：左右側(cè)采用浮動(dòng) 中間采用margin-left 和 margin-right 方法。
代碼如下：
<div style="width:100%; margin:0 auto;">
<div style="width:200px; float:right; background-color:#960">這是右側(cè)的內(nèi)容 固定寬度</div>
<div style="width:150px; float:left; background:#6FF">這是左側(cè)的內(nèi)容 固定寬度</div>
<div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內(nèi)容，自適應(yīng)寬度</div>
</div>
第二種：左右兩側(cè)采用絕對(duì)定位中間同樣采用margin-left margin-right方法：
第三種負(fù)的margin
使用這種方法就稍微復(fù)雜了一些了，使用的是負(fù)的margin值，而且html標(biāo)簽也增加了，先來看其代碼吧：
<div id="main">
<div id="mainContainer">main content</div></div><div id="left">
<div id="leftContainer"class="inner">left content</div></div><div id="right">
<div id="rightContainer"class="inner">right</div></div>
#main {
float:left;
width:100%;
}
#mainContainer {
margin:0 230px;
height:200px;
background:green;
}
#left {
float:left;
margin-left:-100%;
width:230px}
#right {
float:left;
margin-left:-230px;
width:230px;
}
#left .inner,
#right .inner {
background:orange;
margin:0 10px;
height:200px;
}
20.js有幾種數(shù)據(jù)類型，其中基本數(shù)據(jù)類型有哪些
五種基本類型:Undefined、Null、Boolean、Number和String。
1中復(fù)雜的數(shù)據(jù)類型————Object，Object本質(zhì)上是由一組無序的名值對(duì)組成的。
Object、Array和Function則屬于引用類型
21.undefined 和 null 區(qū)別
null： Null類型，代表“空值”，代表一個(gè)空對(duì)象指針，使用typeof運(yùn)算得到 “object”，所以你可以認(rèn)為它是一個(gè)特殊的對(duì)象值。
undefined： Undefined類型，當(dāng)一個(gè)聲明了一個(gè)變量未初始化時(shí)，得到的就是undefined。
null是javascript的關(guān)鍵字，可以認(rèn)為是對(duì)象類型，它是一個(gè)空對(duì)象指針，和其它語言一樣都是代表“空值”，不過 undefined 卻是javascript才有的。undefined是在ECMAScript第三版引入的，為了區(qū)分空指針對(duì)象和未初始化的變量，它是一個(gè)預(yù)定義的全局變量。沒有返回值的函數(shù)返回為undefined，沒有實(shí)參的形參也是undefined。
javaScript權(quán)威指南： null 和 undefined 都表示“值的空缺”，你可以認(rèn)為undefined是表示系統(tǒng)級(jí)的、出乎意料的或類似錯(cuò)誤的值的空缺，而null是表示程序級(jí)的、正常的或在意料之中的值的空缺。
22.http 和 https 有何區(qū)別？如何靈活使用？
http是HTTP協(xié)議運(yùn)行在TCP之上。所有傳輸?shù)膬?nèi)容都是明文，客戶端和服務(wù)器端都無法驗(yàn)證對(duì)方的身份。
https是HTTP運(yùn)行在SSL/TLS之上，SSL/TLS運(yùn)行在TCP之上。所有傳輸?shù)膬?nèi)容都經(jīng)過加密，加密采用對(duì)稱加密，但對(duì)稱加密的密鑰用服務(wù)器方的證書進(jìn)行了非對(duì)稱加密。此外客戶端可以驗(yàn)證服務(wù)器端的身份，如果配置了客戶端驗(yàn)證，服務(wù)器方也可以驗(yàn)證客戶端的身份
23.常見的HTTP狀態(tài)碼
2開頭 （請(qǐng)求成功）表示成功處理了請(qǐng)求的狀態(tài)代碼。
200 （成功） 服務(wù)器已成功處理了請(qǐng)求。 通常，這表示服務(wù)器提供了請(qǐng)求的網(wǎng)頁。
201 （已創(chuàng)建） 請(qǐng)求成功并且服務(wù)器創(chuàng)建了新的資源。
202 （已接受） 服務(wù)器已接受請(qǐng)求，但尚未處理。
203 （非授權(quán)信息） 服務(wù)器已成功處理了請(qǐng)求，但返回的信息可能來自另一來源。
204 （無內(nèi)容） 服務(wù)器成功處理了請(qǐng)求，但沒有返回任何內(nèi)容。
205 （重置內(nèi)容） 服務(wù)器成功處理了請(qǐng)求，但沒有返回任何內(nèi)容。
206 （部分內(nèi)容） 服務(wù)器成功處理了部分 GET 請(qǐng)求。
3開頭 （請(qǐng)求被重定向）表示要完成請(qǐng)求，需要進(jìn)一步操作。 通常，這些狀態(tài)代碼用來重定向。
300 （多種選擇） 針對(duì)請(qǐng)求，服務(wù)器可執(zhí)行多種操作。 服務(wù)器可根據(jù)請(qǐng)求者 (user agent) 選擇一項(xiàng)操作，或提供操作列表供請(qǐng)求者選擇。
301 （永久移動(dòng)） 請(qǐng)求的網(wǎng)頁已永久移動(dòng)到新位置。 服務(wù)器返回此響應(yīng)（對(duì) GET 或 HEAD 請(qǐng)求的響應(yīng)）時(shí)，會(huì)自動(dòng)將請(qǐng)求者轉(zhuǎn)到新位置。
302 （臨時(shí)移動(dòng)） 服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請(qǐng)求。
303 （查看其他位置） 請(qǐng)求者應(yīng)當(dāng)對(duì)不同的位置使用單獨(dú)的 GET 請(qǐng)求來檢索響應(yīng)時(shí)，服務(wù)器返回此代碼。
304 （未修改） 自從上次請(qǐng)求后，請(qǐng)求的網(wǎng)頁未修改過。 服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁內(nèi)容。
305 （使用代理） 請(qǐng)求者只能使用代理訪問請(qǐng)求的網(wǎng)頁。 如果服務(wù)器返回此響應(yīng)，還表示請(qǐng)求者應(yīng)使用代理。
307 （臨時(shí)重定向） 服務(wù)器目前從不同位置的網(wǎng)頁響應(yīng)請(qǐng)求，但請(qǐng)求者應(yīng)繼續(xù)使用原有位置來進(jìn)行以后的請(qǐng)求。
4開頭 （請(qǐng)求錯(cuò)誤）這些狀態(tài)代碼表示請(qǐng)求可能出錯(cuò)，妨礙了服務(wù)器的處理。
400 （錯(cuò)誤請(qǐng)求） 服務(wù)器不理解請(qǐng)求的語法。
401 （未授權(quán)） 請(qǐng)求要求身份驗(yàn)證。 對(duì)于需要登錄的網(wǎng)頁，服務(wù)器可能返回此響應(yīng)。
403 （禁止） 服務(wù)器拒絕請(qǐng)求。
404 （未找到） 服務(wù)器找不到請(qǐng)求的網(wǎng)頁。
405 （方法禁用） 禁用請(qǐng)求中指定的方法。
406 （不接受） 無法使用請(qǐng)求的內(nèi)容特性響應(yīng)請(qǐng)求的網(wǎng)頁。
407 （需要代理授權(quán)） 此狀態(tài)代碼與 401（未授權(quán)）類似，但指定請(qǐng)求者應(yīng)當(dāng)授權(quán)使用代理。
408 （請(qǐng)求超時(shí)） 服務(wù)器等候請(qǐng)求時(shí)發(fā)生超時(shí)。
409 （沖突） 服務(wù)器在完成請(qǐng)求時(shí)發(fā)生沖突。 服務(wù)器必須在響應(yīng)中包含有關(guān)沖突的信息。
410 （已刪除） 如果請(qǐng)求的資源已永久刪除，服務(wù)器就會(huì)返回此響應(yīng)。
411 （需要有效長度） 服務(wù)器不接受不含有效內(nèi)容長度標(biāo)頭字段的請(qǐng)求。
412 （未滿足前提條件） 服務(wù)器未滿足請(qǐng)求者在請(qǐng)求中設(shè)置的其中一個(gè)前提條件。
413 （請(qǐng)求實(shí)體過大） 服務(wù)器無法處理請(qǐng)求，因?yàn)檎?qǐng)求實(shí)體過大，超出服務(wù)器的處理能力。
414 （請(qǐng)求的 URI 過長） 請(qǐng)求的 URI（通常為網(wǎng)址）過長，服務(wù)器無法處理。
415 （不支持的媒體類型） 請(qǐng)求的格式不受請(qǐng)求頁面的支持。
416 （請(qǐng)求范圍不符合要求） 如果頁面無法提供請(qǐng)求的范圍，則服務(wù)器會(huì)返回此狀態(tài)代碼。
417 （未滿足期望值） 服務(wù)器未滿足"期望"請(qǐng)求標(biāo)頭字段的要求。
5開頭（服務(wù)器錯(cuò)誤）這些狀態(tài)代碼表示服務(wù)器在嘗試處理請(qǐng)求時(shí)發(fā)生內(nèi)部錯(cuò)誤。 這些錯(cuò)誤可能是服務(wù)器本身的錯(cuò)誤，而不是請(qǐng)求出錯(cuò)。
500 （服務(wù)器內(nèi)部錯(cuò)誤） 服務(wù)器遇到錯(cuò)誤，無法完成請(qǐng)求。
501 （尚未實(shí)施） 服務(wù)器不具備完成請(qǐng)求的功能。 例如，服務(wù)器無法識(shí)別請(qǐng)求方法時(shí)可能會(huì)返回此代碼。
502 （錯(cuò)誤網(wǎng)關(guān)） 服務(wù)器作為網(wǎng)關(guān)或代理，從上游服務(wù)器收到無效響應(yīng)。
503 （服務(wù)不可用） 服務(wù)器目前無法使用（由于超載或停機(jī)維護(hù)）。 通常，這只是暫時(shí)狀態(tài)。
504 （網(wǎng)關(guān)超時(shí)） 服務(wù)器作為網(wǎng)關(guān)或代理，但是沒有及時(shí)從上游服務(wù)器收到請(qǐng)求。
505 （HTTP 版本不受支持） 服務(wù)器不支持請(qǐng)求中所用的 HTTP 協(xié)議版本。
24.如何進(jìn)行網(wǎng)站性能優(yōu)化
1. 從用戶角度而言，優(yōu)化能夠讓頁面加載得更快、對(duì)用戶的操作響應(yīng)得更及時(shí)，能夠給用戶提供更為友好的體驗(yàn)。
2. 從服務(wù)商角度而言，優(yōu)化能夠減少頁面請(qǐng)求數(shù)、或者減小請(qǐng)求所占帶寬，能夠節(jié)省可觀的資源。
總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。
前端優(yōu)化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級(jí)別的優(yōu)化，例如 HTTP請(qǐng)求數(shù)、腳本的無阻塞加載、內(nèi)聯(lián)腳本的位置優(yōu)化等 ;第二類則是代碼級(jí)別的優(yōu)化，例如 Javascript中的DOM 操作優(yōu)化、CSS選擇符優(yōu)化、圖片優(yōu)化以及 HTML結(jié)構(gòu)優(yōu)化等等。另外，本著提高投入產(chǎn)出比的目的，后文提到的各種優(yōu)化策略大致按照投入產(chǎn)出比從大到小的順序排列。
一、頁面級(jí)優(yōu)化
1. JavaScript 壓縮和模塊打包
2. 按需加載資源
3. 在使用 DOM 操作庫時(shí)用上 array-ids
4. 緩存
5. 啟用 HTTP/2
6. 應(yīng)用性能分析
7. 使用負(fù)載均衡方案
8. 為了更快的啟動(dòng)時(shí)間考慮一下同構(gòu)
9. 使用索引加速數(shù)據(jù)庫查詢
10. 使用更快的轉(zhuǎn)譯方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用于未來的一個(gè)建議：使用 service workers + 流
13. 圖片編碼優(yōu)化
25.react和vue有哪些不同，說說你對(duì)這兩個(gè)框架的看法
相同點(diǎn)
·都支持服務(wù)器端渲染
·都有Virtual DOM,組件化開發(fā),通過props參數(shù)進(jìn)行父子組件數(shù)據(jù)的傳遞,都實(shí)現(xiàn)webComponent規(guī)范
·數(shù)據(jù)驅(qū)動(dòng)視圖
·都有支持native的方案,React的React native,Vue的weex
不同點(diǎn)
·React嚴(yán)格上只針對(duì)MVC的view層,Vue則是MVVM模式
·virtual DOM不一樣,vue會(huì)跟蹤每一個(gè)組件的依賴關(guān)系,不需要重新渲染整個(gè)組件樹.而對(duì)于React而言,每當(dāng)應(yīng)用的狀態(tài)被改變時(shí),全部組件都會(huì)重新渲染,所以react中會(huì)需要shouldComponentUpdate這個(gè)生命周期函數(shù)方法來進(jìn)行控制
·組件寫法不一樣, React推薦的做法是 JSX + inline style, 也就是把HTML和CSS全都寫進(jìn)JavaScript了,即'all in js'; Vue推薦的做法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個(gè)文件;
·數(shù)據(jù)綁定: vue實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定,react數(shù)據(jù)流動(dòng)是單向的
·state對(duì)象在react應(yīng)用中不可變的,需要使用setState方法更新狀態(tài);在vue中,state對(duì)象不是必須的,數(shù)據(jù)由data屬性在vue對(duì)象中管理
26.什么是mvvm mvc是什么區(qū)別 原理
一、MVC（Model-View-Controller）
MVC是比較直觀的架構(gòu)模式，用戶操作->View（負(fù)責(zé)接收用戶的輸入操作）->Controller（業(yè)務(wù)邏輯處理）->Model（數(shù)據(jù)持久化）->View（將結(jié)果反饋給View）。
MVC使用非常廣泛，比如JavaEE中的SSH框架
三、MVVM（Model-View-ViewModel）
如果說MVP是對(duì)MVC的進(jìn)一步改進(jìn)，那么MVVM則是思想的完全變革。它是將“數(shù)據(jù)模型數(shù)據(jù)雙向綁定”的思想作為核心，因此在View和Model之間沒有聯(lián)系，通過ViewModel進(jìn)行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖的數(shù)據(jù)的變化會(huì)同時(shí)修改數(shù)據(jù)源，而數(shù)據(jù)源數(shù)據(jù)的變化也會(huì)立即反應(yīng)view。
27.px和em的區(qū)別
px表示像素 (計(jì)算機(jī)屏幕上的一個(gè)點(diǎn)：1px = 1/96in)，是絕對(duì)單位，不會(huì)因?yàn)槠渌氐某叽缱兓兓?br /> ·
·
em表示相對(duì)于父元素的字體大小。em是相對(duì)單位 ，沒有一個(gè)固定的度量值，而是由其他元素尺寸來決定的相對(duì)值。
28.優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
漸進(jìn)增強(qiáng)（Progressive Enhancement）：一開始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互、追加功能達(dá)到更好的體驗(yàn)。
優(yōu)雅降級(jí)（Graceful Degradation）：一開始就構(gòu)建站點(diǎn)的完整功能，然后針對(duì)瀏覽器測(cè)試和修復(fù)。比如一開始使用 CSS3 的特性構(gòu)建了一個(gè)應(yīng)用，然后逐步針對(duì)各大瀏覽器進(jìn)行 hack 使其可以在低版本瀏覽器上正常瀏覽。
其實(shí)漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)并非什么新概念，只是舊的概念換了一個(gè)新的說法。在傳統(tǒng)軟件開發(fā)中，經(jīng)常會(huì)提到向上兼容和向下兼容的概念。漸進(jìn)增強(qiáng)相當(dāng)于向上兼容，而優(yōu)雅降級(jí)相當(dāng)于向下兼容
29.eval()的作用
把字符串參數(shù)解析成JS代碼并運(yùn)行，并返回執(zhí)行的結(jié)果；
eval("2+3");//執(zhí)行加運(yùn)算，并返回運(yùn)算值。
eval("varage=10");//聲明一個(gè)age變量
eval的作用域
functiona(){
1.eval("varx=1");//等效于varx=1;
2.console.log(x);//輸出1
3.}
4.a();
5.console.log(x);//錯(cuò)誤x沒有定
30.JS哪些操作會(huì)造成內(nèi)存泄露
1）意外的全局變量引起的內(nèi)存泄露
functionleak(){
leak="xxx";//leak成為一個(gè)全局變量，不會(huì)被回收
}
2）閉包引起的內(nèi)存泄露
3）3）沒有清理的DOM元素引用
4）被遺忘的定時(shí)器或者回調(diào)5）子元素存在引起的內(nèi)存泄露
31.瀏覽器緩存有哪些，通常緩存有哪幾種
一、http緩存
二、websql
cookie
localstorage
sessionstorage
flash緩存
32:bootstrap響應(yīng)式實(shí)現(xiàn)的原理
百分比布局+媒體查詢
33.關(guān)于JS事件冒泡與JS事件代理（事件委托）
事件作為DOM操作重要的一環(huán)，需要大家好好理解和運(yùn)用，今天特意看了一下事件冒泡和事件代理的相關(guān)資料，感觸頗深，也深感自己的無知不知道多浪費(fèi)了多少內(nèi)存，廢話不多說進(jìn)入正題：
1.事件冒泡：
通俗易懂的來講，就是當(dāng)一個(gè)子元素的事件被觸發(fā)的時(shí)候（如onclick事件），該事件會(huì)從事件源（被點(diǎn)擊的子元素）開始逐級(jí)向上傳播，觸發(fā)父級(jí)元素的點(diǎn)擊事件。
2.事件委托
事件委托，首先按字面的意思就能看你出來，是將事件交由別人來執(zhí)行，再聯(lián)想到上面講的事件冒泡，是不是想到了？對(duì)，就是將子元素的事件通過冒泡的形式交由父元素來執(zhí)行。下面經(jīng)過詳細(xì)的例子來說明事件委托：
有可能在開發(fā)的時(shí)候會(huì)遇到這種情況：如導(dǎo)航每一個(gè)欄目都要加一個(gè)事件，你可能會(huì)通過遍歷來給每個(gè)欄目添加事件：
事件委托是怎
1.varul=document.getElementById('parentUl');
2.ul.onclick=function(event){
3.vare=event||window.event,
4.source=e.target||e.srcElement;//target表示在事件冒泡中觸發(fā)事件的源元素，在IE中是srcElement
5.if(source.nodeName.toLowerCase()=="li"){//判斷只有l(wèi)i觸發(fā)的才會(huì)輸出內(nèi)容
6.alert(source.innerHTML);
7.}
8.stopPropagation(e);//阻止繼續(xù)冒泡
9.};
10.functionaddElement(){
11.varli=document.createElement('li');
12.li.innerHTML="我是新孩子";
13.ul.appendChild(li);
14.}
34.CSS樣式覆蓋規(guī)則
規(guī)則一：由于繼承而發(fā)生樣式?jīng)_突時(shí)，最近祖先獲勝。
規(guī)則二：繼承的樣式和直接指定的樣式?jīng)_突時(shí)，直接指定的樣式獲勝
規(guī)則三：直接指定的樣式發(fā)生沖突時(shí)，樣式權(quán)值高者獲勝。
樣式的權(quán)值取決于樣式的選擇器，權(quán)值定義如下表。
CSS選擇器權(quán)值
標(biāo)簽選擇器1
類選擇器10
ID選擇器100
內(nèi)聯(lián)樣式1000
偽元素(:first-child等)1
偽類(:link等)10
可以看到，內(nèi)聯(lián)樣式的權(quán)值>>ID選擇器>>類選擇器>>標(biāo)簽選擇器，除此以外，后代選擇器的權(quán)值為每項(xiàng)權(quán)值之和，比如”#nav .current a”的權(quán)值為100 + 10 + 1 = 111。
規(guī)則四：樣式權(quán)值相同時(shí)，后者獲勝。
規(guī)則五：!important的樣式屬性不被覆蓋。
!important可以看做是萬不得已的時(shí)候，打破上述四個(gè)規(guī)則的”金手指”。如果你一定要采用某個(gè)樣式屬性，而不讓它被覆蓋的，可以在屬性值后加上!important，以規(guī)則四的例子為例，”.byline a {color:red !important;}”可以強(qiáng)行使鏈接顯示紅色。大多數(shù)情況下都可以通過其他方式來控制樣式的覆蓋，不能濫用!important。
35.介紹一下box-sizing屬性
兼容問題
首先，box-sizing屬性在FireFox中存在兼容問題，所以需要使用-moz-box-sizing做一下兼容。
屬性值
·box-sizing：content-box
·box-sizing：border-box
·box-sizing：inherit
content-box
·這是box-sizing的默認(rèn)屬性值
·是CSS2.1中規(guī)定的寬度高度的顯示行為
·在CSS中定義的寬度和高度就對(duì)應(yīng)到元素的內(nèi)容框
·在CSS中定義的寬度和高度之外繪制元素的內(nèi)邊距和邊框
border-box
·在CSS中微元素設(shè)定的寬度和高度就決定了元素的邊框盒
·即為元素在設(shè)置內(nèi)邊距和邊框是在已經(jīng)設(shè)定好的寬度和高度之內(nèi)進(jìn)行繪制
·CSS中設(shè)定的寬度和高度減去邊框和內(nèi)間距才能得到元素內(nèi)容所占的實(shí)際寬度和高度
36.css選擇符有哪些？優(yōu)先級(jí)算法如何計(jì)算？（常見）
37.請(qǐng)簡要描述margin重合問題，及解決方式
1.同向margin的重疊：
1圖片的margin-top與3圖片的margin-top發(fā)生重疊，2圖片的margin-bottom與3圖片的margin-bottom發(fā)生重疊。這時(shí)候重疊之后的margin值由發(fā)生重疊兩片的最大值決定；如果其中一個(gè)出現(xiàn)負(fù)值，則由最大的正邊距減去絕對(duì)值最大的負(fù)邊距，如果沒有最大正邊距，則由0減去絕對(duì)值最大的負(fù)邊距。
解決同向重疊的方法：
（1）在最外層的div中加入overflow:hidden;zoom:1
?。?）在最外層加入padding:1px;屬性
?。?）在最外層加入：border:1px solid #cacbcc;
2.異向重疊問題：
1圖片的margin-bottom與2圖片的margin-top發(fā)生重疊，這時(shí)候重疊之后的margin值由發(fā)生重疊兩圖片的最大值的決定的。
解決異向重疊問題：
float:left（只能解決IE6瀏覽器中的異向重疊問題，可以解決IE8以上、chorme、firefox、opera下的同向重疊問題）
38：position的值，relative\absolute\fixed分別相對(duì)于進(jìn)行誰定位，有什么區(qū)別，什么時(shí)候用？
39.解釋下CSSsprites，以及你要如何在頁面或網(wǎng)站中使用它。
CSSSprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置
40.什么是閉包，如何使用它，為什么要使用它？
包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”。
所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中。
使用閉包的注意點(diǎn)：
·由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
·閉包會(huì)在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對(duì)象（object）使用，把閉包當(dāng)作它的公用方法（PublicMethod），把內(nèi)部變量當(dāng)作它的私有屬性（privatevalue），這時(shí)一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。
41.請(qǐng)解釋JSONP的工作原理，以及它為什么不是真正的AJAX。
JSONP (JSON with Padding)是一個(gè)簡單高效的跨域方式，HTML中的script標(biāo)簽可以加載并執(zhí)行其他域的javascript，于是我們可以通過script標(biāo)記來動(dòng)態(tài)加載其他域的資源。例如我要從域A的頁面pageA加載域B的數(shù)據(jù)，那么在域B的頁面pageB中我以JavaScript的形式聲明pageA需要的數(shù)據(jù)，然后在 pageA中用script標(biāo)簽把pageB加載進(jìn)來，那么pageB中的腳本就會(huì)得以執(zhí)行。JSONP在此基礎(chǔ)上加入了回調(diào)函數(shù)，pageB加載完之后會(huì)執(zhí)行pageA中定義的函數(shù)，所需要的數(shù)據(jù)會(huì)以參數(shù)的形式傳遞給該函數(shù)。JSONP易于實(shí)現(xiàn)，但是也會(huì)存在一些安全隱患，如果第三方的腳本隨意地執(zhí)行，那么它就可以篡改頁面內(nèi)容，截獲敏感數(shù)據(jù)。但是在受信任的雙方傳遞數(shù)據(jù)，JSONP是非常合適的選擇。
AJAX是不跨域的，而JSONP是一個(gè)是跨域的，還有就是二者接收參數(shù)形式不一樣！
42.請(qǐng)解釋一下JavaScript的同源策略。
在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個(gè)很重要的安全理念，它在保證數(shù)據(jù)的安全性方面有著重要的意義。同源策略規(guī)定跨域之間的腳本是隔離的，一個(gè)域的腳本不能訪問和操作另外一個(gè)域的絕大部分屬性和方法。那么什么叫相同域，什么叫不同的域呢？當(dāng)兩個(gè)域具有相同的協(xié)議, 相同的端口，相同的host，那么我們就可以認(rèn)為它們是相同的域。同源策略還應(yīng)該對(duì)一些特殊情況做處理，比如限制file協(xié)議下腳本的訪問權(quán)限。本地的HTML文件在瀏覽器中是通過file協(xié)議打開的，如果腳本能通過file協(xié)議訪問到硬盤上其它任意文件，就會(huì)出現(xiàn)安全隱患，目前IE8還有這樣的隱患。
43.怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)？
1）創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性
44.談?wù)劺厥諜C(jī)制方式及內(nèi)存管理
回收機(jī)制方式
1、定義和用法：垃圾回收機(jī)制(GC:Garbage Collection),執(zhí)行環(huán)境負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存。
2、原理：垃圾收集器會(huì)定期（周期性）找出那些不在繼續(xù)使用的變量，然后釋放其內(nèi)存。但是這個(gè)過程不是實(shí)時(shí)的，因?yàn)槠溟_銷比較大，所以垃圾回收器會(huì)按照固定的時(shí)間間隔周期性的執(zhí)行。
3、實(shí)例如下：
function fn1() {
varobj = {name: 'hanzichi', age: 10};
}
function fn2() {
varobj = {name:'hanzichi', age: 10};
returnobj;
}vara = fn1();varb = fn2();
fn1中定義的obj為局部變量，而當(dāng)調(diào)用結(jié)束后，出了fn1的環(huán)境，那么該塊內(nèi)存會(huì)被js引擎中的垃圾回收器自動(dòng)釋放；在fn2被調(diào)用的過程中，返回的對(duì)象被全局變量b所指向，所以該塊內(nèi)存并不會(huì)被釋放。
4、垃圾回收策略：標(biāo)記清除(較為常用)和引用計(jì)數(shù)。
標(biāo)記清除：
定義和用法：當(dāng)變量進(jìn)入環(huán)境時(shí)，將變量標(biāo)記"進(jìn)入環(huán)境"，當(dāng)變量離開環(huán)境時(shí)，標(biāo)記為："離開環(huán)境"。某一個(gè)時(shí)刻，垃圾回收器會(huì)過濾掉環(huán)境中的變量，以及被環(huán)境變量引用的變量，剩下的就是被視為準(zhǔn)備回收的變量。
到目前為止，IE、Firefox、Opera、Chrome、Safari的js實(shí)現(xiàn)使用的都是標(biāo)記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時(shí)間間隔互不相同。
引用計(jì)數(shù)：
定義和用法：引用計(jì)數(shù)是跟蹤記錄每個(gè)值被引用的次數(shù)。
基本原理：就是變量的引用次數(shù)，被引用一次則加1，當(dāng)這個(gè)引用計(jì)數(shù)為0時(shí)，被視為準(zhǔn)備回收的對(duì)象。
45、jQuery的事件委托方法bind 、live、delegate、on之間有什么區(qū)別？
(1)、bind 【jQuery 1.3之前】
定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；
語法：bind(type,[data],function(eventObject))；
特點(diǎn)：
(1)、適用于頁面元素靜態(tài)綁定。只能給調(diào)用它的時(shí)候已經(jīng)存在的元素綁定事件，不能給未來新增的元素綁定事件。
(2)、當(dāng)頁面加載完的時(shí)候，你才可以進(jìn)行bind()，所以可能產(chǎn)生效率問題。
實(shí)例如下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3之后】
定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；
語法：live(type, [data], fn);
特點(diǎn)：
(1)、live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了。
(2)、live正是利用了事件委托機(jī)制來完成事件的監(jiān)聽處理，把節(jié)點(diǎn)的處理委托給了document，新添加的元素不必再綁定一次監(jiān)聽器。
(3)、使用live（）方法但卻只能放在直接選擇的元素后面，不能在層級(jí)比較深，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；
實(shí)例如下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定義和用法：將監(jiān)聽事件綁定在就近的父級(jí)元素上
語法：delegate(selector,type,[data],fn)
特點(diǎn)：
(1)、選擇就近的父級(jí)元素，因?yàn)槭录梢愿斓拿芭萆先?，能夠在第一時(shí)間進(jìn)行處理。
(2)、更精確的小范圍使用事件代理，性能優(yōu)于.live()。可以用在動(dòng)態(tài)添加的元素上。
實(shí)例如下：
$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});
(4)、on 【1.7版本整合了之前的三種方式的新事件綁定機(jī)制】
定義和用法：將監(jiān)聽事件綁定到指定元素上。
語法：on(type,[selector],[data],fn)
實(shí)例如下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數(shù)的位置寫法與delegate不一樣。
說明：on方法是當(dāng)前JQuery推薦使用的事件綁定方法，附加只運(yùn)行一次就刪除函數(shù)的方法是one()。
總結(jié)：.bind(), .live(), .delegate(),.on()分別對(duì)應(yīng)的相反事件為：.unbind(),.die(), .undelegate(),.off()
46、px和em的區(qū)別
相同點(diǎn)：px和em都是長度單位；
異同點(diǎn)：px的值是固定的，指定是多少就是多少，計(jì)算比較容易。em得值不是固定的，并且em會(huì)繼承父級(jí)元素的字體大小。
瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
47、瀏覽器的內(nèi)核分別是什么
IE: trident內(nèi)核
Firefox：gecko內(nèi)核
Safari：webkit內(nèi)核
Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))
48、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？
漸進(jìn)增強(qiáng) progressive enhancement：
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí) graceful degradation：
一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：
a. 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給
b. 漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要
c. 降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶
49、sessionStorage 、localStorage 和cookie 之間的區(qū)別
共同點(diǎn)：用于瀏覽器端存儲(chǔ)的緩存數(shù)據(jù)
不同點(diǎn)：
(1)、存儲(chǔ)內(nèi)容是否發(fā)送到服務(wù)器端：當(dāng)設(shè)置了Cookie后，數(shù)據(jù)會(huì)發(fā)送到服務(wù)器端，造成一定的寬帶浪費(fèi)；
web storage,會(huì)將數(shù)據(jù)保存到本地，不會(huì)造成寬帶浪費(fèi)；
(2)、數(shù)據(jù)存儲(chǔ)大小不同：Cookie數(shù)據(jù)不能超過4K,適用于會(huì)話標(biāo)識(shí)；web storage數(shù)據(jù)存儲(chǔ)可以達(dá)到5M;
(3)、數(shù)據(jù)存儲(chǔ)的有效期限不同：cookie只在設(shè)置了Cookid過期時(shí)間之前一直有效，即使關(guān)閉窗口或者瀏覽器；
sessionStorage,僅在關(guān)閉瀏覽器之前有效；localStorage,數(shù)據(jù)存儲(chǔ)永久有效；
(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面；
50、瀏覽器是如何渲染頁面的？
渲染的流程如下：
1.解析HTML文件，創(chuàng)建DOM樹。
自上而下，遇到任何樣式（link、style）與腳本（script）都會(huì)阻塞（外部樣式不阻塞后續(xù)外部腳本的加載）。
2.解析CSS。優(yōu)先級(jí)：瀏覽器默認(rèn)設(shè)置<用戶設(shè)置<外部樣式<內(nèi)聯(lián)樣式<HTML中的style樣式；
3.將CSS與DOM合并，構(gòu)建渲染樹（Render Tree）
4.布局和繪制，重繪（repaint）和重排（reflow）
51:js的基本數(shù)據(jù)類型
JavaScript中有五種基本數(shù)據(jù)類型，它們分別是：undefined，null，boolean，number，string。
還有一種復(fù)雜數(shù)據(jù)類型-object。
52：事件委托
事件委托就是利用的DOM事件的事件捕獲階段。把具體dom上發(fā)生的事件，委托給更大范圍的dom去處理。好比送信員，如果每次都把信件送給每一戶，非常繁瑣。但是如果交給一個(gè)大范圍的管理者，比如小區(qū)的傳達(dá)室，那么事情會(huì)變得非常簡單。事件委托就類似這種原理，我頁面中有很多按鈕，如果不使用事件委托，我只能在每個(gè)按鈕上注冊(cè)事件。非常麻煩。但如果我把事件注冊(cè)在一個(gè)大范圍的div（假設(shè)所有的按鈕都在這個(gè)div中），那么我只要注冊(cè)一次事件，就可以處理所有按鈕（只要按鈕包含在上述div中）事件的響應(yīng)了
53：CSS3新增了很多的屬性，下面一起來分析一下新增的一些屬性：
1.CSS3邊框：
·border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形需要技巧，我們必須為每個(gè)圓角使用不同的圖片，在 CSS3 中，創(chuàng)建圓角是非常容易的，在 CSS3 中，border-radius 屬性用于創(chuàng)建圓角。border：2px solid;
·box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用于向方框添加陰影。box-shadow:10px 10px 5px #888888;
·border-image：CSS3邊框圖片。通過 CSS3 的 border-image 屬性，您可以使用圖片來創(chuàng)建邊框。border-image：url(border.png) 30 30 round;
2.CSS3背景：
·background-size： 屬性規(guī)定背景圖片的尺寸。在 CSS3 之前，背景圖片的尺寸是由圖片的實(shí)際尺寸決定的。在 CSS3 中，可以規(guī)定背景圖片的尺寸，這就允許我們?cè)诓煌沫h(huán)境中重復(fù)使用背景圖片。您能夠以像素或百分比規(guī)定尺寸。如果以百分比規(guī)定尺寸，那么尺寸相對(duì)于父元素的寬度和高度。
·background-origin ：屬性規(guī)定背景圖片的定位區(qū)域。背景圖片可以放置于 content-box、padding-box 或 border-box 區(qū)域。
3.CSS3文字效果：
·text-shadow：在 CSS3 中，text-shadow 可向文本應(yīng)用陰影。text-shadow:5px 5px 5px #FFFFFF;
·word-wrap :單詞太長的話就可能無法超出某個(gè)區(qū)域，允許對(duì)長單詞進(jìn)行拆分，并換行到下一行：p{word-wrap:break-word;}
4.CSS3 2D轉(zhuǎn)換：
transform：通過 CSS3 轉(zhuǎn)換，我們能夠?qū)υ剡M(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長或拉伸。
·translate()：元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側(cè)移動(dòng) 50 像素，從頂端移動(dòng) 100 像素。
·rotate()：元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。transform:rotate(30deg);值 rotate(30deg) 把元素順時(shí)針旋轉(zhuǎn) 30 度。
·scale():元素的尺寸會(huì)增加或減少，根據(jù)給定的寬度（X 軸）和高度（Y 軸）參數(shù)：transform:scale(2,4);值 scale(2,4) 把寬度轉(zhuǎn)換為原始尺寸的 2 倍，把高度轉(zhuǎn)換為原始高x() 5.CSS3 3D轉(zhuǎn)換：
·rotateX()：元素圍繞其 X 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform：rotateX(120deg);
·rotateY()：元素圍繞其 Y 軸以給定的度數(shù)進(jìn)行旋轉(zhuǎn)。transform：rotateY(120deg);
6.CSS3 過渡：當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果。
7.CSS3動(dòng)畫：通過 CSS3，我們能夠創(chuàng)建動(dòng)畫，這可以在許多網(wǎng)頁中取代動(dòng)畫圖片、Flash 動(dòng)畫以及 JavaScript。
8.CSS3多列：
·column-count：屬性規(guī)定元素應(yīng)該被分隔的列數(shù)。
·column-gap：屬性規(guī)定列之間的間隔。
·column-rule ：屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。
9.CSS3用戶界面：
·resize：屬性規(guī)定是否可由用戶調(diào)整元素尺寸。
·box-sizing：屬性允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。
·outline-offset ：屬性對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。
54：從輸入url到顯示頁面，都經(jīng)歷了什么
第一步：客戶機(jī)提出域名解析請(qǐng)求,并將該請(qǐng)求發(fā)送給本地的域名服務(wù)器。
第二步：當(dāng)本地的域名服務(wù)器收到請(qǐng)求后,就先查詢本地的緩存,如果有該紀(jì)錄項(xiàng),則本地的域名服務(wù)器就直接把查詢的結(jié)果返回。
第三步：如果本地的緩存中沒有該紀(jì)錄,則本地域名服務(wù)器就直接把請(qǐng)求發(fā)給根域名服務(wù)器,然后根域名服務(wù)器再返回給本地域名服務(wù)器一個(gè)所查詢域(根的子域)的主域名服務(wù)器的地址。
第四步：本地服務(wù)器再向上一步返回的域名服務(wù)器發(fā)送請(qǐng)求,然后接受請(qǐng)求的服務(wù)器查詢自己的緩存,如果沒有該紀(jì)錄,則返回相關(guān)的下級(jí)的域名服務(wù)器的地址。
第五步：重復(fù)第四步,直到找到正確的紀(jì)錄。
第2種解釋：
一般會(huì)經(jīng)歷以下幾個(gè)過程：
1、首先，在瀏覽器地址欄中輸入url
2、瀏覽器先查看瀏覽器緩存-系統(tǒng)緩存-路由器緩存，如果緩存中有，會(huì)直接在屏幕中顯示頁面內(nèi)容。若沒有，則跳到第三步操作。
3、在發(fā)送http請(qǐng)求前，需要域名解析(DNS解析)(DNS（域名系統(tǒng)，Domain Name System）是互聯(lián)網(wǎng)的一項(xiàng)核心服務(wù)，它作為可以將域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫，能夠使人更方便的訪問互聯(lián)網(wǎng)，而不用去記住IP地址。)，解析獲取相應(yīng)的IP地址。
4、瀏覽器向服務(wù)器發(fā)起tcp連接，與瀏覽器建立tcp三次握手。（TCP即傳輸控制協(xié)議。TCP連接是互聯(lián)網(wǎng)連接協(xié)議集的一種。）
5、握手成功后，瀏覽器向服務(wù)器發(fā)送http請(qǐng)求，請(qǐng)求數(shù)據(jù)包。
6、服務(wù)器處理收到的請(qǐng)求，將數(shù)據(jù)返回至瀏覽器
7、瀏覽器收到HTTP響應(yīng)
8、讀取頁面內(nèi)容，瀏覽器渲染，解析html源碼
9、生成Dom樹、解析css樣式、js交互
10、客戶端和服務(wù)器交互
11、ajax查詢
55：對(duì)<meta></meta>標(biāo)簽有什么理解
什么是meta標(biāo)簽？
引自下W3school的定義說明一下。
元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。
標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁面上，但是對(duì)于機(jī)器是可讀的。
典型的情況是，meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后修改時(shí)間以及其他元數(shù)據(jù)。
標(biāo)簽始終位于 head 元素中。
元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。
其實(shí)對(duì)上面的概念簡單總結(jié)下就是：<meta>標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。它不會(huì)顯示在頁面上，但是對(duì)于機(jī)器是可讀的。可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。
meta的作用
meta里的數(shù)據(jù)是供機(jī)器解讀的，告訴機(jī)器該如何解析這個(gè)頁面，還有一個(gè)用途是可以添加服務(wù)器發(fā)送到瀏覽器的http頭部內(nèi)容
56：new操作符到底到了什么
先看代碼
[javascript]view plaincopy
1.varFunc=function(){
2.};
3.varfunc=newFunc();
new共經(jīng)過了4幾個(gè)階段
1、創(chuàng)建一個(gè)空對(duì)象
[javascript]view plaincopy
1.varobj=newObject();
2、設(shè)置原型鏈
[javascript]view plaincopy
1.obj.__proto__=Func.prototype;
3、讓Func中的this指向obj，并執(zhí)行Func的函數(shù)體。
[javascript]view plaincopy
1.varresult=Func.call(obj);
4、判斷Func的返回值類型：
如果是值類型，返回obj。如果是引用類型，就返回這個(gè)引用類型的對(duì)象。
[javascript]view plaincopy
1.if(typeof(result)=="object"){
2.func=result;
3.}
4.else{
5.func=obj;;
6.}
57：h5新特性
HTML5新特性 —— 新特性
(1)新的語義標(biāo)簽和屬性
(2)表單新特性
(3)視頻和音頻
(4)Canvas繪圖
(5)SVG繪圖
(6)地理定位
(7)拖放API
58：vue的生命周期
58：請(qǐng)寫出你對(duì)閉包的理解，并列出簡單的理解
使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染，缺點(diǎn)是閉包會(huì)常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露。
閉包有三個(gè)特性：
1.函數(shù)嵌套函數(shù)
2.函數(shù)內(nèi)部可以引用外部的參數(shù)和變量
3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收
59：display none visibility hidden區(qū)別？
1.display:none是徹底消失，不在文檔流中占位，瀏覽器也不會(huì)解析該元素；visibility:hidden是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會(huì)解析該元素；
2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時(shí)visibility，頁面產(chǎn)生回流（當(dāng)頁面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁面重新構(gòu)建，此時(shí)就是回流。所有頁面第一次加載時(shí)需要產(chǎn)生一次回流），而visibility切換是否顯示時(shí)則不會(huì)引起回流?！就扑]了解web前端培訓(xùn)課程】
60：JavaScript中如何檢測(cè)一個(gè)變量是一個(gè)String類型？請(qǐng)寫出函數(shù)實(shí)現(xiàn)
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
61：如何理解閉包？
1、定義和用法：當(dāng)一個(gè)函數(shù)的返回值是另外一個(gè)函數(shù)，而返回的那個(gè)函數(shù)如果調(diào)用了其父函數(shù)內(nèi)部的其它變量，如果返回的這個(gè)函數(shù)在外部被執(zhí)行，就產(chǎn)生了閉包。
2、表現(xiàn)形式：使函數(shù)外部能夠調(diào)用函數(shù)內(nèi)部定義的變量。
3、實(shí)例如下：
(1)、根據(jù)作用域鏈的規(guī)則，底層作用域沒有聲明的變量，會(huì)向上一級(jí)找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這里明顯count 是函數(shù)內(nèi)部的flag2 的那個(gè)count 。
varcount=10; //全局作用域 標(biāo)記為flag1function add(){
varcount=0; //函數(shù)全局作用域 標(biāo)記為flag2
returnfunction(){
count+=1; //函數(shù)的內(nèi)部作用域alert(count);
}
}vars = add()
s();//輸出1
s();//輸出2
4、變量的作用域
要理解閉包，首先必須理解Javascript特殊的變量作用域。
變量的作用域分類：全局變量和局部變量。
特點(diǎn)：
1、函數(shù)內(nèi)部可以讀取函數(shù)外部的全局變量；在函數(shù)外部無法讀取函數(shù)內(nèi)的局部變量。
2、函數(shù)內(nèi)部聲明變量的時(shí)候，一定要使用var命令。如果不用的話，你實(shí)際上聲明了一個(gè)全局變量！
5、使用閉包的注意點(diǎn)
1）濫用閉包，會(huì)造成內(nèi)存泄漏：由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大，所以不能濫用閉包，否則會(huì)造成網(wǎng)頁的性能問題，在IE中可能導(dǎo)致內(nèi)存泄露。解決方法是，在退出函數(shù)之前，將不使用的局部變量全部刪除。
2）會(huì)改變父函數(shù)內(nèi)部變量的值。所以，如果你把父函數(shù)當(dāng)作對(duì)象（object）使用，把閉包當(dāng)作它的公用方法（Public Method），把內(nèi)部變量當(dāng)作它的私有屬性（private value），這時(shí)一定要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。
62：談?wù)劺厥諜C(jī)制方式及內(nèi)存管理
回收機(jī)制方式
1、定義和用法：垃圾回收機(jī)制(GC:Garbage Collection),執(zhí)行環(huán)境負(fù)責(zé)管理代碼執(zhí)行過程中使用的內(nèi)存。
2、原理：垃圾收集器會(huì)定期（周期性）找出那些不在繼續(xù)使用的變量，然后釋放其內(nèi)存。但是這個(gè)過程不是實(shí)時(shí)的，因?yàn)槠溟_銷比較大，所以垃圾回收器會(huì)按照固定的時(shí)間間隔周期性的執(zhí)行。
3、實(shí)例如下：
function fn1() {
varobj = {name: 'hanzichi', age: 10};
}
function fn2() {
varobj = {name:'hanzichi', age: 10};
returnobj;
}vara = fn1();varb = fn2();
fn1中定義的obj為局部變量，而當(dāng)調(diào)用結(jié)束后，出了fn1的環(huán)境，那么該塊內(nèi)存會(huì)被js引擎中的垃圾回收器自動(dòng)釋放；在fn2被調(diào)用的過程中，返回的對(duì)象被全局變量b所指向，所以該塊內(nèi)存并不會(huì)被釋放。
4、垃圾回收策略：標(biāo)記清除(較為常用)和引用計(jì)數(shù)。
標(biāo)記清除：
定義和用法：當(dāng)變量進(jìn)入環(huán)境時(shí)，將變量標(biāo)記"進(jìn)入環(huán)境"，當(dāng)變量離開環(huán)境時(shí)，標(biāo)記為："離開環(huán)境"。某一個(gè)時(shí)刻，垃圾回收器會(huì)過濾掉環(huán)境中的變量，以及被環(huán)境變量引用的變量，剩下的就是被視為準(zhǔn)備回收的變量。
到目前為止，IE、Firefox、Opera、Chrome、Safari的js實(shí)現(xiàn)使用的都是標(biāo)記清除的垃圾回收策略或類似的策略，只不過垃圾收集的時(shí)間間隔互不相同。
引用計(jì)數(shù)：
定義和用法：引用計(jì)數(shù)是跟蹤記錄每個(gè)值被引用的次數(shù)。
基本原理：就是變量的引用次數(shù)，被引用一次則加1，當(dāng)這個(gè)引用計(jì)數(shù)為0時(shí)，被視為準(zhǔn)備回收的對(duì)象。
63：判斷一個(gè)字符串中出現(xiàn)次數(shù)最多的字符，統(tǒng)計(jì)這個(gè)次數(shù)
varstr = 'asdfssaaasasasasaa';
varjson = {};
for(vari = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
}else{
json[str.charAt(i)]++;
}
};variMax = 0;variIndex = '';for(vari injson){
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
} console.log('出現(xiàn)次數(shù)最多的是:'+iIndex+'出現(xiàn)'+iMax+'次');
64、$(document).ready()方法和window.onload有什么區(qū)別？
(1)、window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行的。
(2)、$(document).ready()方法可以在DOM載入就緒時(shí)就對(duì)其進(jìn)行操縱，并調(diào)用執(zhí)行綁定的函數(shù)。
65、 jquery中$.get()提交和$.post()提交有區(qū)別嗎？
相同點(diǎn)：都是異步請(qǐng)求的方式來獲取服務(wù)端的數(shù)據(jù)；
異同點(diǎn)：
1、請(qǐng)求方式不同：$.get()方法使用GET方法來進(jìn)行異步請(qǐng)求的。$.post()方法使用POST方法來進(jìn)行異步請(qǐng)求的。
2、參數(shù)傳遞方式不同：get請(qǐng)求會(huì)將參數(shù)跟在URL后進(jìn)行傳遞，而POST請(qǐng)求則是作為HTTP消息的實(shí)體內(nèi)容發(fā)送給Web服務(wù)器的，這種傳遞是對(duì)用戶不可見的。
3、數(shù)據(jù)傳輸大小不同：get方式傳輸?shù)臄?shù)據(jù)大小不能超過2KB而POST要大的多
4、安全問題：GET方式請(qǐng)求的數(shù)據(jù)會(huì)被瀏覽器緩存起來，因此有安全問題。
66、jQuery的事件委托方法bind 、live、delegate、on之間有什么區(qū)別？（常見）
(1)、bind 【jQuery 1.3之前】
定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；
語法：bind(type,[data],function(eventObject))；
特點(diǎn)：
(1)、適用于頁面元素靜態(tài)綁定。只能給調(diào)用它的時(shí)候已經(jīng)存在的元素綁定事件，不能給未來新增的元素綁定事件。
(2)、當(dāng)頁面加載完的時(shí)候，你才可以進(jìn)行bind()，所以可能產(chǎn)生效率問題。
實(shí)例如下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3之后】
定義和用法：主要用于給選擇到的元素上綁定特定事件類型的監(jiān)聽函數(shù)；
語法：live(type, [data], fn);
特點(diǎn)：
(1)、live方法并沒有將監(jiān)聽器綁定到自己(this)身上，而是綁定到了this.context上了。
(2)、live正是利用了事件委托機(jī)制來完成事件的監(jiān)聽處理，把節(jié)點(diǎn)的處理委托給了document，新添加的元素不必再綁定一次監(jiān)聽器。
(3)、使用live（）方法但卻只能放在直接選擇的元素后面，不能在層級(jí)比較深，連綴的DOM遍歷方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；
實(shí)例如下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定義和用法：將監(jiān)聽事件綁定在就近的父級(jí)元素上
語法：delegate(selector,type,[data],fn)
特點(diǎn)：
(1)、選擇就近的父級(jí)元素，因?yàn)槭录梢愿斓拿芭萆先?，能夠在第一時(shí)間進(jìn)行處理。
(2)、更精確的小范圍使用事件代理，性能優(yōu)于.live()?？梢杂迷趧?dòng)態(tài)添加的元素上。
實(shí)例如下：
$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});
(4)、on 【1.7版本整合了之前的三種方式的新事件綁定機(jī)制】
定義和用法：將監(jiān)聽事件綁定到指定元素上。
語法：on(type,[selector],[data],fn)
實(shí)例如下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數(shù)的位置寫法與delegate不一樣。
說明：on方法是當(dāng)前JQuery推薦使用的事件綁定方法，附加只運(yùn)行一次就刪除函數(shù)的方法是one()。
總結(jié)：.bind(), .live(), .delegate(),.on()分別對(duì)應(yīng)的相反事件為：.unbind(),.die(), .undelegate(),.off()
67、px和em的區(qū)別（常見）
相同點(diǎn)：px和em都是長度單位；
異同點(diǎn)：px的值是固定的，指定是多少就是多少，計(jì)算比較容易。em得值不是固定的，并且em會(huì)繼承父級(jí)元素的字體大小。
瀏覽器的默認(rèn)字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
68、瀏覽器的內(nèi)核分別是什么
IE: trident內(nèi)核
Firefox：gecko內(nèi)核
Safari：webkit內(nèi)核
Opera：以前是presto內(nèi)核，Opera現(xiàn)已改用Google Chrome的Blink內(nèi)核
Chrome：Blink(基于webkit，Google與Opera Software共同開發(fā))
69、什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？（常見）
漸進(jìn)增強(qiáng) progressive enhancement：
針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
優(yōu)雅降級(jí) graceful degradation：
一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：
a. 優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給
b. 漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要
c. 降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶
70、sessionStorage 、localStorage 和cookie 之間的區(qū)別（常見）
共同點(diǎn)：用于瀏覽器端存儲(chǔ)的緩存數(shù)據(jù)
不同點(diǎn)：
(1)、存儲(chǔ)內(nèi)容是否發(fā)送到服務(wù)器端：當(dāng)設(shè)置了Cookie后，數(shù)據(jù)會(huì)發(fā)送到服務(wù)器端，造成一定的寬帶浪費(fèi)；
web storage,會(huì)將數(shù)據(jù)保存到本地，不會(huì)造成寬帶浪費(fèi)；
(2)、數(shù)據(jù)存儲(chǔ)大小不同：Cookie數(shù)據(jù)不能超過4K,適用于會(huì)話標(biāo)識(shí)；web storage數(shù)據(jù)存儲(chǔ)可以達(dá)到5M;
(3)、數(shù)據(jù)存儲(chǔ)的有效期限不同：cookie只在設(shè)置了Cookid過期時(shí)間之前一直有效，即使關(guān)閉窗口或者瀏覽器；
sessionStorage,僅在關(guān)閉瀏覽器之前有效；localStorage,數(shù)據(jù)存儲(chǔ)永久有效；
(4)、作用域不同：cookie和localStorage是在同源同窗口中都是共享的；sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁面；
---------------------
最新資訊
0
分享到：
文章列表.jpg)
javaee
科列表頁面右側(cè)廣告圖.jpg)
python
web
design
據(jù)學(xué)科列表頁右側(cè).png)
cloud
test
c
netmarket
pm
Linux
movies
robot
uids
Python
jdbc
北京校區(qū)
江蘇傳智播客教育科技股份有限公司 版權(quán)所有Copyright 2006-2024 All Rights Reserved 蘇ICP備16007882號(hào)營業(yè)執(zhí)照增值電信業(yè)務(wù)經(jīng)營許可證出版物經(jīng)營許可證
蘇公網(wǎng)安備 32132202001156號(hào)