2018最新Web前端經典面試試題及答案-史上最全前端面試題(含答案)
近期總結一一些面試題 都是企業的面試題筆記題
感覺薪資10k下的都會出筆試題
特別高的薪資都是直接技術面試或者是 現場程式設計
總結很多人的面試題，後期會對於單個知識點再說筆記詳細講解。
部分都是百度的答案，不是特全面的，可以自己找下
紅色為常見面試題
=============================================================
前端面試題：
1. 一個200*200的div在不同解析度螢幕上下左右居中，用css實現
div
{
position:absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin-left:-50px;
height:-50px;
z-index:1000;
}
2. 寫一個左中右佈局佔滿螢幕，其中左右兩塊是固定寬度200 ，中間自適應寬，要求先載入中間塊，請寫出結構及樣式：
<body>
<h3>實現三列寬度自適應佈局</h3>
<div id = "left">我是左邊</div>
<div id = "right">我是右邊</div>
<div id = "center">我是中間</div>
</body>
html,body{ margin: 0px;width: 100%; }
h3{height: 100px;margin:20px 0 0;}
#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }
3. 闡述清楚浮動的幾種方式（常見問題）
1.父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
2.父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度 優點：簡單、程式碼少、瀏覽器支援好
4. 結尾處加空div標籤 clear:both
原理：新增一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度 優點：簡單、程式碼少、瀏覽器支援好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不好
5. 解釋css sprites ，如何使用？
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
CSS Sprites為一些大型的網站節約了頻寬，讓提高了使用者的載入速度和使用者體驗，不需要載入更多的圖片
6. 如何用原生js給一個按鈕繫結兩個onclick事件？
Var btn=document.getElementById(‘btn’);
//事件監聽 繫結多個事件
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
7. 拖拽會用到哪些事件
· dragstart:拖拽開始時在被拖拽元素上觸發此事件,監聽器需要設定拖拽所需資料,從作業系統拖拽檔案到瀏覽器時不觸發此事件.
· dragenter:拖拽滑鼠進入元素時在該元素上觸發,用於給拖放元素設定視覺反饋,如高亮
· dragover:拖拽時滑鼠在目標元素上移動時觸發.監聽器通過阻止瀏覽器預設行為設定元素為可拖放元素.
· dragleave:拖拽時滑鼠移出目標元素時在目標元素上觸發.此時監聽器可以取消掉前面設定的視覺效果.
· drag:拖拽期間在被拖拽元素上連續觸發
· drop:滑鼠在拖放目標上釋放時,在拖放目標上觸發.此時監聽器需要收集資料並且執行所需操作.如果是從作業系統拖放檔案到瀏覽器,需要取消瀏覽器預設行為.
· dragend:滑鼠在拖放目標上釋放時,在拖拽元素上觸發.將元素從瀏覽器拖放到作業系統時不會觸發此事件.
8. 請列舉jquery中的選擇器：
9. Javascript中的定時器有哪些？他們的區別及用法是什麼？
setTimeout 只執行一次setInterval 會一直重複執行
9.請描述一下 cookies sessionStorage和localstorage區別
相同點：都儲存在客戶端不同點：1.儲存大小
· cookie資料大小不能超過4k。
· sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。
2.有效時間
· localStorage 儲存持久資料，瀏覽器關閉後資料不丟失除非主動刪除資料；
· sessionStorage 資料在當前瀏覽器視窗關閉後自動刪除。
· cookie 設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉
3. 資料與伺服器之間的互動方式
· cookie的資料會自動的傳遞到伺服器，伺服器端也可以寫cookie到客戶端
· sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。
10.計算一個數組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);
//====================================
function sum2(arr){
var all=0;
for (var i=0;i<arr.length;i++) {
if (typeof arr[i]=="number") {
all+=arr[i];
}
}
return all;
}
document.write(sum2([1,2,3,4]));
11.編寫一個方法去掉數組裡面 重複的內容 var arr=[1,2,3,4,5,1,2,3]
var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];
//定義一個新的陣列
var s = [];
//遍歷陣列
for(var i = 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(非同步javascript xml) 能夠重新整理區域性網頁資料而不是重新載入整個網頁。
如何使用ajax?
第一步，建立xmlhttprequest物件，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest物件用來和伺服器交換資料。
var xhttp;
if (window.XMLHttpRequest) {
//現代主流瀏覽器
xhttp = new XMLHttpRequest();
} else {
// 針對瀏覽器，比如IE5或IE6
xhttp = new ActiveXObject("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. 第四等：代表型別選擇器和偽元素選擇器，如div p，權值為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:-100px 0 0 -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 方法。
程式碼如下：
<div style="width:100%; margin:0 auto;">
<div style="width:200px; float:right; background-color:#960">這是右側的內容 固定寬度</div>
<div style="width:150px; float:left; background:#6FF">這是左側的內容 固定寬度</div>
<div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容，自適應寬度</div>
</div>
第二種：左右兩側採用絕對定位 中間同樣採用margin-left margin-right方法：
第三種負的margin
使用這種方法就稍微複雜了一些了，使用的是負的margin值，而且html標籤也增加了，先來看其程式碼吧：
<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有幾種資料型別，其中基本資料型別有哪些
五種基本型別: Undefined、Null、Boolean、Number和String。
1中複雜的資料型別————Object，Object本質上是由一組無序的名值對組成的。
Object、Array和Function則屬於引用型別
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 （多種選擇） 針對請求，伺服器可執行多種操作。 伺服器可根據請求者 (user agent) 選擇一項操作，或提供操作列表供請求者選擇。 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. 用於未來的一個建議：使用 service workers + 流
13. 圖片編碼優化
25. react和vue有哪些不同，說說你對這兩個框架的看法
相同點
· 都支援伺服器端渲染
· 都有Virtual DOM,元件化開發,通過props引數進行父子元件資料的傳遞,都實現webComponent規範
· 資料驅動檢視
· 都有支援native的方案,React的React native,Vue的weex
不同點
· React嚴格上只針對MVC的view層,Vue則是MVVM模式
· virtual DOM不一樣,vue會跟蹤每一個元件的依賴關係,不需要重新渲染整個元件樹.而對於React而言,每當應用的狀態被改變時,全部元件都會重新渲染,所以react中會需要shouldComponentUpdate這個生命週期函式方法來進行控制
· 元件寫法不一樣, React推薦的做法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的做法是webpack+vue-loader的單檔案元件格式,即html,css,jd寫在同一個檔案;
· 資料繫結: vue實現了資料的雙向繫結,react資料流動是單向的
· state物件在react應用中不可變的,需要使用setState方法更新狀態;在vue中,state物件不是必須的,資料由data屬性在vue物件中管理
26.什麼是mvvm mvc是什麼區別 原理
一、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.優雅降級和漸進增強
漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然後再針對高階瀏覽器進行效果、互動、追加功能達到更好的體驗。
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然後針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用，然後逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。
其實漸進增強和優雅降級並非什麼新概念，只是舊的概念換了一個新的說法。在傳統軟體開發中，經常會提到向上相容和向下相容的概念。漸進增強相當於向上相容，而優雅降級相當於向下相容
29.eval()的作用
把字串引數解析成JS程式碼並執行，並返回執行的結果；
eval("2+3");//執行加運算，並返回運算值。
eval("varage=10");//宣告一個age變數
eval的作用域
functiona(){