前端面試總結（紅色題為必考，其他為常考）
一、關於css面試題
1、css垂直居中的集中方式？
答案：html結構：
| 1 2 3 |
<div class="box"> <div>垂直居中</div> </div> |
方法1：display:flex
| 1 2 3 4 5 |
.box{ display: flex; justify-content:center; align-items:Center; } |
方法2：絕對定位和負邊距
.box{position:relative;}
.box div{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
方法3：translate
| 1 2 3 4 5 6 7 8 |
.box childdiv{ position: absolute; top:50%; left:50%; width:100%; transform:translate(-50%,-50%); text-align: center; } |
方法4：table-cell
| 1 2 3 4 5 |
.box{ display: table-cell; vertical-align: middle; text-align: center; } |
方法5：偏移量0+margin:auto
父元素設置相對或絕對定位；要居中的子元素設置絕對定位，所有偏移量為0，外邊距為auto：
.wrap{
positon:relative;
}
.center{
positon:absolute;
top:0;bottom:0;left:0;right:0;
margin:auto;
}
2、對於移動端的布局方式?
答：1.【采用display:flex布局兼容ie10+（推薦地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）】
2.采用百分比布局；
3.采用rem、em、或者vh vw來寫寬高布局
3、對於 移動端使用rem，em、px、vw/vh區別
4、css3的兼容問題（一般簡單的答一些常用的兼容問題就好，不常用的就說碰到了百度解決的）
5、盒子模型（標准盒子模型、ie盒子模型）
答： 盒子模型由 html元素 的內容content+內邊距padding+邊框border+外邊距margin組成 ，標准盒子模型（box-sizing:content-box）元素的所設寬度 就是內容content寬度 而ie盒子模型（box-sizing:border-box） 所設寬度 由content+padding+border組成
二、關於html5、css3面試題
1、html5的新屬性有哪些？（列舉一些新增常用的語義化標簽，以及input新增屬性，以及媒體標簽，canvas,本地存儲，websocket以及實現原理 這些就好 順帶可以談談seo優化的事情)
2、Localstorage、sessionstorage、cookie三者各個的區別，及特點，優點,本地存儲使用場景具體怎么用?
3、css3新增屬性以及動畫?
三、關於js/jq面試題
1、http請求過程有哪些？
- 對網址進行DNS域名解析，得到對應的IP地址
- 根據這個IP，找到對應的服務器，發起TCP的三次握手
- 建立TCP連接后發起HTTP請求
- 服務器響應HTTP請求，瀏覽器得到html代碼
- 瀏覽器解析html代碼，並請求html代碼中的資源（如js、css、圖片等）（先得到html代碼，才能去找這些資源）
- 瀏覽器對頁面進行渲染呈現給用戶
- 服務器關閉關閉TCP連接
2、原生ajax請求過程？
//第一步，創建XMLHttpRequest對象 var xmlHttp = new XMLHttpRequest();
//第二步，注冊回調函數
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4)
if (xmlHttp.status == 200) {
//取得返回的數據
var data = xmlHttp.responseText;
}
}
//第三步，配置請求信息，open(),get
//get請求下參數加在url后，.ashx?methodName = GetAllComment&str1=str1&str2=str2
xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);
//post請求下需要配置請求頭信息
//xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//第四步，發送請求,post請求下，要傳遞的參數放這
xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"
3、post請求以及get請求的優缺點？
4、對array數組處理以及string處理的一些常用方法?
5、如何遍歷一個數組里的每個數據，（主要考遍歷的一些方法 for循環，forEach()，map()方法）
6、怎樣進行深拷貝及淺拷貝？他們的區別？
（推薦地址：https://www.cnblogs.com/chenhuichao/p/9121353.html）
7、關於this指向問題，在不同的場景下this的指向？
（推薦地址：https://www.cnblogs.com/chenhuichao/p/9351754.html）
8、關於閉包，如何創建閉包，閉包的用處及缺點？
（推薦地址：https://www.cnblogs.com/chenhuichao/p/8568486.html）
9、怎樣理解原型、原型鏈？
答：每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，於是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。關系：instance.constructor.prototype = instance.__proto__ 特點： JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中並沒有一份屬於自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。
10、數組去重的方法？
（推薦地址：https://www.cnblogs.com/chenhuichao/p/9121404.html）
11、為什么會有跨域、跨域的幾種解決方式？
答：（從同源策略 方面進行回答、 跨域方式 jsonp，設置請求頭，nginx代理 vul-cli的proxyTable反向代理解決跨域）
四、關於vue面試題
1、Vue的生命周期有哪些，分別有哪些特性？
2、父子組件，以及非父子關系組件的通信是怎么實現的？
（父傳子通過props,子傳父通過$emit,促發父組件自定義函數，vuex狀態管理進行通信,$eventBus進行通信，provide / inject等）
3、vuex包含哪些內容？實現原理？使用場景及優缺點？
(推薦地址：https://www.cnblogs.com/chenhuichao/p/9261769.html)
4、vue路由的設置，及路由守衛的實現？
5、vue2及以前版本的實現原理，vue3.0的實現原理？
答：js通過Object.defineProperty修改屬性的get, set方法，從而達到數據改變的目的。3.0將使用 ES2015 Proxy的 observer 實現 作為其觀察者機制，它可以提供覆蓋語言 (JavaScript——譯注) 全范圍的響應式能力，這消除了以前存在的警告，使速度加倍，並節省了一半的內存開銷。
五、關於es6面試題
1、es6常用的一些命令，方法，api 。
(例如 let、const、import、export、箭頭函數、promise對象、async函數，class,解構賦值 推薦學習地址：http://es6.ruanyifeng.com/)
六、所用工具的問題
1、代碼管理使用的工具，svn,git(常用命令說幾個)。
2、nginx使用場景，命令。
3、webpack有用過沒，使用場景，以及原理。
七、主觀題
1.mvc,mvvm的區別？
2、說下你以前項目中遇到的問題，你是怎么解決的？
3、項目中你有哪些優化項目的方案？
3、平時學習方法有哪些，你是怎么進行學習的，對新知識是否有洞察力，以及團隊相處。
4、第二輪面試一般都是問你的興趣愛好，學習能力，性格特點，團隊協作能力，提前想好一些話題，跟面試官交心，交朋友的心態交流 事半功倍
}