vue進階面試題（大廠直通車）

1.什么叫優(yōu)雅降級和漸進增強？

優(yōu)雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全不能用。

如：border-shadow

漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁面增加不影響基礎(chǔ)瀏覽器的額外樣式和功能的。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。

如：默認使用flash上傳，但如果瀏覽器支持 HTML5 的文件上傳功能，則使用HTML5實現(xiàn)更好的體驗；

2.區(qū)分XSS和CSRF

XSS攻擊

XSS攻擊：指的是跨腳本攻擊，指的是攻擊者在網(wǎng)頁中嵌套，惡意腳本程序，當(dāng)用戶打開網(wǎng)頁時，程序開始在瀏覽器上啟動，盜取用戶的cooks，從而盜取密碼等信息，下載執(zhí)行木馬程序。

解決方法：XSS之所以會發(fā)生,是因為用戶輸入的數(shù)據(jù)變成了代碼。因此,我們需要對用戶輸入的數(shù)據(jù)進行HTML轉(zhuǎn)義處理,將其中的“尖括號”、“單引號”、“引號” 之類的特殊字符進行轉(zhuǎn)義編碼。

xss：跨站點攻擊。xss攻擊的主要目的是想辦法獲取目標(biāo)攻擊網(wǎng)站的cookie，因為有了cookie相當(dāng)于有了session，有了這些信息就可以在任意能接進互聯(lián)網(wǎng)的PC登陸該網(wǎng)站，并以其他人的身份登陸做破壞。預(yù)防措施防止下發(fā)界面顯示html標(biāo)簽，把</>等符號轉(zhuǎn)義。

csrf：跨站點偽裝請求。csrf攻擊的主要目的是讓用戶在不知情的情況下攻擊自己已登錄的一個系統(tǒng)，類似于釣魚。如用戶當(dāng)前已經(jīng)登陸了郵箱或bbs，同時用戶又在使用另外一個，已經(jīng)被你控制的網(wǎng)站，我們姑且叫它釣魚網(wǎng)站。這個網(wǎng)站上面可能因為某個圖片吸引你，你去點擊一下，此時可能就會觸發(fā)一個js的點擊事件，構(gòu)造一個bbs發(fā)帖的請求，去往你的bbs發(fā)帖，由于當(dāng)前你的瀏覽器狀態(tài)已經(jīng)是登陸狀態(tài)，所以session登陸cookie信息都會跟正常的請求一樣，純天然的利用當(dāng)前的登陸狀態(tài)，讓用戶在不知情的情況下，幫你發(fā)帖或干其他事情。預(yù)防措施，請求加入隨機數(shù)，讓釣魚網(wǎng)站無法正常偽造請求。

3.輸入完網(wǎng)址按下回車,到看到網(wǎng)頁這個過程中發(fā)生了什么?

1.域名解析

2.發(fā)起TCP3次握手

3.建立TCP連接后發(fā)起http請求

4.服務(wù)器端響應(yīng)http請求,瀏覽器得到HTML代碼

5.瀏覽器解析HTML代碼，并請求HTML代碼中的資源

6.瀏覽器對頁面進行渲染呈現(xiàn)給用戶

4.http緩存

（1）什么是HTTP緩存 ？

http緩存指的是: 當(dāng)客戶端向服務(wù)器請求資源時，會先抵達瀏覽器緩存，如果瀏覽器有“要請求資源”的副本，就可以直接從瀏覽器緩存中提取而不是從原始服務(wù)器中提取這個資源。

強制緩存，協(xié)商緩存

1.1.強制緩存

強制緩存在緩存數(shù)據(jù)未失效的情況下（即Cache-Control的max-age沒有過期或者Expires的緩存時間沒有過期），那么就會直接使用瀏覽器的緩存數(shù)據(jù)，不會再向服務(wù)器發(fā)送任何請求。強制緩存生效時，http狀態(tài)碼為200。這種方式頁面的加載速度是最快的，性能也是很好的，但是在這期間，如果服務(wù)器端的資源修改了，頁面上是拿不到的，因為它不會再向服務(wù)器發(fā)請求了。這種情況就是我們在開發(fā)種經(jīng)常遇到的，比如你修改了頁面上的某個樣式，在頁面上刷新了但沒有生效，因為走的是強緩存，所以Ctrl + F5一頓操作之后就好了。 跟強制緩存相關(guān)的header頭屬性有（Pragma/Cache-Control/Expires）

1.2.協(xié)商緩存

當(dāng)?shù)谝淮握埱髸r服務(wù)器返回的響應(yīng)頭中沒有Cache-Control和Expires或者Cache-Control和Expires過期還或者它的屬性設(shè)置為no-cache時(即不走強緩存)，那么瀏覽器第二次請求時就會與服務(wù)器進行協(xié)商，與服務(wù)器端對比判斷資源是否進行了修改更新。如果服務(wù)器端的資源沒有修改，那么就會返回304狀態(tài)碼，告訴瀏覽器可以使用緩存中的數(shù)據(jù)，這樣就減少了服務(wù)器的數(shù)據(jù)傳輸壓力。如果數(shù)據(jù)有更新就會返回200狀態(tài)碼，服務(wù)器就會返回更新后的資源并且將緩存信息一起返回。跟協(xié)商緩存相關(guān)的header頭屬性有（ETag/If-Not-Match 、Last-Modified/If-Modified-Since）請求頭和響應(yīng)頭需要成對出現(xiàn)

5.服務(wù)端渲染 SSR or 預(yù)渲染

服務(wù)端渲染是指 Vue 在客戶端將標(biāo)簽渲染成的整個 html 片段的工作在服務(wù)端完成，服務(wù)端形成的 html 片段直接返回給客戶端這個過程就叫做服務(wù)端渲染。

1.服務(wù)端渲染的優(yōu)點：

更好的 SEO： 因為 SPA 頁面的內(nèi)容是通過 Ajax 獲取，而搜索引擎爬取工具并不會等待 Ajax 異步完成后再抓取頁面內(nèi)容，所以在 SPA 中是抓取不到頁面通過 Ajax 獲取到的內(nèi)容；而 SSR 是直接由服務(wù)端返回已經(jīng)渲染好的頁面（數(shù)據(jù)已經(jīng)包含在頁面中），所以搜索引擎爬取工具可以抓取渲染好的頁面；

更快的內(nèi)容到達時間（首屏加載更快）： SPA 會等待所有 Vue 編譯后的 js 文件都下載完成后，才開始進行頁面的渲染，文件下載等需要一定的時間等，所以首屏渲染需要一定的時間；SSR 直接由服務(wù)端渲染好頁面直接返回顯示，無需等待下載 js 文件及再去渲染等，所以 SSR 有更快的內(nèi)容到達時間；

2.服務(wù)端渲染的缺點：

更多的開發(fā)條件限制： 例如服務(wù)端渲染只支持 beforCreate 和 created 兩個鉤子函數(shù)，這會導(dǎo)致一些外部擴展庫需要特殊處理，才能在服務(wù)端渲染應(yīng)用程序中運行；并且與可以部署在任何靜態(tài)文件服務(wù)器上的完全靜態(tài)單頁面應(yīng)用程序 SPA 不同，服務(wù)端渲染應(yīng)用程序，需要處于 Node.js server 運行環(huán)境；

更多的服務(wù)器負載：在 Node.js 中渲染完整的應(yīng)用程序，顯然會比僅僅提供靜態(tài)文件的 server 更加大量占用CPU 資源，因此如果你預(yù)料在高流量環(huán)境下使用，請準(zhǔn)備相應(yīng)的服務(wù)器負載，并明智地采用緩存策略。

如果你的項目的 SEO 和 首屏渲染是評價項目的關(guān)鍵指標(biāo)，那么你的項目就需要服務(wù)端渲染來幫助你實現(xiàn)最佳的初始加載性能和 SEO。如果你的 Vue 項目只需改善少數(shù)營銷頁面（例如 /products， /about， /contact 等）的 SEO，那么你可能需要預(yù)渲染，在構(gòu)建時 (build time) 簡單地生成針對特定路由的靜態(tài) HTML 文件。優(yōu)點是設(shè)置預(yù)渲染更簡單，并可以將你的前端作為一個完全靜態(tài)的站點，具體你可以使用 prerender-spa-plugin 就可以輕松地添加預(yù)渲染 。

6.網(wǎng)站性能優(yōu)化

1、http請求方面，減少請求數(shù)量，請求體積，對應(yīng)的做法是，對項目資源進行壓縮，控制項目資源的dns解析在2到4個域名，提取公告的樣式，公共的組件，雪碧圖，緩存資源，

2、壓縮資源，提取公共資源壓縮，提取css ,js公共方法

3、不要縮放圖片，使用雪碧圖，使用字體圖表(阿里矢量圖庫)

4、使用CDN，拋開無用的cookie

5、減少重繪重排，CSS屬性讀寫分離，最好不要用js修改樣式，dom 離線更新，渲染前指定,圖片的大小

6、js代碼層面的優(yōu)化，減少對字符串的計算,合理使用閉包，首屏的js資源加載放在最底部

7.項目優(yōu)化

1、v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if

2、v-if 和 v-show 區(qū)分使用場景

v-if是 真正 的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建；也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。

v-show就簡單得多， 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 的 display 屬性進行切換。

所以，v-if 適用于在運行時很少改變條件，不需要頻繁切換條件的場景；v-show則適用于需要非常頻繁切換條件的場景。

3、computed 和 watch 區(qū)分使用場景

computed： 是計算屬性，依賴其它屬性值，并且 computed 的值有緩存，只有它依賴的屬性值發(fā)生改變，下一次獲取 computed 的值時才會重新計算 computed 的值；

watch： 更多的是「觀察」的作用，類似于某些數(shù)據(jù)的監(jiān)聽回調(diào) ，每當(dāng)監(jiān)聽的數(shù)據(jù)變化時都會執(zhí)行回調(diào)進行后續(xù)操作

4、長列表性能優(yōu)化

Vue 會通過 Object.defineProperty 對數(shù)據(jù)進行劫持，來實現(xiàn)視圖響應(yīng)數(shù)據(jù)的變化，然而有些時候我們的組件就是純粹的數(shù)據(jù)展示，不會有任何改變，我們就不需要 Vue 來劫持我們的數(shù)據(jù)，在大量數(shù)據(jù)展示的情況下，這能夠很明顯的減少組件初始化的時間，那如何禁止 Vue 劫持我們的數(shù)據(jù)呢？可以通過 Object.freeze 方法來凍結(jié)一個對象，一旦被凍結(jié)的對象就再也不能被修改了。

5、圖片資源懶加載

6、路由懶加載

7、第三方插件的按需引入

8.性能優(yōu)化

編碼階段

盡量減少data中的數(shù)據(jù)，data中的數(shù)據(jù)都會增加getter和setter，會收集對應(yīng)的watcher

v-if和v-for不能連用

如果需要使用v-for給每項元素綁定事件時使用事件代理

SPA 頁面采用keep-alive緩存組件

在更多的情況下，使用v-if替代v-show

key保證唯一

使用路由懶加載、異步組件

防抖、節(jié)流

第三方模塊按需導(dǎo)入

長列表滾動到可視區(qū)域動態(tài)加載

圖片懶加載

SEO優(yōu)化

預(yù)渲染

服務(wù)端渲染SSR

打包優(yōu)化

壓縮代碼

Tree Shaking/Scope Hoisting

使用cdn加載第三方模塊

多線程打包happypack—-不常用

splitChunks抽離公共文件

sourceMap優(yōu)化

用戶體驗

骨架屏

PWA—不常用

客戶端緩存、服務(wù)端緩存

9.git提交時發(fā)生沖突，你能解釋沖突是如何產(chǎn)生的嗎？你是如何解決的？

開發(fā)過程中，我們都有自己的特性分支，所以沖突發(fā)生的并不多，但也碰到過。諸如公共類的公共方法，我和別人同時修改同一個文件，他提交后我再提交就會報沖突的錯誤。

發(fā)生沖突，在IDE里面一般都是對比本地文件和遠程分支的文件，然后把遠程分支上文件的內(nèi)容手工修改到本地文件，然后再提交沖突的文件使其保證與遠程分支的文件一致，這樣才會消除沖突，然后再提交自己修改的部分。特別要注意下，修改本地沖突文件使其與遠程倉庫的文件保持一致后，需要提交后才能消除沖突，否則無法繼續(xù)提交。必要時可與同事交流，消除沖突。

發(fā)生沖突，也可以使用命令。

通過git stash命令，把工作區(qū)的修改提交到棧區(qū)，目的是保存工作區(qū)的修改；

通過git pull命令，拉取遠程分支上的代碼并合并到本地分支，目的是消除沖突；

通過git stash pop命令，把保存在棧區(qū)的修改部分合并到最新的工作空間中；

10.JS的垃圾回收機制?

Js具有自動垃圾回收機制。垃圾收集器會按照固定的時間間隔周期性的執(zhí)行。

JS中最常見的垃圾回收方式是標(biāo)記清除。

工作原理：是當(dāng)變量進入環(huán)境時，將這個變量標(biāo)記為“進入環(huán)境”。當(dāng)變量離開環(huán)境時，則將其標(biāo)記為“離開環(huán)境”。標(biāo)記“離開環(huán)境”的就回收內(nèi)存。

工作流程：

垃圾回收器，在運行的時候會給存儲在內(nèi)存中的所有變量都加上標(biāo)記。

去掉環(huán)境中的變量以及被環(huán)境中的變量引用的變量的標(biāo)記。

再被加上標(biāo)記的會被視為準(zhǔn)備刪除的變量。

垃圾回收器完成內(nèi)存清除工作，銷毀那些帶標(biāo)記的值并回收他們所占用的內(nèi)存空間。

引用計數(shù) 方式

工作原理：跟蹤記錄每個值被引用的次數(shù)。

工作流程：

聲明了一個變量并將一個引用類型的值賦值給這個變量，這個引用類型值的引用次數(shù)就是1。

同一個值又被賦值給另一個變量，這個引用類型值的引用次數(shù)加1.

當(dāng)包含這個引用類型值的變量又被賦值成另一個值了，那么這個引用類型值的引用次數(shù)減1.

當(dāng)引用次數(shù)變成0時，說明沒辦法訪問這個值了。

當(dāng)垃圾收集器下一次運行時，它就會釋放引用次數(shù)是0的值所占的內(nèi)存。

但是循環(huán)引用的時候就會釋放不掉內(nèi)存。循環(huán)引用就是對象A中包含另一個指向?qū)ο驜的指針，B中也包含一個指向A的引用。

因為IE中的BOM、DOM的實現(xiàn)使用了COM，而COM對象使用的垃圾收集機制是引用計數(shù)策略。所以會存在循環(huán)引用的問題。

解決：手工斷開js對象和DOM之間的鏈接。賦值為null。IE9把DOM和BOM轉(zhuǎn)換成真正的JS對象了，所以避免了這個問題。

11.diff 算法

diff 算法原理

Diff算法的作用是用來計算出 Virtual DOM 中被改變的部分，然后針對該部分進行原生DOM操作，

而不用重新渲染整個頁面。

在采取diff算法比較新舊節(jié)點的時候，比較只會在同層級進行, 不會跨層級比較。

diff流程圖

當(dāng)數(shù)據(jù)發(fā)生改變時，set方法會讓調(diào)用Dep.notify通知所有訂閱者Watcher，訂閱者就會調(diào)用patch給真實的DOM打補丁，更新相應(yīng)的視圖。

1、舊數(shù)組為空，將新數(shù)組的剩余元素插入；

2、新數(shù)組為空，將舊數(shù)組的剩余元素刪除；

3、新、舊數(shù)組都不為空，執(zhí)行第二步。

#### 二、找到需要被刪除、插入、移動的元素

數(shù)組p：與新數(shù)組的長度相同，與新數(shù)組是相互映射關(guān)系，

元素在舊數(shù)組中的索引 存儲在 元素在新數(shù)組中的位置

##### 三、找到最少的移動次數(shù)

1、找到 P 數(shù)組的最長遞增子序列來做動態(tài)規(guī)劃，新集合中不屬于這個序列的將會被移動。

2、同時尾部遍歷新數(shù)組和 LIS 序列，查看元素的位置是否能與 LIS 序列的任何一個值匹配：

a：可以匹配，保留位置；

b：不能匹配，移動到到前面；

c：找不到，插入元素；

12.vue的生命周期

總共分為8個階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。

創(chuàng)建前/后： 在beforeCreate階段，vue實例的掛載元素$el和數(shù)據(jù)對象data都為undefined，還未初始化。在created階段，vue實例的數(shù)據(jù)對象data有了，$el還沒有。

載入前/后：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。

更新前/后：當(dāng)data變化時，會觸發(fā)beforeUpdate和updated方法。

銷毀前/后：beforeDestroy在執(zhí)行destroyed方法后，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在

?

內(nèi)容有些多，大家可以先點贊收藏，但一定要去看。當(dāng)你把大廠面試題知識點都看完并且理解了，以后就沒有你過不了的前端面試。資源都幫你整理好了，還不學(xué)就有些說不過去了。

更多學(xué)習(xí)資料以及面試題庫，需要的伙伴點擊下方可以無償獲?。?！

不凡學(xué)院更多優(yōu)質(zhì)視頻

?