1▲ Vue 中雙向數(shù)據(jù)綁定的實(shí)現(xiàn)原理是怎樣的田巴？
vue數(shù)據(jù)雙向綁定的原理是通過數(shù)據(jù)劫持結(jié)合發(fā)布訂閱模式，通過Object.defineProperty方法來劫持每個屬性，為每個屬性添加setter和getter，當(dāng)數(shù)據(jù)變動時(shí)，發(fā)布消息給訂閱者罩润，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)
整個mvvm框架的主要模塊分別為：
1、observer：進(jìn)行數(shù)據(jù)的劫持埋酬，get函數(shù)觸發(fā)時(shí)哨啃，添加訂閱者，set函數(shù)觸發(fā)數(shù)據(jù)watcher写妥，進(jìn)行視圖更新
2拳球、compile：對元素節(jié)點(diǎn)進(jìn)行掃描和解析，初始化dom珍特，訂閱數(shù)據(jù)變化通知watcher跟新視圖
3祝峻、watcher：添加訂閱者，收集屬性變動扎筒，執(zhí)行視圖更新
4莱找、mvvm入口函數(shù)

2vue中的數(shù)據(jù)是如何被渲染的
1、創(chuàng)建實(shí)例嗜桌，并進(jìn)行初始化奥溺，
2、模板編譯（把真實(shí)的dom元素進(jìn)行轉(zhuǎn)換成一個對應(yīng)的dom對象骨宠，并描述與數(shù)據(jù)的綁定關(guān)系）浮定，生成render函數(shù)（這個函數(shù)是就構(gòu)建虛擬DOM所需要的工具）
3、對數(shù)據(jù)進(jìn)行監(jiān)聽层亿，
4桦卒、數(shù)據(jù)變化執(zhí)行render函數(shù)，生成新的vNode對象
5匿又、對比新舊節(jié)點(diǎn)方灾，通過diff算法對節(jié)點(diǎn)進(jìn)行更新，最終編譯成真正的dom結(jié)構(gòu)渲染
3簡述瀏覽器的渲染過程碌更，重繪和重排在渲染過程中的哪一部分裕偿？
瀏覽器進(jìn)程：
browser進(jìn)程：
第三方插件進(jìn)程：
GPU進(jìn)程：
瀏覽器渲染進(jìn)程：瀏覽器內(nèi)核（主要負(fù)責(zé)渲染頁面洞慎，js的執(zhí)行，事件循環(huán)等）
瀏覽器內(nèi)核線程：
GUI渲染線程：負(fù)責(zé)渲染界面嘿棘，解析html拢蛋，css，構(gòu)建DOM和renderTree蔫巩，（互斥）
JS引擎線程：負(fù)責(zé)處理javascript的腳本執(zhí)行，（互斥）
事件觸發(fā)線程：用來控制事件循環(huán)
定時(shí)觸發(fā)器線程：定時(shí)器和延時(shí)器的所在線程
異步http請求線程：處理http請求
4hash和history
是前端路由的兩種模式快压，可以記錄當(dāng)前頁面的狀態(tài)圆仔，實(shí)現(xiàn)瀏覽器的前進(jìn)和后退
hash：拼在url的尾部，通過#來拼接蔫劣，hash值變化不會導(dǎo)致頁面發(fā)生請求坪郭，對后端沒有影響，不利于seo
hsitory：可以在url添加參數(shù)脉幢，利用了h5 的History Interface 中新增的pushState和replaceState方法歪沃，特別需要后端的配合，缺點(diǎn)也是刷新可能無法獲取資源
5Vue 組件間是如何進(jìn)行通信的嫌松？
1.父子組件
父-子 props 子-父EventBus = new Vue() vue的原型上掛載一個new Vue()
發(fā)送事件：this.emit()
接收事件：off()

    缺點(diǎn)：單頁面程序刷新會移除所有的eventbus蒋譬，當(dāng)前的業(yè)務(wù)可能會斷裂割岛，所以切記在頁面銷毀的時(shí)候移除
    原理：它的工作原理是發(fā)布/訂閱方法，通常稱為 Pub/Sub 犯助。兩個方法$on和$emit癣漆。一個用于創(chuàng)建發(fā)出的事件，它就是$emit剂买；另一個用于訂閱$on：

6簡述虛擬 dom 實(shí)現(xiàn)原理惠爽，簡述 diff 算法的實(shí)現(xiàn)機(jī)制和使用場景

虛擬DOM（Virtual DOM） 用js用對象的方式來表示Dom結(jié)構(gòu)癌蓖，即，將Dom的變化對比放在js層

為什么使用虛擬dom：首先頁面展示需要進(jìn)行對html和css解析生成對應(yīng)的dom樹和樣式樹婚肆，最后合并生成rendertree租副，然后布局繪制進(jìn)行展示，
但是在繪制布局過程中较性，操作js會導(dǎo)致重排和重繪用僧，這樣就會導(dǎo)致dom樹的重新渲染，非常消耗性能赞咙。
    虛擬dom 就是為了解決這個問題责循，首先將dom生成一個對象，操作dom先去修改這個對象攀操，最后統(tǒng)一完成dom樹的重新構(gòu)建
    所以需要提供轉(zhuǎn)換的方法：dom -> obj   obj -> dom 等方法
diff算法：主要是用來比較兩棵樹的變化之處院仿，得到一個發(fā)生變化的節(jié)點(diǎn)列表組成的對象，正常的時(shí)間復(fù)雜度為O(n*3),但是很少有dom元素跨層級移動的情況速和，所以歹垫，一般是平層比較兩棵樹，時(shí)間復(fù)雜度為O(n),放棄了深度遍歷颠放。
    一般diff需要處理四種情況：
        1排惨、REPLACE ： 元素節(jié)點(diǎn)類型發(fā)生變化，
        2碰凶、PROPS ： 元素節(jié)點(diǎn)類型不變化若贮，屬性或者屬性值發(fā)生變化
        3、TEXT ： 文本發(fā)生變化
        4痒留、REORDER ： 元素的移動谴麦，包括增加和刪除

7簡述什么是 XSS 攻擊以及 CSRF 攻擊？
XSS攻擊(Cross Site Scripting)全稱跨站腳本攻擊（讓用戶惡意的執(zhí)行腳本代碼）伸头，是一種在web應(yīng)用中的計(jì)算機(jī)安全漏洞匾效，它允許惡意web用戶將代碼植入到提供給其它
用戶使用的頁面中。
預(yù)防： 對重要的 cookie設(shè)置 httpOnly, 防止客戶端通過document.cookie讀取 cookie恤磷，此 HTTP頭由服務(wù)端設(shè)置面哼。
將不可信的值輸出 URL參數(shù)之前，進(jìn)行 URLEncode操作扫步，而對于從 URL參數(shù)中獲取值一定要進(jìn)行格式檢測
CSRF (Cross Site Request Forgery)攻擊魔策，（讓用戶惡意的調(diào)取接口）中文名：跨站請求偽造。其原理是攻擊者構(gòu)造網(wǎng)站后臺某個功能接口的請求
地址河胎，誘導(dǎo)用戶去點(diǎn)擊或者用特殊方法讓該請求地址自動加載闯袒。用戶在登錄狀態(tài)下這個請求被服務(wù)端接收后會被誤以為是用
戶合法的操作。對于 GET 形式的接口地址可輕易被攻擊，對于 POST 形式的接口地址也不是百分百安全政敢，攻擊者可誘導(dǎo)用
戶進(jìn)入帶 Form 表單可用POST方式提交參數(shù)的頁面其徙。
目前防御 CSRF 攻擊主要有三種策略：驗(yàn)證 HTTP Referer 字段（referer能夠得到訪問的請求來源地址）；在請求地址中添加 token 并驗(yàn)證喷户；在 HTTP 頭中自定義屬性并驗(yàn)證唾那。
8性能優(yōu)化（重點(diǎn)）
了解瀏覽器渲染機(jī)制
1. 解析 HTML 文件，構(gòu)建 DOM 樹褪尝，同時(shí)瀏覽器主進(jìn)程負(fù)責(zé)下載 CSS 文件
2. CSS 文件下載完成闹获，解析 CSS 文件成樹形的數(shù)據(jù)結(jié)構(gòu)，然后結(jié)合 DOM 樹合并成 RenderObject 樹
3. 布局 RenderObject 樹 （Layout/reflow）河哑，負(fù)責(zé) RenderObject 樹中的元素的尺寸昌罩，位置等計(jì)算
4. 繪制 RenderObject 樹 （paint），繪制頁面的像素信息
5. 瀏覽器主進(jìn)程將默認(rèn)的圖層和復(fù)合圖層交給 GPU 進(jìn)程灾馒，GPU 進(jìn)程再將各個圖層合成（composite），最后顯示出頁面
1遣总、網(wǎng)頁首頁渲染減少http請求
2睬罗、js會阻止dom構(gòu)建，可以async
3旭斥、操作dom優(yōu)化容达，減少重排和重繪，重排的操作影響大于重繪垂券，使用框架例如vue花盐，能夠?qū)崿F(xiàn)虛擬dom+diff算法來優(yōu)化
4、對于圖片可以使用懶加載
5菇爪、事件綁定優(yōu)化：事件委托（減少注冊時(shí)間,減少內(nèi)存占用）防抖和節(jié)流
6算芯、緩存優(yōu)化
7、vue相關(guān)優(yōu)化：
1凳宙、css文件放入單獨(dú)的文件熙揍，然后引入
2、組件懶加載
9簡述 Javascript 原型以及原型鏈
原型是Function上的一個屬性氏涩，它定義了構(gòu)造函數(shù)構(gòu)造出對象的共有祖先届囚，通過該構(gòu)造函數(shù)構(gòu)造出來的對象可以繼承原型的屬性和方法，原型也是對象
原型鏈,當(dāng)函數(shù)被new操作符操作的時(shí)候是尖，會創(chuàng)建出一個對象意系，該對象中有一個proto屬性指向原型對象，這樣實(shí)例就可以訪問圓形的屬性和方法饺汹，原型也是一個對象
所以蛔添，原型也是有原型的，因此構(gòu)成了一個鏈?zhǔn)浇Y(jié)構(gòu)，原型鏈的終端是Object.prototype.proto => null
10繼承的常見方式
（1）原型鏈繼承
Child.prototype = new Parent()
特點(diǎn)：無法向父類傳參作郭，繼承單一陨囊，所有實(shí)例共享父類實(shí)例屬性
（2）構(gòu)造函數(shù)借用```
Child函數(shù)中：Parent.call(this,params)
特點(diǎn)：只能繼承父類屬性，不能繼承父類原型夹攒，可以繼承多個父類
（3）組合繼承
function Child(name) { Person.call(this, name); }
Child.prototype = new Person();
（4）原型式形式
function obj(o){function F(){}; F.prototype = o; return new F()}
let child = obj(new Parent())
特點(diǎn)：以函數(shù)返回值來操作
（5）寄生組合
function obj(o){function F(){}; F.prototype = o; return new F()}
function subObj(o){let f = obj(o); o.name='name'; return o} 這一步可以為實(shí)例傳參
（6）extends
class Child extends Parent{
conscturtor(){
super()
}
}
11 簡述 Vue 的生命周期
生命周期函數(shù)：在vue實(shí)例從創(chuàng)建到銷毀的整個過程中不同階段的自執(zhí)行函數(shù)蜘醋，
beforeCreate:實(shí)例初始化，但是數(shù)據(jù)咏尝，事件压语，Dom等都是undefined
created：數(shù)據(jù)和事件初始化，可以在created函數(shù)中得到
beforeMount:掛載之前编检，DOM初始化完成胎食，
mounted：完成掛載
beforeUpdate：數(shù)據(jù)更新前的回調(diào)，數(shù)據(jù)還未變化
updated：數(shù)據(jù)更新后的回調(diào)允懂，數(shù)據(jù)已經(jīng)修改完成
beforeDistory：實(shí)例銷毀之前
distoryed：實(shí)例銷毀之后
activated：keep-alive激活
deactivated：keep-alive組件關(guān)閉
errorCapture：當(dāng)捕獲到子孫組件的錯誤時(shí)觸發(fā)

12 簡述瀏覽器的緩存機(jī)制
首先厕怜，瀏覽器和服務(wù)器之間的通信方式為應(yīng)答模式，即蕾总，瀏覽器發(fā)起http請求-服務(wù)器響應(yīng)請求粥航，
發(fā)起請求，先去緩存中查看,緩存中沒有發(fā)起http請求服務(wù)器生百，拿到響應(yīng)數(shù)據(jù)递雀，并根據(jù)詳情數(shù)據(jù)的緩存規(guī)則，決定是否進(jìn)行緩存蚀浆，
將具有緩存標(biāo)識的數(shù)據(jù)存入瀏覽器緩存
根據(jù)是否需要向服務(wù)器重新發(fā)起http請求缀程，將緩存過程分為兩個部分，分別是強(qiáng)緩存和協(xié)商緩存
強(qiáng)緩存：不會向服務(wù)器發(fā)送請求市俊，直接從緩存中取 控制強(qiáng)制緩存的字段分別是Expires和Cache-Control杨凑，其中Cache-Conctrol的優(yōu)先級比Expires高。
（1）public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）
（2）private：所有內(nèi)容只有客戶端可以緩存摆昧，Cache-Control的默認(rèn)取值
（3）no-cache：客戶端緩存內(nèi)容蠢甲，但是是否使用緩存則需要經(jīng)過協(xié)商緩存來驗(yàn)證決定
（4）no-store：所有內(nèi)容都不會被緩存，即不使用強(qiáng)制緩存据忘，也不使用協(xié)商緩存
（5）max-age=xxx (xxx is numeric)：緩存內(nèi)容將在xxx秒后失效
協(xié)商緩存：強(qiáng)緩存失效鹦牛，瀏覽器攜帶緩存向服務(wù)器發(fā)起請求，由服務(wù)器更具緩存表示決定是否使用緩存的過程（eTag勇吊，信息的過期標(biāo)識） 控制協(xié)商緩存的字段分別有：Last-Modified / If-Modified-Since和Etag / If-None-Match曼追，其中Etag / If-None-Match的優(yōu)先級比Last-Modified / If-Modified-Since高。

13 簡述虛擬 dom 實(shí)現(xiàn)原理汉规，簡述 diff 算法的實(shí)現(xiàn)機(jī)制和使用場景

虛擬DOM（Virtual DOM） 用js用對象的方式來表示Dom結(jié)構(gòu)礼殊，即驹吮，將Dom的變化對比放在js層

為什么使用虛擬dom：首先頁面展示需要進(jìn)行對html和css解析生成對應(yīng)的dom樹和樣式樹，最后合并生成rendertree晶伦，然后布局繪制進(jìn)行展示碟狞，
但是在繪制布局過程中，操作js會導(dǎo)致重排和重繪婚陪，這樣就會導(dǎo)致dom樹的重新渲染族沃，非常消耗性能。
    虛擬dom 就是為了解決這個問題泌参，首先將dom生成一個對象脆淹，操作dom先去修改這個對象，最后統(tǒng)一完成dom樹的重新構(gòu)建
    所以需要提供轉(zhuǎn)換的方法：dom -> obj   obj -> dom 等方法
diff算法：主要是用來比較兩棵樹的變化之處沽一，得到一個發(fā)生變化的節(jié)點(diǎn)列表組成的對象盖溺，正常的時(shí)間復(fù)雜度為O(n*3),但是很少有dom元素跨層級移動的情況，所以铣缠，一般是平層比較兩棵樹烘嘱，時(shí)間復(fù)雜度為O(n),放棄了深度遍歷。
    一般diff需要處理四種情況：
        1蝗蛙、REPLACE ： 元素節(jié)點(diǎn)類型發(fā)生變化蝇庭，
        2、PROPS ： 元素節(jié)點(diǎn)類型不變化歼郭，屬性或者屬性值發(fā)生變化
        3、TEXT ： 文本發(fā)生變化
        4辐棒、REORDER ： 元素的移動病曾，包括增加和刪除

14 簡述 Javascript 中的防抖與節(jié)流的原理并嘗試實(shí)現(xiàn)
防抖：持續(xù)操作，只會執(zhí)行最后一次回調(diào)
思想：維護(hù)一個timer漾根，只要執(zhí)行泰涂，我就先清空在賦值，讓他重新開始計(jì)時(shí)辐怕，直到最后一次觸發(fā)成功
function debounce(func, delay) {
let timeout
return function() {
clearTimeout(timeout) // 如果持續(xù)觸發(fā)逼蒙，那么就清除定時(shí)器，定時(shí)器的回調(diào)就不會執(zhí)行寄疏。
timeout = setTimeout(() => {
func.apply(this, arguments)
}, delay)
}
}
節(jié)流：只需操作是牢，按時(shí)執(zhí)行
思想：維護(hù)一個flag開關(guān)，狀態(tài)是開陕截，執(zhí)行過程中關(guān)閉驳棱，執(zhí)行完再打開
function throttle(func,delay){
let run = true
return function () {
if(!run){
return
}
run = false
setTimeout(()=>{
func.apply(this,arguments)
run = true
},delay)
}
}

15 什么是閉包，什么是立即執(zhí)行函數(shù)农曲，它的作用是什么社搅？簡單說一下閉包的使用場景
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上，閉包是將函數(shù)內(nèi)部和函數(shù)外部連接起來的橋梁形葬。
閉包可以實(shí)現(xiàn)防抖和節(jié)流,可以做緩存（維護(hù)一個變量的狀態(tài)）合呐，可以防止命名沖突，
閉包會導(dǎo)致私有變量無法被銷毀笙以，造成內(nèi)存大量消耗淌实，導(dǎo)致內(nèi)存泄露，閉包需要突破作用域連源织，會造成性能問題

16 簡述瀏覽題事件循環(huán)機(jī)制
js是單線程執(zhí)行的翩伪，js中的執(zhí)行代碼分為同步任務(wù)和異步任務(wù)，
需要一個規(guī)則來規(guī)定他們的執(zhí)行順序
首先谈息，js引擎執(zhí)行代碼會先執(zhí)行同步代碼缘屹，會把異步任務(wù)掛起，直到同步任務(wù)執(zhí)行完侠仇，異步任務(wù)執(zhí)行完后會放到事件隊(duì)列中轻姿，（異步事件中分為宏任務(wù)和微任務(wù)，先執(zhí)行微任務(wù)隊(duì)列逻炊，后執(zhí)行宏任務(wù)隊(duì)列）直到執(zhí)行棧為空互亮，然后執(zhí)行微任務(wù)隊(duì)列，再然后執(zhí)行宏任務(wù)余素，判斷宏任務(wù)中是否有同步代碼和微任務(wù)豹休，就按照這個規(guī)則來執(zhí)行任務(wù)。
當(dāng)前執(zhí)行棧執(zhí)行完畢時(shí)會立刻先處理所有微任務(wù)隊(duì)列中的事件桨吊，然后再去宏任務(wù)隊(duì)列中取出一個事件威根。同一次事件循環(huán)中，微任務(wù)永遠(yuǎn)在宏任務(wù)之前執(zhí)行视乐。
宏任務(wù)：settimeout setinterval setimmediate I/O UI渲染

微任務(wù)：promise process.nextTick  Object.observe(已經(jīng)被廢棄洛搀，異步的監(jiān)視一個對象的修改)

17 localstorage 與 cookie 的區(qū)別是什么？
cookie并不適合存儲佑淀，主要是用來存一些身份標(biāo)識留美，在請求接口的時(shí)候附帶上這些cookie，cookie需要進(jìn)行封裝伸刃，大小為4k谎砾，不同瀏覽器對個數(shù)有限制，每次請求都會附帶捧颅，影響效率棺榔，可以對cookie屬性Max Age（失效日期）domian和path(限制 cookie 能被哪些 URL 訪問)
web storage 用來本地存儲
session 一次會話
local 永久
18 promise 有哪些狀態(tài)？簡述 promise.all 的實(shí)現(xiàn)原理
19 簡述 CORS 的用途以及基本設(shè)置 什么是跨域隘道，什么情況下會發(fā)生跨域請求症歇？
Cross-origin Resource Sharing 中文名稱 “跨域資源共享” 簡稱 “CORS”郎笆，它突破了一個請求在瀏覽器發(fā)出只能在同源的情況下向服務(wù)器獲取數(shù)據(jù)的限制
原因：瀏覽器限制了從腳本內(nèi)發(fā)起的跨源 HTTP 請求（協(xié)議、域名忘晤、端口號）同源策略
解決方法:
JSONP:原理就是在 script 標(biāo)簽里面加載了一個鏈接請求宛蚓，去訪問服務(wù)器的某個請求，返回內(nèi)容设塔。
CORS: 簡單請求和預(yù)檢請求,當(dāng)使用XMLHttpRequest發(fā)送請求時(shí)凄吏，瀏覽器發(fā)現(xiàn)該請求不符合同源策略，會給該請求加一個請求頭：Origin闰蛔，后臺進(jìn)行一系列處理痕钢，如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭：Access-Control-Allow-Origin;
前端本地代理：服務(wù)器沒有跨域的概念，在配置文件中設(shè)置代理序六，

20 簡述 JWT 的原理和校驗(yàn)機(jī)制
JSON Web Token（簡稱 JWT）是目前最流行的跨域認(rèn)證解決方案任连。
類似token，用戶登錄后獲得后端返回的jwt例诀，在請求資源的時(shí)候附加到請求頭的Authorization
ck▲ 25 手寫題庫 https://github.com/Mayandev/fe-interview-handwrite
實(shí)現(xiàn)bind
Function.prototype.newBind = function(context,...args){
return (...newArgs) => this.apply(context,[...args,...newArgs])
}
+實(shí)現(xiàn)apply
Function.prototype.newApply = function(context,args){
context.fn = this
return context.fn(...args)
}
+實(shí)現(xiàn)call
Function.prototype.newCall = function (context,...args){
context.fn = this
return context.fn(...args)
}

▲ 8 簡述 CSS 有哪些上下文類型随抠？
層疊上下文：定位元素 > 內(nèi)聯(lián)元素 > 浮動元素 > 塊級元素

js預(yù)編譯流程
1、語法解析：檢查代碼有沒有低級錯誤繁涂，
2拱她、預(yù)編譯：代碼執(zhí)行前，大部分是在函數(shù)執(zhí)行前
3扔罪、解釋執(zhí)行：執(zhí)行

預(yù)編譯：
    創(chuàng)建GO秉沼，變量提升，函數(shù)提升
    
    創(chuàng)建AO,形參矿酵，變量唬复，賦值undefined；形參實(shí)參統(tǒng)一坏瘩；函數(shù)提升

Object.defineProterty 和 Proxy區(qū)別
可配置盅抚，可賦值漠魏，可枚舉倔矾，value，set柱锹，get
雖然Object.defineProperty能夠劫持對象的屬性哪自，但是需要對對象的每一個屬性進(jìn)行遍歷劫持；如果對象上有新增的屬性禁熏，則需要對新增的屬性再次進(jìn)行劫持壤巷；如果屬性是對象，還需要深度遍歷瞧毙。這也是為什么Vue給對象新增屬性需要通過$set的原因胧华，其原理也是通過Object.defineProperty對新增的屬性再次進(jìn)行劫持寄症。

相較于Object.defineProperty劫持某個屬性，Proxy則更徹底矩动，不在局限某個屬性有巧，而是直接對整個對象進(jìn)行代理，Proxy不僅能夠監(jiān)聽到屬性的增加悲没，還能監(jiān)聽屬性的刪除篮迎，比Object.defineProperty的功能更為強(qiáng)大

vue-router原理
不同路徑展示不同資源
hash：hashchange來實(shí)現(xiàn)更新頁面部分內(nèi)容的操作
for...in for...of
for in 一般是遍歷數(shù)組或?qū)ο蟮膋ey值
for of 一般是遍歷數(shù)組的value，通常能夠遍歷有iterator方法的結(jié)構(gòu)

▲ 5 簡述 ES6 的新特性
let,const
symbol
set,map
字符串示姿，數(shù)組甜橱，對象新增方法
解構(gòu)賦值
三點(diǎn)運(yùn)算符
形參默認(rèn)值
proxy
class
promise
gen
async/await

▲ 5 了解過 Gulp Grunt 嗎？簡述他們的優(yōu)勢以及劣勢
▲ 4 Javascript 可以保存的最大數(shù)值是多少栈戳？
number類型的數(shù)據(jù)在計(jì)算機(jī)中是以IEEE754雙精度存儲的岂傲，但是在二進(jìn)制存儲的時(shí)候，會損失一部分精度
Number.MAX_VALUE
Number.MAX_SAFE_INTEGER 最大安全整數(shù) 2^53 -1
▲ 4 優(yōu)化首屏渲染的方式有哪幾種荧琼？
按需加載模塊或者組件
路由懶加載
npx vue-cli-service build --report 可以產(chǎn)看打包各個模塊的體積情況譬胎，從而針對性的去修改
圖片懶加載
減少http請求和dom數(shù)量
▲ 3 JavaScript 中的嚴(yán)格模式是什么，有什么作用命锄？
是一種規(guī)范js書寫與語法規(guī)范限制的一種標(biāo)準(zhǔn)
eval（）
with（）
arguments.callee:正在被執(zhí)行的函數(shù)
fun.caller：
變量聲明重復(fù)
預(yù)編譯this指向undefined
▲ 11 簡述項(xiàng)目打包和發(fā)布的流程
▲ 7 簡述瀏覽器的垃圾回收機(jī)制
1.標(biāo)記清除：當(dāng)變量進(jìn)入環(huán)境時(shí)堰乔，將變量標(biāo)記"進(jìn)入環(huán)境"，當(dāng)變量離開環(huán)境時(shí)脐恩，標(biāo)記為："離開環(huán)境"镐侯。某一個時(shí)刻，垃圾回收器會過濾掉環(huán)境中的變量驶冒，以及被環(huán)境變量引用的變量苟翻，剩下的就是被視為準(zhǔn)備回收的變量。
2.引用計(jì)數(shù)：判斷當(dāng)前變量被引用的次數(shù)骗污，判斷這個變量地址被引用的次數(shù)崇猫，當(dāng)被引用次數(shù)變?yōu)?，那么就會被回收
▲ 7 移動端適配有哪些方案需忿？
▲ 6 MVC 模型和 MVVM 模型的區(qū)別
▲ 12 簡述輸入 URL 到瀏覽器顯示的流程
url->判斷是否有緩存诅炉，有緩存則去緩存中取
>域名解析器->ip地址->對應(yīng)的資源服務(wù)器 ->
▲ 12 預(yù)編譯
▲ 10 簡述 Javascript 中 this 的指向有哪些

this的指向在函數(shù)定義的時(shí)候是確定不了的，只有函數(shù)執(zhí)行的時(shí)候才能確定this到底指向誰屋厘，實(shí)際上this的最終指向的是那個調(diào)用它的對象
this的作用范圍在于函數(shù)涕烧，和對象沒有關(guān)系
this只會指向調(diào)用者，o.b.fn() 指向o.b
new會改變this指向汗洒，如果返回引用值類型{},[],fn,this就會指向返回值持偏，如果返回值是原始值解取，就會指向?qū)嵗?箭頭函數(shù)的
函數(shù)定義時(shí)的this

▲ 9 簡述 jsonp 的工作原理
Script 標(biāo)簽本身的功能就是異步加載js并且會以js的方式解析執(zhí)行漱受。一旦在script的標(biāo)簽里加入src的屬性，瀏覽器執(zhí)行到這個標(biāo)簽時(shí)就回去 請求指定的地址憨攒，如果服務(wù)器返回的是js格式的代碼，甚至可以是js的函數(shù)阀参，只要是能被js解析的浓恶，都可以被執(zhí)行，這也就是jsonp的原理
▲ 9 簡述 Javascript 事件冒泡和事件捕獲原理
冒泡：即事件開始時(shí)由最具體的元素接收结笨，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)
▲ 8 如何解決 CSS 類名重名包晰？
1.人為規(guī)定
2.作用域scoped
▲ 8 簡述發(fā)布訂閱模式的實(shí)現(xiàn)方式以及原理
▲ 8 箭頭函數(shù)和普通函數(shù)的區(qū)別是什么？
1.箭頭函數(shù)不能夠當(dāng)做構(gòu)造函數(shù)炕吸，不能new操作
2.箭頭函數(shù)沒有arguments
3.箭頭函數(shù)沒有自己的this伐憾，只會捕獲上下文中的this作為自己的this，該函數(shù)定義時(shí)所在的this（不是執(zhí)行）
4.箭頭函數(shù)無法改變this指向
5.箭頭函數(shù)沒有原型
6.普通函數(shù)this指向調(diào)用者
▲ 7 簡述常見異步編程方案 (promise, generator, async) 的原理
Promise 為我們解決了什么問題赫模？在傳統(tǒng)的異步編程中树肃，如果異步之間存在依賴關(guān)系，就需要通過層層嵌套回調(diào)的方式滿足
這種依賴瀑罗，如果嵌套層數(shù)過多胸嘴，可讀性和可以維護(hù)性都會變得很差，產(chǎn)生所謂的“回調(diào)地獄”斩祭，而 Promise 將嵌套調(diào)用改為鏈
式調(diào)用劣像，增加了可閱讀性和可維護(hù)性。
▲ 6 簡述 Javascript 的柯里化與逆柯里化
柯里化其實(shí)是函數(shù)式編程的一個過程摧玫，在這個過程中我們能把一個帶有多個參數(shù)的函數(shù)轉(zhuǎn)換成一系列的嵌套函數(shù)耳奕。它返回一個新函數(shù)，這個新函數(shù)期望傳入下一個參數(shù)
優(yōu)點(diǎn)： 可以輕松的重用和配置
避免調(diào)用相同參數(shù)的函數(shù)
▲ 6 簡述常見的 HTTP 狀態(tài)碼的含義（301诬像，304屋群，401，403）
301：永久重定向
302：臨時(shí)重定向
304：請求未修改
400：客戶端錯誤
401：沒有訪問權(quán)坏挠，需要認(rèn)證
403：服務(wù)端拒絕執(zhí)行請求
404：請求資源未找到
▲ 4 數(shù)組去重有哪些方式芍躏？手寫數(shù)組去重
set容器,對象key值方法，indexOf降狠，for*2
▲ 4 Vue 組件間是如何進(jìn)行通信的对竣？
1.父子組件
父-子 props 子-父EventBus = new Vue() vue的原型上掛載一個new Vue()
發(fā)送事件：this.emit()
接收事件：off()

    缺點(diǎn)：單頁面程序刷新會移除所有的eventbus钥勋，當(dāng)前的業(yè)務(wù)可能會斷裂，所以切記在頁面銷毀的時(shí)候移除
    原理：它的工作原理是發(fā)布/訂閱方法辆苔，通常稱為 Pub/Sub 算灸。兩個方法$on和$emit。一個用于創(chuàng)建發(fā)出的事件驻啤，它就是$emit菲驴；另一個用于訂閱$on：

▲ 2 CSS3 有哪些新特性
邊框圓角，邊框圖片骑冗，flex布局赊瞬，偽類，漸變背景贼涩，動畫
▲ 2 CSS 的 position 常用值有哪些巧涧，有什么區(qū)別？
relative
absolute
static
fixed
inherit
▲ 1 CSS3 如何實(shí)現(xiàn)漸變色遥倦？
background-image: linear-gradient(angle, color-stop1, color-stop2);
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
▲ 1 flex 常用的屬性有哪些褒侧？flex: 1 1 0 是什么意思？
父元素{
flex-flow:
flex-direction：row谊迄，row-reverse闷供，cloumn,cloumn-reverse
flex-wrap : wrap , nowrap , wrap-reverse
jusitfy-content : flex-start,flex-end,center,
space-betwwen(兩邊沒有空隙),space-around(兩邊有空隙)
align-items:flex-start,flex-end,center,baseline,stretch
align-content（控制多行在豎直方向上的對齊方式，只有一行的話不會起作用）:
flex-start,flex-end,center,stretch,space-between,space-around
}
子元素{
order:
flex{
flex-grow：0统诺，有剩余空間歪脏，按照各個值的比例分配剩余空間
flex-shirk：1 沒有剩余空間，所有item都會縮小粮呢，設(shè)置縮小的比例婿失，0表示不縮小，不能為負(fù)值
flex-basis：auto啄寡，對item設(shè)置特定的寬高豪硅，
}
align-self: 某一個item豎直方向上的對齊方式，
}
▲ 1 如何實(shí)現(xiàn) div 元素水平垂直居中
1.flex布局
2.子絕父相挺物，letf50% margin-1/2width（tansform:translate(-50%,50%)
3..........四邊0
▲ 1 什么情況下 z-index 不生效懒浮？
只有定位的元素（即position屬性值不是static的元素）的z-index才會起作用。
▲ 8 簡述 Javascript 的數(shù)據(jù)類型
原始值：String Boolean Number null undefined
引用值：Array Object Function
▲ 7 簡述 webpack 的打包流程
webpack是模塊打包器，主要是分析各個模塊的的依賴關(guān)系砚著，把復(fù)雜的文件依賴打包成單獨(dú)的文件次伶，并且可以把高級語法轉(zhuǎn)化成瀏覽器可以識別的語法
1、安裝babel的一系列插件
2稽穆、函數(shù)1：讀取文件信息冠王，并獲取當(dāng)前js文件的依賴關(guān)系：會返回下面的數(shù)據(jù)結(jié)構(gòu)，這里包括了模塊的id舌镶，文件路徑柱彻，依賴數(shù)組（entry.js依賴了message.js，所以會返回依賴的文件名）
3餐胀、函數(shù)2：從入口開始分析所有的依賴绒疗，形成依賴圖，采用廣度遍歷：遍歷函數(shù)的依賴文件數(shù)組
4骂澄、函數(shù)3：根據(jù)生成的依賴關(guān)系圖吓蘑，生成瀏覽器可以執(zhí)行的文件：處理模塊關(guān)系數(shù)組，

▲ 6 簡述 CSS 盒模型
標(biāo)準(zhǔn)盒模型：margin border padding content（width只有content）
IE盒模型：width包括 border + padding + content
可以通過box-sizing：border-box（IE）
content-box（默認(rèn)）
▲ 4 rem 與 em 的區(qū)別以及使用場景
谷歌瀏覽器默認(rèn)最小的font-size是12px坟冲，低于12的默認(rèn)展示12px
em:首先會依據(jù)當(dāng)前元素的font-size為基準(zhǔn),無論單位是什么磨镶，只要有fontsize屬性,如果沒有則相對于父元素的單位。
rem：會根據(jù)根元素為標(biāo)準(zhǔn)(html默認(rèn)fontsize為16px)
▲ 3 const, let, var 關(guān)鍵字有什么區(qū)別健提？
1琳猫、變量提升
2.作用域，暫時(shí)性死區(qū)
3.const定義變量的地址不能被修改
▲ 9 readyState 的不同返回值有什么區(qū)別私痹？
0：表示未初始化脐嫂，1表示服務(wù)器連接已經(jīng)建立，2表示正在發(fā)送請求紊遵，3表示正在處理請求账千，4表示請求結(jié)束完成響應(yīng)
let xhr = new XMLHttpRequest
xhr.open(httpMethos,url,isAsync)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200)
m = xhr.responseText
}
xhr.send()
▲ 2 實(shí)現(xiàn)三欄布局
1、float布局：左側(cè)左浮動暗膜，右側(cè)右浮動匀奏，中間margin左右
2、position布局：左側(cè)left0学搜，右側(cè)right0娃善，中間left左寬，right右寬
3瑞佩、flex布局
▲ 1 正則表達(dá)式 /w 是什么意思聚磺？
看看
▲ 1 什么是可繼承元素和不可繼承元素？
font,font-size,color,text-align,line-height,font-family,

**extTick 是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)炬丸，在修改數(shù)據(jù)之后使用
$nextTick瘫寝，則可以在回調(diào)中獲取更新后的 DOM
computed和methods
執(zhí)行結(jié)果相同
computed: 計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,只有在它的相關(guān)依賴發(fā)生改變時(shí)才會重新求值
method ，只要發(fā)生重新渲染，method 調(diào)用總會執(zhí)行該函數(shù)
keep-alive

include：字符串或者正則表達(dá)式矢沿，匹配成功的會被緩存
exclude：字符串或者正則表達(dá)式，匹配成功的不會被緩存
是vue內(nèi)置的一個組件酸纲，可以使被包含的組件保留狀態(tài)或是避免重新渲染

for循環(huán)的key
主要用在vue的虛擬Dom算法上捣鲸，用于識別新舊節(jié)點(diǎn)， 當(dāng)數(shù)據(jù)變化后闽坡，可以最大程度的識別新增或者減少的節(jié)點(diǎn)栽惶，實(shí)現(xiàn)高效的更新
·····································································
BFC的理解，
display：inline-block
float
overflow：疾嗅！visiable
position：absolute外厂、fixed

選擇器,層級上下文，
自適應(yīng)布局rem原理(如何兼容不同手機(jī)dpi)代承，
font-size 10px如何實(shí)現(xiàn)汁蝶、
縮放
移動端一像素
旋轉(zhuǎn)
媒體查詢

js為什么需要放在body(更好的回答其實(shí)是瀏覽器的渲染引擎和js解析引擎的沖突，當(dāng)然回答js是單線程執(zhí)行也沒問題,如何優(yōu)化)论悴？
操作DOM為什么是昂貴的掖棉？
操作dom，會出發(fā)頁面進(jìn)行重繪和重排膀估，這些操作會嚴(yán)重影響瀏覽器的渲染性能幔亥，
優(yōu)秀的框架：vue的虛擬dom和diff算法
事件委托

oop編程？
oop:面向?qū)ο缶幊蹋ㄓ?jì)算機(jī)編程架構(gòu)）：三大基本特性：封裝察纯，繼承帕棉，多態(tài)
注重對象，當(dāng)解決一個問題的時(shí)候饼记，面向?qū)ο髸咽挛锍橄蟪蓪ο蟮母拍钕惆椋褪钦f這個問題里面有哪些對象，然后給對象賦一些屬性和方法具则，然后讓每個對象去執(zhí)行自己的方法瞒窒，問題得到解決。
面向過程：注重過程的乡洼。當(dāng)解決一個問題的時(shí)候崇裁，面向過程會把事情拆分成： 一個個函數(shù)和數(shù)據(jù)（用于方法的參數(shù)） 。然后按照一定的順序束昵，執(zhí)行完這些方法（每個方法看作一個過程）拔稳，等方法執(zhí)行完了，事情就搞定了锹雏。

js深拷貝巴比？（JSON方法實(shí)現(xiàn)拷貝有什么問題？）
1、原生遞歸方式：deepClone
2轻绞、JSON轉(zhuǎn)換,不能對函數(shù)和一些特殊的對象進(jìn)行處理
3采记、Object.assign()，只能對一級進(jìn)行克隆政勃，二級不會克隆唧龄，Object.assign({},target)
————————————————————————————————————————————————————————————————————————
數(shù)組亂序-洗牌算法
1、洗牌算法:從數(shù)組末位置開始計(jì)算奸远，找到一個隨機(jī)的位置進(jìn)行位置互換既棺，循環(huán)操作
2、sort(function(){ return .5-Math.random()}) a-b>0升序懒叛，反之降序 不同瀏覽器的js引擎對sort方法實(shí)現(xiàn)算法不一樣丸冕，有冒泡，快排薛窥，插入排序
手動實(shí)現(xiàn)instanceof
function _instanceof(L,R){
let _R = R.prototype
while(true){
L = L.proto
if(L === null){
return false
}
if(L === _R){
return true
}
}
}

vue路由守衛(wèi)
全局：beforeEach胖烛，beforeResolve,afterEach
路由獨(dú)享:beforeEnter
組件:beforeRouteEnter、beforeRouteUpdate (2.2+)诅迷、beforeRouteLeave三個
vuex 和 全局變量的區(qū)別
1洪己、響應(yīng)式
2、修改狀態(tài)的方式
3竟贯、命名沖突

node常用模塊
http:用來創(chuàng)建服務(wù)器
path：常用來處理文件路徑答捕，通過path上的api可以路徑信息上的參數(shù)，除此之外也有很多方法來解決實(shí)際遇到的問題屑那，拼接和容錯處理
fs：處理文件拱镐，對文文件進(jìn)行讀取和操作
url:對地址進(jìn)行操作
events:對事件進(jìn)行處理，監(jiān)聽持际，移除 發(fā)出等操作

webpack中l(wèi)oder和plugin區(qū)別
loader 用于加載某些資源文件沃琅。 因?yàn)閣ebpack 本身只能打包c(diǎn)ommonjs規(guī)范的js文件，對于其他資源例如 css蜘欲，圖片益眉，或者其他的語法集，比如 jsx姥份， coffee郭脂，是沒有辦法加載的。 這就需要對應(yīng)的loader將資源轉(zhuǎn)化澈歉，加載進(jìn)來展鸡。從字面意思也能看出，loader是用于加載的埃难，它作用于一個個文件上莹弊。

對于plugin涤久，它就是一個擴(kuò)展器，它豐富了wepack本身忍弛，針對是loader結(jié)束后响迂，webpack打包的整個過程，它并不直接操作文件內(nèi)容细疚，而是基于事件機(jī)制工作蔗彤，會監(jiān)聽webpack打包過程中的某些節(jié)點(diǎn)

面試題：
webpack中常用的loader和plugin
判斷對象或者是數(shù)組
判斷是一個空對象
兩個字符串的最短相同子串

didi

css選擇第二個a標(biāo)簽 (元素，類惠昔，id幕与，屬性挑势，派生) li:nth-child(3){background:#090} nth-last-of-type() 作用類似镇防，但是僅匹配使用同種標(biāo)簽的元素 input[type="text"]
bfc： display float overflow position
設(shè)計(jì)一個抽獎系統(tǒng)
typeof instanceof（一個對象的原型鏈上是否存在另一個對象的原型） 返回值不一樣，
diff
數(shù)組扁平化 reduce遞歸 循環(huán)遞歸 while三點(diǎn)運(yùn)算符 Array.flat
function flatten(arr) {
return arr.reduce((result, item)=> {
return result.concat(Array.isArray(item) ? flatten(item) : item);
}, []);
}
手寫promise
js單線程潮饱？ 作為瀏覽器腳本語言来氧，JavaScript 的主要用途是與用戶互動，以及操作 DOM香拉。這決定了它只能是單線程啦扬，
觀察者模式
saas

二叉樹

冒泡，排序的算法
webpack相關(guān)
vue的filters
動態(tài)規(guī)劃
字符串模板的方法