前端面試題：
1.一個(gè)200*200的div在不同分辨率屏幕上下左右居中，用css實(shí)現(xiàn)
<divstyle="width:500px;height:500px;border:1pxsolidgreen;display:flex;justify-content:center;align-items:center;">
<divstyle="">
上下左右居中
</div>
</div>
2.寫一個(gè)左中右布局占滿屏幕，其中左右兩塊是固定寬度200，中間自適應(yīng)寬，要求先加載中間塊，請(qǐng)寫出結(jié)構(gòu)及樣式：
<divid="left">我是左邊</div>
<divid="center">我是中間</div>
<divid="right">我是右邊</div>
html,body{margin:0px;width:100%;}
#left,#right{width:200px;height:200px;background-color:aqua;
position:absolute;}
#left{left:0;top:0;}
#right{right:0;top:0;}
#center{margin:0200px;background-color:blue;height:200px;}
或者利用彈性盒子
<style>
*{
margin:0;
padding:0;
}
html,
body{
height:100%;
}
body{
display:flex;
}
.left{
width:100px;
background-color:rgb(199,170,223);
}
.center{
background-color:rgb(151,228,148);
flex:1;
}
.right{
width:100px;
background-color:rgb(199,170,223);
}
</style>
<body>
<divclass="left">left</div>
<divclass="center">center</div>
<divclass="right">right</div>
</body>
3.闡述清楚浮動(dòng)的幾種方式（常見問題）
1.父級(jí)div定義height
原理：父級(jí)div手動(dòng)定義height，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題。
優(yōu)點(diǎn)：簡(jiǎ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)：簡(jiǎn)單、代碼少、瀏覽器支持好
4.結(jié)尾處加空div標(biāo)簽clear:both
原理：添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁(yè)面浮動(dòng)布局多，就要增加很多空div，讓人感覺很不好
5.解釋csssprites，如何使用？
CSSSprites其實(shí)就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
CSSSprites為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗(yàn)，不需要加載更多的圖片
6.如何用原生js給一個(gè)按鈕綁定兩個(gè)onclick事件？
Varbtn=document.getElementById(‘btn’);
//事件監(jiān)聽綁定多個(gè)事件
varbtn4=document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
functionhello1(){undefined
alert("hello1");
}
functionhello2(){undefined
alert("hello2");
}
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.Javascript中的定時(shí)器有哪些？他們的區(qū)別及用法是什么？
setTimeout只執(zhí)行一次
setInterval會(huì)一直重復(fù)執(zhí)行
9.請(qǐng)描述一下cookiessessionStorage和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所有元素的和
vararr1=[1,2,3,4,5,6,7,8,9];
varsum1=0;
for(vari=0;i<=arr1.length;i++){
if(typeofarr1[i]=="number"){
sum1+=arr1[i];
}
}
document.write(sum1);
//====================================
functionsum2(arr){
varall=0;
for(vari=0;i<arr.length;i++){
if(typeofarr[i]=="number"){
all+=arr[i];
}
}
returnall;
}
document.write(sum2([1,2,3,4]));
11.編寫一個(gè)方法去掉數(shù)組里面重復(fù)的內(nèi)容vararr=[1,2,3,4,5,1,2,3]
一個(gè)數(shù)組去重的簡(jiǎn)單實(shí)現(xiàn)
vararr=['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定義一個(gè)新的數(shù)組
vars=[];
//遍歷數(shù)組
for(vari=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是直接寫入到頁(yè)面的內(nèi)容流，如果在寫之前沒有調(diào)用document.open,瀏覽器會(huì)自動(dòng)調(diào)用open。每次寫完關(guān)閉之后重新調(diào)用該函數(shù)，會(huì)導(dǎo)致頁(yè)面被重寫。
innerHTML則是DOM頁(yè)面元素的一個(gè)屬性，代表該元素的html內(nèi)容。你可以精確到某一個(gè)具體的元素來進(jìn)行更改。如果想修改document的內(nèi)容，則需要修改document.documentElement.innerElement。
innerHTML將內(nèi)容寫入某個(gè)DOM節(jié)點(diǎn)，不會(huì)導(dǎo)致頁(yè)面全部重繪
innerHTML很多情況下都優(yōu)于document.write，其原因在于其允許更精確的控制要刷新頁(yè)面的那一個(gè)部分。
13.ajax的步驟
什么是ajax?
ajax(異步j(luò)avascriptxml)能夠刷新局部網(wǎng)頁(yè)數(shù)據(jù)而不是重新加載整個(gè)網(wǎng)頁(yè)。
如何使用ajax?
第一步，創(chuàng)建xmlhttprequest對(duì)象，varxmlhttp=newXMLHttpRequest（);XMLHttpRequest對(duì)象用來和服務(wù)器交換數(shù)據(jù)。
varxhttp;
if(window.XMLHttpRequest){
//現(xiàn)代主流瀏覽器
xhttp=newXMLHttpRequest();
}else{
//針對(duì)瀏覽器，比如IE5或IE6
xhttp=newActiveXObject("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)：簡(jiǎ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)：簡(jiǎn)單、代碼少、瀏覽器支持好、不容易出現(xiàn)怪問題
缺點(diǎn)：不少初學(xué)者不理解原理；如果頁(yè)面浮動(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)：簡(jiǎ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.第四等：代表類型選擇器和偽元素選擇器，如divp，權(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ì)位置，距離頁(yè)面窗口左邊框和上邊框的距離設(shè)置為50%，這個(gè)50%就是指頁(yè)面窗口的寬度和高度的50%，最后將該div等塊級(jí)元素分別左移和上移，左移和上移的大小就是該div等塊級(jí)元素寬度和高度的一半。
CSS代碼：
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px00-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í)元素的左、上的邊距偏移量，邊距偏移量的算法就是用頁(yè)面窗口的寬度減去該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});
});
此外在頁(yè)面載入時(shí)，就需要調(diào)用resize()方法
$(function(){
$(window).resize();
});
19.三個(gè)盒子，左右定寬，中間自適應(yīng)有幾種方法
第一種：左右側(cè)采用浮動(dòng)中間采用margin-left和margin-right方法。
代碼如下：
<divstyle="width:100%;margin:0auto;">
<divstyle="width:200px;float:right;background-color:#960">這是右側(cè)的內(nèi)容固定寬度</div>
<divstyle="width:150px;float:left;background:#6FF">這是左側(cè)的內(nèi)容固定寬度</div>
<divstyle="margin-left:150px;margin-right:200px;background-color:#9F3">中間內(nèi)容，自適應(yīng)寬度</div>
</div>
第二種：左右兩側(cè)采用絕對(duì)定位中間同樣采用margin-leftmargin-right方法：
第三種負(fù)的margin
使用這種方法就稍微復(fù)雜了一些了，使用的是負(fù)的margin值，而且html標(biāo)簽也增加了，先來看其代碼吧：
<divid="main">
<divid="mainContainer">maincontent</div></div><divid="left">
<divid="leftContainer"class="inner">leftcontent</div></div><divid="right">
<divid="rightContainer"class="inner">right</div></div>
#main{
float:left;
width:100%;
}
#mainContainer{
margin:0230px;
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:010px;
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)頁(yè)。
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)求者(useragent)選擇一項(xiàng)操作，或提供操作列表供請(qǐng)求者選擇。
301（永久移動(dòng)）請(qǐng)求的網(wǎng)頁(yè)已永久移動(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è)響應(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)頁(yè)未修改過。服務(wù)器返回此響應(yīng)時(shí)，不會(huì)返回網(wǎng)頁(yè)內(nèi)容。
305（使用代理）請(qǐng)求者只能使用代理訪問請(qǐng)求的網(wǎng)頁(yè)。如果服務(wù)器返回此響應(yīng)，還表示請(qǐng)求者應(yīng)使用代理。
307（臨時(shí)重定向）服務(wù)器目前從不同位置的網(wǎng)頁(yè)響應(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)頁(yè)，服務(wù)器可能返回此響應(yīng)。
403（禁止）服務(wù)器拒絕請(qǐng)求。
404（未找到）服務(wù)器找不到請(qǐng)求的網(wǎng)頁(yè)。
405（方法禁用）禁用請(qǐng)求中指定的方法。
406（不接受）無法使用請(qǐng)求的內(nèi)容特性響應(yīng)請(qǐng)求的網(wǎng)頁(yè)。
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（需要有效長(zhǎng)度）服務(wù)器不接受不含有效內(nèi)容長(zhǎng)度標(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過長(zhǎng)）請(qǐng)求的URI（通常為網(wǎng)址）過長(zhǎng)，服務(wù)器無法處理。
415（不支持的媒體類型）請(qǐng)求的格式不受請(qǐng)求頁(yè)面的支持。
416（請(qǐng)求范圍不符合要求）如果頁(yè)面無法提供請(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)化能夠讓頁(yè)面加載得更快、對(duì)用戶的操作響應(yīng)得更及時(shí)，能夠給用戶提供更為友好的體驗(yàn)。
2.從服務(wù)商角度而言，優(yōu)化能夠減少頁(yè)面請(qǐng)求數(shù)、或者減小請(qǐng)求所占帶寬，能夠節(jié)省可觀的資源。
總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。
前端優(yōu)化的途徑有很多，按粒度大致可以分為兩類，第一類是頁(yè)面級(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)出比從大到小的順序排列。
頁(yè)面級(jí)優(yōu)化
1.JavaScript壓縮和模塊打包
2.按需加載資源
3.在使用DOM操作庫(kù)時(shí)用上array-ids
4.緩存
5.啟用HTTP/2
6.應(yīng)用性能分析
7.使用負(fù)載均衡方案
8.為了更快的啟動(dòng)時(shí)間考慮一下同構(gòu)
9.使用索引加速數(shù)據(jù)庫(kù)查詢
10.使用更快的轉(zhuǎn)譯方案
11.避免或最小化JavaScript和CSS的使用而阻塞渲染
12.用于未來的一個(gè)建議：使用serviceworkers+流
13.圖片編碼優(yōu)化
25.react和vue有哪些不同，說說你對(duì)這兩個(gè)框架的看法
相同點(diǎn)
·都支持服務(wù)器端渲染
·都有VirtualDOM,組件化開發(fā),通過props參數(shù)進(jìn)行父子組件數(shù)據(jù)的傳遞,都實(shí)現(xiàn)webComponent規(guī)范
·數(shù)據(jù)驅(qū)動(dòng)視圖
·都有支持native的方案,React的Reactnative,Vue的weex
不同點(diǎn)
·React嚴(yán)格上只針對(duì)MVC的view層,Vue則是MVVM模式
·virtualDOM不一樣,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+inlinestyle,也就是把HTML和CSS全都寫進(jìn)JavaScript了,即'allinjs';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.什么是mvvmmvc是什么區(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)槠渌氐某叽缱兓兓?/p>
em表示相對(duì)于父元素的字體大小。em是相對(duì)單位，沒有一個(gè)固定的度量值，而是由其他元素尺寸來決定的相對(duì)值。
28.優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
漸進(jìn)增強(qiáng)（ProgressiveEnhancement）：一開始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互、追加功能達(dá)到更好的體驗(yàn)。
優(yōu)雅降級(jí)（GracefulDegradation）：一開始就構(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)存泄露
以上的面試題可能不全，但是還是希望能夠幫到小伙伴，小伙伴也需要在平時(shí)的學(xué)習(xí)過程中來彌補(bǔ)自己的不足。
H5全棧前端開發(fā)技術(shù)學(xué)習(xí)教程及學(xué)習(xí)路線
http://www.atguigu.com/html5_video.shtml