面試總結(jié)
1.投其所好：比如說舍哄，面試的公司有大屏項(xiàng)目的話宴凉，那么在自我介紹的時候可以說自己做過大屏項(xiàng)目，再詳細(xì)介紹自己做的大屏項(xiàng)目
2.把握主動權(quán)：不要問答模式表悬，要把面試官的問題或者興趣帶到自己熟悉的領(lǐng)域弥锄，比如說，在介紹項(xiàng)目過程中蟆沫，插入自己在項(xiàng)目中比較亮眼的工作叉讥，自然而然的把面試官帶到你熟悉的領(lǐng)域去
3.活躍氣氛：在面試過程中需要適當(dāng)?shù)幕钴S氣氛(自己體會)
4.面試題鏈接
1.原型鏈
深入熟悉構(gòu)造函數(shù)、實(shí)例對像饥追、原型對象之前的關(guān)系
深入熟悉什么是原型鏈，原型鏈最終的指向是什么
深入熟悉如何拓展對象的屬性與方法
深入熟悉為什么判斷數(shù)組是否等于對象的時候使用instanceof罐盔，結(jié)果為true
2.類型判斷
深入熟悉基本類型但绕、引用類型有哪些，以及基本類型和引用類型存放在堆內(nèi)存還是棧內(nèi)存
深入熟悉類型判斷的方法以及實(shí)現(xiàn)原理
3.繼承
深入熟悉繼承的多種方式和優(yōu)缺點(diǎn)
4.作用域
深入熟悉var、let捏顺、const的特點(diǎn)以及區(qū)別
深入熟悉this指向
深入熟悉call六孵、apply、bind的使用以及區(qū)別
深入熟悉箭頭函數(shù)以及原理
5.函數(shù)
深入熟悉閉包幅骄、函數(shù)柯理化劫窒，了解偏函數(shù)和高階函數(shù)
熟悉了解函數(shù)柯理化在vue框架實(shí)現(xiàn)中的使用（舉例：判斷真正的html標(biāo)簽還是自定義組件標(biāo)簽；抽象語法樹ast轉(zhuǎn)化成虛擬dom使用函數(shù)柯理化已經(jīng)模板的緩存）
熟悉閉包的優(yōu)缺點(diǎn)拆座、以及內(nèi)存溢出(內(nèi)存泄漏)的原因和解決方案
6.事件循環(huán)機(jī)制
「事件循環(huán)機(jī)制學(xué)習(xí)視頻」
深入熟悉事件循環(huán)機(jī)制的整個過程和原理
深入熟悉瀏覽器主巍、eventLoop、call stack(執(zhí)行棧)挪凑、web APIS孕索、callback quene之間的關(guān)系以及執(zhí)行順序
深入熟悉宏任務(wù)和微任務(wù)，深入熟悉更新dom的時機(jī)躏碳，以及宏任務(wù)搞旭、微任務(wù)、更新dom的執(zhí)行順序前后
js為什么是單線程語言菇绵，能否多線程
js是單線程語言肄渗，為什么可以執(zhí)行setTimeout等異步操作
7.異步編程
深入熟悉promise原理和實(shí)現(xiàn)，深入熟悉promise相關(guān)api「promise學(xué)習(xí)視頻」
深入熟悉generator原理和實(shí)現(xiàn)「generator學(xué)習(xí)視頻」
深入熟悉async/await原理和實(shí)現(xiàn)「async/await學(xué)習(xí)視頻」
8.類
「類學(xué)習(xí)視頻」
深入熟悉類的原理和實(shí)現(xiàn)
如何繼承父類以及調(diào)用父類的方法（super）
new操作符的作用以及實(shí)現(xiàn)
9.ES6-ES11
「ES6-ES11學(xué)習(xí)視頻」
ES6的新特性在面試過程中都會有被問到咬最，所以學(xué)習(xí)視頻多刷兩邊哦翎嫡！
10.緩存策略
深入熟悉緩存策略機(jī)制
強(qiáng)制緩存和協(xié)商緩存的特點(diǎn)和區(qū)別
如何判斷緩存結(jié)果是否過期(Expires/Cache-Control)
瀏覽器的緩存存放在哪里，如何在瀏覽器中判斷強(qiáng)制緩存是否生效丹诀？
from memory cache 和 from disk cache又分別代表的是什么呢钝的？
什么時候會使用from disk cache，什么時候會使用from memory cache呢铆遭？
狀態(tài)碼304是什么意思
如何判斷服務(wù)器端請求資源發(fā)生改變(Last-Modified / If-Modified-Since和Etag / If-None-Match)
11.重繪和重排
深入熟悉重繪和重排硝桩，以及如何進(jìn)行優(yōu)化
12.防抖和節(jié)流
深入熟悉防抖和節(jié)流，防抖和節(jié)流的區(qū)別以及實(shí)現(xiàn)
13.事件冒泡枚荣、事件捕獲和事件委托
深入熟悉事件冒泡碗脊、事件捕獲和事件委托的區(qū)別、實(shí)現(xiàn)和運(yùn)用場景
14.vue框架
「vue框架源碼解析學(xué)習(xí)視頻」
vue框架源碼解析學(xué)習(xí)視頻個人刷了兩遍橄妆，最主要理解vue的實(shí)現(xiàn)原理衙伶，要做好筆記！害碾！
底層框架問題：
（1）深入熟悉vue從編寫頁面代碼到渲染頁面的整個過程矢劲，以及vue做了什么事情?(字符串模板-抽象語法書-虛擬dom-真正dom的一系列過程)
（2）vue從編寫頁面代碼到渲染頁面的整個過程，哪一環(huán)節(jié)最消耗性能慌随，vue的優(yōu)化方案是?
（3）vue的雙向綁定原理(數(shù)據(jù)劫持+發(fā)布訂閱者模式)
（4）改變數(shù)據(jù)到視圖更新的整一個過程(observe+deps+watcher+diff)
（5）observe進(jìn)行數(shù)據(jù)劫持
（6）deps調(diào)控中心芬沉，dep.depend()/dep.notify()
（7）watcher(計算watch > 監(jiān)聽watch > 渲染watcher)
（8）diff算法原理
（9）什么是虛擬dom躺同，虛擬dom的數(shù)據(jù)結(jié)構(gòu)和作用，以及虛擬dom的二次提交
（10）數(shù)據(jù)劫持object.defineproperty
（11）發(fā)布訂閱者模式和觀察者模式的區(qū)別
（12）vue對數(shù)組api進(jìn)行重寫
vue原理問題：
（1）vue的生命周期丸逸，vue父組件和子組件的生命周期(父created - 子created - 子mounted - 父mounted)
（2）在mounted鉤子函數(shù)里能否獲取真正的dom(不能蹋艺，在mounted使用setTimeout或者this.nextTick)
（3）nextTick的作用和使用
（4）為什么vue里面data是一個函數(shù)，而不是對象
（5）v-model的實(shí)現(xiàn)
（6）通訊方式：props黄刚、refs捎谨、eventBus、emit/on憔维、attr/listener
（7）v-for和v-if為什么不能在同一個標(biāo)簽里公用(v-for和v-if的渲染順序問題)
（8）v-for里的key屬性作用(diff算法相關(guān))
（9）路由hash和history的實(shí)現(xiàn)原理和區(qū)別涛救，為什么hash改變，頁面不會重新渲染(單頁面應(yīng)用)
（10）插槽埋同，如何添加多個插槽
（11）mixins的作用是使用場景
vue路由
（1）路由hash和history的實(shí)現(xiàn)原理和區(qū)別州叠，為什么hash改變，頁面不會重新渲染(單頁面應(yīng)用)
（2）動態(tài)路由(addRouter)
（3）路由權(quán)限控制的實(shí)現(xiàn)
（4）路由緩存keepAlive的作用以及實(shí)現(xiàn)
（5）路由鉤子(路由守衛(wèi))：全局凶赁、組件級咧栗、單路由享用
vuex狀態(tài)管理庫
（1）深入熟悉狀態(tài)管理庫的整個流程
（2）為什么不直接改變state,而是要通過mutation來改變state(記錄問題)
（3）mutation和action的區(qū)別，為什么mutation不能進(jìn)行異步操作
（4）如何查看狀態(tài)管理庫的更新記錄(vue-devtools)
（5）當(dāng)頁面進(jìn)行刷新虱肄，狀態(tài)管理庫的數(shù)據(jù)消失了怎么處理
axios
（1）深入熟悉axios的二次封裝
（2）axios的請求攔截以及響應(yīng)攔截分別可以做什么配置
15.webpack
「webpack學(xué)習(xí)視頻」
（1）webpack的實(shí)現(xiàn)原理(webpack_required引入依賴)
（2）webpack的性能優(yōu)化(速度和體積致板，自動(tree-sharking和scope-hasting)和手動(happypack、ignorePlugin咏窿、externals斟或、動態(tài)鏈接庫、splitChunks))
（3）web-loader的執(zhí)行順序(從下往上集嵌，從右往左)
（4）sass-loader萝挤、css-loader、style-loader的區(qū)別以及作用
（5）file-loader和ulr-loader的區(qū)別以及作用
（6）實(shí)際項(xiàng)目中使用過哪些loader和plugin
（7）結(jié)合實(shí)際項(xiàng)目使用webpack做了哪些工作或者是性能優(yōu)化
16.其他
（1）深拷貝和淺拷貝的區(qū)別根欧，如何實(shí)現(xiàn)深拷貝
（2）Cookie怜珍、session和localStorage、以及sessionStorage之間的區(qū)別
（3）Echart的性能問題凤粗，修改數(shù)據(jù)使用setOptions api酥泛，使用dispose銷毀Echart實(shí)例
（4）git合并部分代碼使用cherry pick
（5）vue3發(fā)布日期2020.9.18，時間允許的話也去了解vue3新增特性以及實(shí)現(xiàn)原理嫌拣，加分項(xiàng)
（6）前端微服務(wù)柔袁，加分項(xiàng)
17.css相關(guān)知識點(diǎn)
（1）CSS選擇器
元素選擇器、類選擇器异逐、ID選擇器捶索、屬性選擇器、通用選擇器灰瞻、偽類和偽元素
（2）盒子模型
盒子模型 = margin + border + padding + content
標(biāo)準(zhǔn)盒模型 和 IE盒模型區(qū)別在于width
標(biāo)準(zhǔn)盒模型：width = content
IE盒模型：width = content + padding + border
box-sizing: border-box / content-box
// 假如設(shè)置元素寬度為100px
box-sizing: border-box // IE盒模型：width = content + padding + border = 100px
box-sizing: content-box // 標(biāo)準(zhǔn)盒模型：width = content = 100px
（3）彈性布局
display: flex/inline-flex
flex-direction: row/row-reverse/column/column-reverse // 設(shè)置主軸方向
justify-content: flex-star/flex-end/center/space-between/space-around // 橫坐標(biāo)對齊
align-items: flex-star/flex-end/center/baseline/stretch // 縱坐標(biāo)對齊
flex-wrap: nowrap/wrap/wrap-reverse // 換行
order: 1(number) // 排序
flex-grow: 0 // 剩余空間按比例放大情组，默認(rèn)為0
flex-shrink： 1 // 剩余空間按比例縮小燥筷，默認(rèn)為1
flex-basis： auto // 如果主軸為水平，則設(shè)置這個屬性院崇，相當(dāng)于設(shè)置項(xiàng)目的寬度。 原width將會失效
flex: 1 // flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫袍祖，默認(rèn)值為0 1 auto底瓣。后兩個屬性可選
（4）響應(yīng)式布局和自適應(yīng)布局
響應(yīng)式布局與自適應(yīng)布局原理相似，都是通過檢測設(shè)備蕉陋，根據(jù)不同設(shè)備的分辨率作適配捐凭。
響應(yīng)式布局：根據(jù)設(shè)備的不同展示不同的網(wǎng)站風(fēng)格（通過媒體查詢判斷，在不同的設(shè)備和分辨率下展示不同的網(wǎng)站風(fēng)格）凳鬓，通過響應(yīng)式設(shè)計能使網(wǎng)站在不同的設(shè)備上有更好的瀏覽閱讀體驗(yàn)茁肠。
自適應(yīng)布局：根據(jù)設(shè)備的不同而作出一些自適應(yīng)樣式的調(diào)整（不需要媒體查詢判斷，直接讓每個元素通過相對寬度缩举，不如說%垦梆，vw，em等改變?nèi)萜鞯拇笮〗龊ⅲ煮w的大型行伞）
（5）BFC
Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個概念。它是頁面中的一塊渲染區(qū)域辽慕，并且有一套渲染規(guī)則京腥，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用溅蛉。
那么 BFC 是什么呢公浪？
BFC 即 Block Formatting Contexts (塊級格式化上下文)，它屬于上述定位方案的普通流船侧。
具有 BFC 特性的元素可以看作是隔離了的獨(dú)立容器欠气，容器里面的元素不會在布局上影響到外面的元素，并且 BFC 具有普通容器所沒有的一些特性勺爱。
通俗一點(diǎn)來講晃琳，可以把 BFC 理解為一個封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海琐鲁，都不會影響到外部卫旱。
創(chuàng)建或觸發(fā) BFC
只要元素滿足下面任一條件即可觸發(fā) BFC 特性：
body 根元素
浮動元素：float 除 none 以外的值
絕對定位元素：position (absolute、fixed)
display 為 inline-block围段、table-cells顾翼、flex
overflow 除了 visible 以外的值 (hidden、auto奈泪、scroll)
BFC 特性及應(yīng)用
同一個 BFC 下外邊距會發(fā)生折疊（如果想要避免外邊距的重疊适贸，可以將其放在不同的 BFC 容器中灸芳。）
BFC 可以包含浮動的元素（即清除浮動）
（6）盒子居中
flex 布局實(shí)現(xiàn) （元素已知寬度)
CSS 代碼:
<style>
.box{
width: 300px;
height: 300px;
background-color: #ccc;
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}
.box .a{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
HTML 代碼：
<div class="box">
<div class="a"></div>
</div>
position （元素已知寬度）
父元素設(shè)置為：position: relative;
子元素設(shè)置為：position: absolute;
距上50%，據(jù)左50%拜姿，然后減去元素自身寬度的一半距離就可以實(shí)現(xiàn)
CSS代碼：
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .a{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
</style>
HTML 代碼：
<div class="box">
<div class="a">love</div>
</div>
position transform （元素未知寬度）
如果元素未知寬度烙样，只需將上面例子中的 margin: -50px 0 0 -50px;替換為：transform: translate(-50%,-50%);
CSS 代碼：
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .a{
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
position（元素已知寬度）（left，right蕊肥，top谒获，bottom為0，maigin：auto ）
CSS 代碼：
<style>
.box{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box .a{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
HTML 代碼：
<div class="box">
<div class="a">love</div>
</div>
table-cell 布局實(shí)現(xiàn)
<style>
.box{
width: 300px;
height: 300px;
background-color: skyblue;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img{
/* 設(shè)置成塊元素后壁却，text-align：center 就會失效 */
width: 100px;
height: 100px;
}
</style>
HTML：
<div class="box">
<img src="1.jpg" alt="">
</div>
（7）position定位
熟悉了解定位每個屬性值的作用：
static： 默認(rèn)值批狱。沒有定位，元素出現(xiàn)在正常的流中展东。
absolute：生成絕對定位的元素赔硫，相對于 static 定位以外的第一個父元素進(jìn)行定位。
relative：生成相對定位的元素盐肃，相對于其正常位置進(jìn)行定位爪膊。
fixed：生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位恼蓬。
inherit：規(guī)定應(yīng)該從父元素繼承 position 屬性的值惊完。
