前端面試流程
------By漆黑小T
前面5個題，有兩個答不出來就可以pass
遇到面試者反問，以時間有限為由，讓其自行百度，面試印象減分
1、css問題,水平、垂直居中的寫法，請至少寫出4種？
水平居中
行內元素: text-align: center
塊級元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中
設置line-height 等於height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
備注：可以只聽說了幾條，一般只要說出來的都不會錯，三條以上及格
2、css問題，清除浮動的幾種方式
最優，使用after偽元素清除浮動：
.clearfix:after{/偽元素是行內元素 正常瀏覽器清除浮動方法/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
zoom: 1;/ie6清除浮動的方式 號只有IE6-IE7執行，其他瀏覽器不執行/
}
其他，使用before和after雙偽元素清除浮動：
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
備注：能准確說出來的，說明這次面試很用心准備了，說出來大概的及格，一點都不知道的可以pass
3、js問題，說一下宏任務和微任務？
宏任務：當前調用棧中執行的任務稱為宏任務。（主代碼快，定時器等等）。
微任務： 當前（此次事件循環中）宏任務執行完，在下一個宏任務開始之前需要執行的任務為微任務。（可以理解為回調事件，promise.then，proness.nextTick等等）。
宏任務中的事件放在callback queue中，由事件觸發線程維護；微任務的事件放在微任務隊列中，由js引擎線程維護。
備注：說出來大概的及格，如果回答這表示不清楚，一點都不知道的可以pass
4、深拷貝和淺拷貝？
對於字符串類型，淺復制是對值的復制，對於對象來說，淺復制是對對象地址的復制，並沒 有開辟新的棧，也就是復制的結果是兩個對象指向同一個地址，修改其中一個對象的屬性，則另一個對象的屬性也會改變，而深復制則是開辟新的棧，兩個對象對應兩個不同的地址，修改一個對象的屬性，不會改變另一個對象的屬性。
首先深復制和淺復制只針對像 Object, Array 這樣的復雜對象的。簡單來說，淺復制只復制一層對象的屬性，而深復制則遞歸復制了所有層級。
如何實現深拷貝：
第一種方法、通過遞歸解析解決
第二種方法：通過JSON解析解決
備注：實現深拷貝至少說出來一種
5、緩存（session、cookie、localstorage）特點，區別
cookie 特點：
1.不同的瀏覽器存放的cookie位置不一樣，也是不能通用的。
2.cookie的存儲是以域名形式進行區分的，不同的域下存儲的cookie是獨立的。
3.我們可以設置cookie生效的域（當前設置cookie所在域的子域），也就是說，我們能夠操作的cookie是當前域以及當前域下的所有子域
4.一個域名下存放的cookie的個數是有限制的，不同的瀏覽器存放的個數不一樣,一般為20個。
5.每個cookie存放的內容大小也是有限制的，不同的瀏覽器存放大小不一樣，一般為4KB。
6.cookie也可以設置過期的時間，默認是會話結束的時候，當時間到期自動銷毀localStorage（本地存儲）：
1.生命周期：持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
2.存儲的信息在同一域中是共享的。
3.當本頁操作（新增、修改、刪除）了localStorage的時候，本頁面不會觸發storage事件,但是別的頁面會觸發storage事件。
4.大小：據說是5M（跟瀏覽器廠商有關系）
5.在非IE下的瀏覽中可以本地打開。IE瀏覽器要在服務器中打開。
6.localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
7.localStorage受同源策略的限制
sessionStorage（本地會話存儲）:
用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口后，sessionStorage即被銷毀，或者在新窗口打開同源的另一個頁面，sessionStorage也是沒有的。
cookie、localStorage、sessionStorage區別
相同：在本地（瀏覽器端）存儲數據
不同：
localStorage、sessionStorage
localStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數據。
sessionStorage比localStorage更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標簽頁）下。
localStorage是永久存儲，除非手動刪除。
sessionStorage當會話結束（當前頁面關閉的時候，自動銷毀）
cookie的數據會在每一次發送http請求的時候，同時發送給服務器而localStorage、sessionStorage不會。
備注：特點說出來一些即可，但是區別要說出來
提升題目：
1、移動端適配，rem和em區別
重點詞：百分比方案、rem適配方案
rem是相對長度單位，rem方案中的樣式設計為相對於根元素font-size計算值的倍數。
em是相對於父元素
2、數組去重
Indeof set 等
3、js防抖節流
函數防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。
函數節流（throttle）：當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。
實現原理，重點詞：setTimeout
4、瀏覽器的回流和重繪
他們的關系？性能？（避免回流）
重點詞：回流必重繪，重繪不一定回流
5、Vue數據流傳遞
重點詞：vuex 、buds、props等
6、網站性能優化，資源加載？
重點詞：懶加載，加載順序
圖片類：精靈圖、字體圖標(iconfont)
7、封裝過axios？怎么實現可配置？
看回答的流暢度，項目中的axios是否是自己瘋轉的
8、項目經驗豐富度：是否做過復雜的表單提交類（邏輯），可視化展示類（動畫，特效），實時聊天類（異步編程）
9、目前，你做項目中遇到過比較困難的問題，怎么解決？
10、團隊中有多少人，你在其中扮演什么樣的角色？
11、你到目前為止做過多少個項目？幾個PC，類型（中后台居多）?幾個m站？幾個小程序？
12、是否可以獨立開發？在沒有UI支持下，布局，交互，符合需求？