前端面試題：
1.一個200*200的div在不同分辨率屏幕上下左右居中，用css實現
<divstyle="width:500px;height:500px;border:1pxsolidgreen;display:flex;justify-content:center;align-items:center;">
<divstyle="">
上下左右居中
</div>
</div>
2.寫一個左中右布局占滿屏幕，其中左右兩塊是固定寬度200，中間自適應寬，要求先加載中間塊，請寫出結構及樣式：
<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.闡述清楚浮動的幾種方式（常見問題）
1.父級div定義height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
2.父級div定義overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
4.結尾處加空div標簽clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
5.解釋csssprites，如何使用？
CSSSprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
CSSSprites為一些大型的網站節約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片
6.如何用原生js給一個按鈕綁定兩個onclick事件？
Varbtn=document.getElementById(‘btn’);
//事件監聽綁定多個事件
varbtn4=document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
functionhello1(){undefined
alert("hello1");
}
functionhello2(){undefined
alert("hello2");
}
7.拖拽會用到哪些事件
·dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器需要設置拖拽所需數據,從操作系統拖拽文件到瀏覽器時不觸發此事件.
·dragenter:拖拽鼠標進入元素時在該元素上觸發,用于給拖放元素設置視覺反饋,如高亮
·dragover:拖拽時鼠標在目標元素上移動時觸發.監聽器通過阻止瀏覽器默認行為設置元素為可拖放元素.
·dragleave:拖拽時鼠標移出目標元素時在目標元素上觸發.此時監聽器可以取消掉前面設置的視覺效果.
·drag:拖拽期間在被拖拽元素上連續觸發
·drop:鼠標在拖放目標上釋放時,在拖放目標上觸發.此時監聽器需要收集數據并且執行所需操作.如果是從操作系統拖放文件到瀏覽器,需要取消瀏覽器默認行為.
·dragend:鼠標在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到操作系統時不會觸發此事件.
8.Javascript中的定時器有哪些？他們的區別及用法是什么？
setTimeout只執行一次
setInterval會一直重復執行
9.請描述一下cookiessessionStorage和localstorage區別
相同點：都存儲在客戶端
不同點：1.存儲大小
·cookie數據大小不能超過4k。
·sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
2.有效時間
·localStorage存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
·sessionStorage數據在當前瀏覽器窗口關閉后自動刪除。
·cookie設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
3.數據與服務器之間的交互方式
·cookie的數據會自動的傳遞到服務器，服務器端也可以寫cookie到客戶端
·sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
10.計算一個數組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.編寫一個方法去掉數組里面重復的內容vararr=[1,2,3,4,5,1,2,3]
一個數組去重的簡單實現
vararr=['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定義一個新的數組
vars=[];
//遍歷數組
for(vari=0;i<arr.length;i++){
if(s.indexOf(arr[i])==-1){//判斷在s數組中是否存在，不存在則push到s數組中
s.push(arr[i]);
}
}
console.log(s);
//輸出結果：["abc","abcd","sss","2","d","t","ss","f","22"]
方法二：用sort()然后相鄰比較也可以實現
12.document.write和innerHTML的區別：
document.write是直接寫入到頁面的內容流，如果在寫之前沒有調用document.open,瀏覽器會自動調用open。每次寫完關閉之后重新調用該函數，會導致頁面被重寫。
innerHTML則是DOM頁面元素的一個屬性，代表該元素的html內容。你可以精確到某一個具體的元素來進行更改。如果想修改document的內容，則需要修改document.documentElement.innerElement。
innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪
innerHTML很多情況下都優于document.write，其原因在于其允許更精確的控制要刷新頁面的那一個部分。
13.ajax的步驟
什么是ajax?
ajax(異步javascriptxml)能夠刷新局部網頁數據而不是重新加載整個網頁。
如何使用ajax?
第一步，創建xmlhttprequest對象，varxmlhttp=newXMLHttpRequest（);XMLHttpRequest對象用來和服務器交換數據。
varxhttp;
if(window.XMLHttpRequest){
//現代主流瀏覽器
xhttp=newXMLHttpRequest();
}else{
//針對瀏覽器，比如IE5或IE6
xhttp=newActiveXObject("Microsoft.XMLHTTP");
}
第二步，使用xmlhttprequest對象的open（）和send（）方法發送資源請求給服務器。
第三步，使用xmlhttprequest對象的responseText或responseXML屬性獲得服務器的響應。
第四步，onreadystatechange函數，當發送請求到服務器，我們想要服務器響應執行一些功能就需要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數
14.xml和json的區別，請用四個詞語來形容
·JSON相對于XML來講，數據的體積小，傳遞的速度更快些
·JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
·XML對數據描述性比較好；
·JSON的速度要遠遠快于XML
15.清楚浮動的方法？(多次出現在面試題)
1.父級div定義height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
2，結尾處加空div標簽clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
3，父級div定義偽類:after和zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持
4，父級div定義overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
16.box-sizing常用的屬性有哪些？分別有什么作用？
屬性值
·box-sizing：content-box
·box-sizing：border-box
·box-sizing：inherit
content-box
·這是box-sizing的默認屬性值
·是CSS2.1中規定的寬度高度的顯示行為
·在CSS中定義的寬度和高度就對應到元素的內容框
·在CSS中定義的寬度和高度之外繪制元素的內邊距和邊框
border-box
·在CSS中微元素設定的寬度和高度就決定了元素的邊框盒
·即為元素在設置內邊距和邊框是在已經設定好的寬度和高度之內進行繪制
·CSS中設定的寬度和高度減去邊框和內間距才能得到元素內容所占的實際寬度和高度
(Q1)box-sizing:content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
17.css選擇器有哪些，選擇器的權重的優先級
選擇器類型
1、ID#id
2、class.class
3、標簽p
4、通用*
5、屬性[type="text"]
6、偽類：hover
7、偽元素::first-line
8、子選擇器、相鄰選擇器
權重計算規則
1.第一等：代表內聯樣式，如:style=””，權值為1000。
2.第二等：代表ID選擇器，如：#content，權值為0100。
3.第三等：代表類，偽類和屬性選擇器，如.content，權值為0010。
4.第四等：代表類型選擇器和偽元素選擇器，如divp，權值為0001。
5.通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。
6.繼承的樣式沒有權值。
18.塊級元素水平垂直居中的方法有哪些（三個方法）
讓div等塊級元素水平和垂直都居中，即永遠處于屏幕的正中央，當我們做如登錄塊時非常有用！
實現一、原理：要讓div等塊級元素水平和垂直居中，必需知道該div等塊級元素的寬度和高度，然后設置位置為絕對位置，距離頁面窗口左邊框和上邊框的距離設置為50%，這個50%就是指頁面窗口的寬度和高度的50%，最后將該div等塊級元素分別左移和上移，左移和上移的大小就是該div等塊級元素寬度和高度的一半。
CSS代碼：
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px00-150px}
實現二原理：利用CSS的margin設置為auto讓瀏覽器自己幫我們水平和垂直居中。
CSS代碼：
.mycss{
position:absolute;
left:0px;
right:0;
top:0;
bottom:0;
margin:auto;
height:200px;
width:300px;
}
jQuery實現水平和垂直居中
原理：jQuery實現水平和垂直居中的原理就是通過jQuery設置div等塊級元素的CSS，獲取div等塊級元素的左、上的邊距偏移量，邊距偏移量的算法就是用頁面窗口的寬度減去該div等塊級元素的寬度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等塊級元素的CSS設置要在resize()方法中完成，就是每次改變窗口大小時，都要執行設置div等塊級元素的CSS。
jquery代碼：
$(window).resize(function(){
$(".myblock").css({
position:"absolute",
left:($(window).width()-$(".myblock").outerWidth())/2,
top:($(window).height()-$(".myblock").outerHeight())/2});
});
此外在頁面載入時，就需要調用resize()方法
$(function(){
$(window).resize();
});
19.三個盒子，左右定寬，中間自適應有幾種方法
第一種：左右側采用浮動中間采用margin-left和margin-right方法。
代碼如下：
<divstyle="width:100%;margin:0auto;">
<divstyle="width:200px;float:right;background-color:#960">這是右側的內容固定寬度</div>
<divstyle="width:150px;float:left;background:#6FF">這是左側的內容固定寬度</div>
<divstyle="margin-left:150px;margin-right:200px;background-color:#9F3">中間內容，自適應寬度</div>
</div>
第二種：左右兩側采用絕對定位中間同樣采用margin-leftmargin-right方法：
第三種負的margin
使用這種方法就稍微復雜了一些了，使用的是負的margin值，而且html標簽也增加了，先來看其代碼吧：
<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有幾種數據類型，其中基本數據類型有哪些
五種基本類型:Undefined、Null、Boolean、Number和String。
1中復雜的數據類型————Object，Object本質上是由一組無序的名值對組成的。
Object、Array和Function則屬于引用類型
21.undefined和null區別
null：Null類型，代表“空值”，代表一個空對象指針，使用typeof運算得到“object”，所以你可以認為它是一個特殊的對象值。
undefined：Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined。
null是javascript的關鍵字，可以認為是對象類型，它是一個空對象指針，和其它語言一樣都是代表“空值”，不過undefined卻是javascript才有的。undefined是在ECMAScript第三版引入的，為了區分空指針對象和未初始化的變量，它是一個預定義的全局變量。沒有返回值的函數返回為undefined，沒有實參的形參也是undefined。
javaScript權威指南：null和undefined都表示“值的空缺”，你可以認為undefined是表示系統級的、出乎意料的或類似錯誤的值的空缺，而null是表示程序級的、正常的或在意料之中的值的空缺。
22.http和https有何區別？如何靈活使用？
http是HTTP協議運行在TCP之上。所有傳輸的內容都是明文，客戶端和服務器端都無法驗證對方的身份。
https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。所有傳輸的內容都經過加密，加密采用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端可以驗證服務器端的身份，如果配置了客戶端驗證，服務器方也可以驗證客戶端的身份
23.常見的HTTP狀態碼
2開頭（請求成功）表示成功處理了請求的狀態代碼。
200（成功）服務器已成功處理了請求。通常，這表示服務器提供了請求的網頁。
201（已創建）請求成功并且服務器創建了新的資源。
202（已接受）服務器已接受請求，但尚未處理。
203（非授權信息）服務器已成功處理了請求，但返回的信息可能來自另一來源。
204（無內容）服務器成功處理了請求，但沒有返回任何內容。
205（重置內容）服務器成功處理了請求，但沒有返回任何內容。
206（部分內容）服務器成功處理了部分GET請求。
3開頭（請求被重定向）表示要完成請求，需要進一步操作。通常，這些狀態代碼用來重定向。
300（多種選擇）針對請求，服務器可執行多種操作。服務器可根據請求者(useragent)選擇一項操作，或提供操作列表供請求者選擇。
301（永久移動）請求的網頁已永久移動到新位置。服務器返回此響應（對GET或HEAD請求的響應）時，會自動將請求者轉到新位置。
302（臨時移動）服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以后的請求。
303（查看其他位置）請求者應當對不同的位置使用單獨的GET請求來檢索響應時，服務器返回此代碼。
304（未修改）自從上次請求后，請求的網頁未修改過。服務器返回此響應時，不會返回網頁內容。
305（使用代理）請求者只能使用代理訪問請求的網頁。如果服務器返回此響應，還表示請求者應使用代理。
307（臨時重定向）服務器目前從不同位置的網頁響應請求，但請求者應繼續使用原有位置來進行以后的請求。
4開頭（請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。
400（錯誤請求）服務器不理解請求的語法。
401（未授權）請求要求身份驗證。對于需要登錄的網頁，服務器可能返回此響應。
403（禁止）服務器拒絕請求。
404（未找到）服務器找不到請求的網頁。
405（方法禁用）禁用請求中指定的方法。
406（不接受）無法使用請求的內容特性響應請求的網頁。
407（需要代理授權）此狀態代碼與401（未授權）類似，但指定請求者應當授權使用代理。
408（請求超時）服務器等候請求時發生超時。
409（沖突）服務器在完成請求時發生沖突。服務器必須在響應中包含有關沖突的信息。
410（已刪除）如果請求的資源已永久刪除，服務器就會返回此響應。
411（需要有效長度）服務器不接受不含有效內容長度標頭字段的請求。
412（未滿足前提條件）服務器未滿足請求者在請求中設置的其中一個前提條件。
413（請求實體過大）服務器無法處理請求，因為請求實體過大，超出服務器的處理能力。
414（請求的URI過長）請求的URI（通常為網址）過長，服務器無法處理。
415（不支持的媒體類型）請求的格式不受請求頁面的支持。
416（請求范圍不符合要求）如果頁面無法提供請求的范圍，則服務器會返回此狀態代碼。
417（未滿足期望值）服務器未滿足"期望"請求標頭字段的要求。
5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。這些錯誤可能是服務器本身的錯誤，而不是請求出錯。
500（服務器內部錯誤）服務器遇到錯誤，無法完成請求。
501（尚未實施）服務器不具備完成請求的功能。例如，服務器無法識別請求方法時可能會返回此代碼。
502（錯誤網關）服務器作為網關或代理，從上游服務器收到無效響應。
503（服務不可用）服務器目前無法使用（由于超載或停機維護）。通常，這只是暫時狀態。
504（網關超時）服務器作為網關或代理，但是沒有及時從上游服務器收到請求。
505（HTTP版本不受支持）服務器不支持請求中所用的HTTP協議版本。
24.如何進行網站性能優化
1.從用戶角度而言，優化能夠讓頁面加載得更快、對用戶的操作響應得更及時，能夠給用戶提供更為友好的體驗。
2.從服務商角度而言，優化能夠減少頁面請求數、或者減小請求所占帶寬，能夠節省可觀的資源。
總之，恰當的優化不僅能夠改善站點的用戶體驗并且能夠節省相當的資源利用。
前端優化的途徑有很多，按粒度大致可以分為兩類，第一類是頁面級別的優化，例如HTTP請求數、腳本的無阻塞加載、內聯腳本的位置優化等;第二類則是代碼級別的優化，例如Javascript中的DOM操作優化、CSS選擇符優化、圖片優化以及HTML結構優化等等。另外，本著提高投入產出比的目的，后文提到的各種優化策略大致按照投入產出比從大到小的順序排列。
頁面級優化
1.JavaScript壓縮和模塊打包
2.按需加載資源
3.在使用DOM操作庫時用上array-ids
4.緩存
5.啟用HTTP/2
6.應用性能分析
7.使用負載均衡方案
8.為了更快的啟動時間考慮一下同構
9.使用索引加速數據庫查詢
10.使用更快的轉譯方案
11.避免或最小化JavaScript和CSS的使用而阻塞渲染
12.用于未來的一個建議：使用serviceworkers+流
13.圖片編碼優化
25.react和vue有哪些不同，說說你對這兩個框架的看法
相同點
·都支持服務器端渲染
·都有VirtualDOM,組件化開發,通過props參數進行父子組件數據的傳遞,都實現webComponent規范
·數據驅動視圖
·都有支持native的方案,React的Reactnative,Vue的weex
不同點
·React嚴格上只針對MVC的view層,Vue則是MVVM模式
·virtualDOM不一樣,vue會跟蹤每一個組件的依賴關系,不需要重新渲染整個組件樹.而對于React而言,每當應用的狀態被改變時,全部組件都會重新渲染,所以react中會需要shouldComponentUpdate這個生命周期函數方法來進行控制
·組件寫法不一樣,React推薦的做法是JSX+inlinestyle,也就是把HTML和CSS全都寫進JavaScript了,即'allinjs';Vue推薦的做法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;
·數據綁定:vue實現了數據的雙向綁定,react數據流動是單向的
·state對象在react應用中不可變的,需要使用setState方法更新狀態;在vue中,state對象不是必須的,數據由data屬性在vue對象中管理
26.什么是mvvmmvc是什么區別原理
一、MVC（Model-View-Controller）
MVC是比較直觀的架構模式，用戶操作->View（負責接收用戶的輸入操作）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。
MVC使用非常廣泛，比如JavaEE中的SSH框架
三、MVVM（Model-View-ViewModel）
如果說MVP是對MVC的進一步改進，那么MVVM則是思想的完全變革。它是將“數據模型數據雙向綁定”的思想作為核心，因此在View和Model之間沒有聯系，通過ViewModel進行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖的數據的變化會同時修改數據源，而數據源數據的變化也會立即反應view。
27.px和em的區別
px表示像素(計算機屏幕上的一個點：1px=1/96in)，是絕對單位，不會因為其他元素的尺寸變化而變化；
em表示相對于父元素的字體大小。em是相對單位，沒有一個固定的度量值，而是由其他元素尺寸來決定的相對值。
28.優雅降級和漸進增強
漸進增強（ProgressiveEnhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
優雅降級（GracefulDegradation）：一開始就構建站點的完整功能，然后針對瀏覽器測試和修復。比如一開始使用CSS3的特性構建了一個應用，然后逐步針對各大瀏覽器進行hack使其可以在低版本瀏覽器上正常瀏覽。
其實漸進增強和優雅降級并非什么新概念，只是舊的概念換了一個新的說法。在傳統軟件開發中，經常會提到向上兼容和向下兼容的概念。漸進增強相當于向上兼容，而優雅降級相當于向下兼容
29.eval()的作用
把字符串參數解析成JS代碼并運行，并返回執行的結果；
eval("2+3");//執行加運算，并返回運算值。
eval("varage=10");//聲明一個age變量
eval的作用域
functiona(){
1.eval("varx=1");//等效于varx=1;
2.console.log(x);//輸出1
3.}
4.a();
5.console.log(x);//錯誤x沒有定
30.JS哪些操作會造成內存泄露
1）意外的全局變量引起的內存泄露
functionleak(){
leak="xxx";//leak成為一個全局變量，不會被回收
}
2）閉包引起的內存泄露
3）3）沒有清理的DOM元素引用
4）被遺忘的定時器或者回調
5）子元素存在引起的內存泄露
以上的面試題可能不全，但是還是希望能夠幫到小伙伴，小伙伴也需要在平時的學習過程中來彌補自己的不足。
H5全棧前端開發技術學習教程及學習路線
http://www.atguigu.com/html5_video.shtml