阿里影業(yè)

一面（11分鐘）：

面試官：你好，我是阿里影業(yè)的，這邊由我對你進行一下面試歌殃，面試時間大概在20分鐘，請問你方便嗎蝙云？

我：稍等氓皱，我走出來下（上班上到一半突然被電話面試，真是出其不意）勃刨，嗯波材，好了，可以開始了身隐。

面試官：不使用任何框架實現(xiàn)給dom節(jié)點加一個類名廷区？

我：dom節(jié)點有一個classList屬性，這個屬性有一個add方法贾铝，直接給dom節(jié)點添加一個類名就行隙轻。

面試官：那classList有兼容問題，怎么處理呢垢揩？

我：如果要考慮兼容問題的話玖绿，我們可以用dom節(jié)點的另一個方法setAttribute,先獲取dom節(jié)點的class屬性，通過getAttribute(‘class’),然后用indexOf把對應(yīng)的類名判斷下是否存在叁巨，如果存在斑匪，則不用再添加，如果不存在直接在獲取的類名字符串后加一個類名锋勺，再setAttribute進去蚀瘸。

面試官：你剛才說的indexOf它對于匹配abc，和ab都是可以匹配上的宙刘，怎么處理呢苍姜？

我：如果要考慮嚴(yán)謹(jǐn)?shù)脑挘覀兛梢杂胹plit把getAttribute(‘class’)進行分割悬包，然后將每個分割的值trim后衙猪，去和你的類名比較，如果存在的話就不再添加類名布近，這樣就可以處理indexOf匹配abc和ab問題了垫释。

面試官：如何對一個字符串?dāng)?shù)組去重？

我：可以聲明一個空對象撑瞧，和聲明一個空數(shù)組棵譬，然后遍歷這個字符串，將遍歷到的字符串的值存到空對象內(nèi)作為對象的key,然后值為true,然后插入到新數(shù)組中预伺，數(shù)組接著遍歷订咸，如果對象的key值已經(jīng)有這個key了曼尊，就不插入新數(shù)組中，最后返回數(shù)組脏嚷。

面試官：如何隨機輸出一個5-10的數(shù)字骆撇。

我：隨機數(shù)可以用Math.random()輸出一個0~1的數(shù)值，然后用這個數(shù)字乘以十父叙，取整神郊，然后除以二（忘了說再加五了）就可以滿足你說的結(jié)果了。

面試官：講下簡單請求趾唱。

我：簡單請求就是我們平時請求看到的接口請求涌乳，沒有進行options請求。而預(yù)檢請求就是你說的非簡單請求會進行一次options甜癞。

面試官：那你講講怎么樣才會觸發(fā)非簡單請求呢夕晓？

我：請求頭中出現(xiàn)超過兩個類型的時候就會觸發(fā)預(yù)檢請求。（這個回答應(yīng)該是錯的悠咱，后面我查了运授，滿足下面的所有條件就不會產(chǎn)生預(yù)檢請求，也就是該請求是簡單請求：

不會產(chǎn)生預(yù)檢請求乔煞。具體來說如下

**請求方法是GET吁朦、POST、HEAD其中任意一個渡贾；

**必須是下面定義對CORS安全的首部字段集合逗宜，不能是集合之外的其他首部字段。

Accept空骚、Accept-Language纺讲、Content-Language、Content-Type囤屹、DPR熬甚、Downlink、Save-Data肋坚、Viewport-Width乡括、Width。

Content-Type的值必須是text/plain智厌、multipart/form-data诲泌、application/x-www-form-urlencoded中任意一個值

面試官：再問你幾個問題吧，你正常是用display:flex吧铣鹏。

我：對的敷扫。

面試官：rem有用過嗎？

我：rem和em一個是基于根節(jié)點成比例換算诚卸，一個是根據(jù)父節(jié)點成比例換算葵第，而rem是根據(jù)html的font-size做比例換算绘迁。

面試官：那rem是怎么做移動端響應(yīng)式的呢？你主要講下核心就行卒密。

我：首先設(shè)置一下html根節(jié)點的font-size,然后根據(jù)瀏覽器縮放脊髓，動態(tài)換算html的font-size大小，這樣html子元素們有設(shè)置的rem就會實時換算栅受，從而達到響應(yīng)式兼容。

面試官：如果瀏覽器大小改變了恭朗，根節(jié)點的font-size會改變嗎屏镊？

我：會改變的。這邊等了5秒所有痰腮，我繼續(xù)作答而芥，如果不想改變也可以，我之前有處理過在不同設(shè)備的時候膀值，會給font-size在屏幕大小范圍內(nèi)設(shè)置固定的font-size棍丐，這個可以處理對于一些設(shè)備的1px和0.5px像素問題。

面試官：flex有幾個屬性沧踏。

我：平時都是用flex:1歌逢，它有幾個屬性倒不是很清楚(后面查了有flex-grow、flex-shrink翘狱、flex-basis)秘案。

面試官：那你知道flex-grow、flex-shrink嗎潦匈？

我：flex-shrink我平時用都是設(shè)置為0阱高，表示不被擠壓，flex-grow用的比較少(其實就是不懂茬缩，并且常常都在用~很氣自己基礎(chǔ)不夠扎實)赤惊。

面試官：講講你平時有什么技術(shù)沉淀呢？

我：我封裝了一個element-form組件的npm包凰锡，之前周下載量最高可達2000未舟。

面試官：這個在你簡歷上好像沒體現(xiàn)呀！

我：嗯掂为，現(xiàn)在因為目前公司都是內(nèi)網(wǎng)处面，就沒什么時間去更新那個npm包了，所以下載量沒那么多了菩掏，就不大好意思寫在簡歷上魂角。

面試官：那我們今天的面試就到這，如果有下一輪會再通知你智绸。

我：好的野揪，拜拜访忿。

二面（30分鐘）：

1.設(shè)計模型

2.作用域鏈

3.設(shè)計模式、設(shè)計原則

4.兼容性

5.BFC

6.函數(shù)式編程

7.什么事件不能冒泡

8.如何學(xué)習(xí)

京東

一面總結(jié)(90分鐘)：

1.自我介紹環(huán)節(jié)

2.講下vue傳值有幾種方式

3.講下vue2和vue3有什么區(qū)別

4.this.$message如何實現(xiàn)的斯稳，講下原理

5.instanceof是如何做比對的

6.如何實現(xiàn)一個訂閱模式

7.觀察者和訂閱發(fā)布的區(qū)別

8.什么是委托海铆，他有什么優(yōu)點

9.講講數(shù)組怎么去重

10.webpack中的hash、chunkhash挣惰、contentChunk有什么區(qū)別

11.你都做過哪些webpack優(yōu)化

12.講下路由hash和history的區(qū)別

13.講下路由權(quán)限如何控制

14.bind卧斟、call是如何做到this指向的

15.vue中的v-for中的key作用是什么？key如果用index會有什么問題憎茂？

16.講下js中的event loop

17.watch和computed哪個性能更好

18.vue組件銷毀你都做了什么

19.vue平時用到哪些鉤子函數(shù)

20.如何自己封裝組件珍语，餓了么組件所有屬性如何繼承，所有事件如何也都繼承呢竖幔？

21.babel中的preset-env和pollyfill有什么區(qū)別

22.了解過微前端嗎板乙？

23.用過node嗎？

24.配過nginx嗎拳氢？

25.遇到過什么問題募逞？

26.webpack中如何排除cdn庫

微盟

一面：(用時1小時5分鐘-騰訊會議語音)

面試官：請問你是叫某某某嗎？

我：對的馋评。

面試官：我先問兩個問題放接，你用什么技術(shù)棧，是做to B還是 to C多一些留特？

我：vue透乾，to B。

面試官：嗯磕秤，那我們開始正式進入面試環(huán)節(jié)乳乌；以下是我們面試的整個流程：

1.css

2.js

3.網(wǎng)絡(luò)&安全

4.框架

5.工程化

我們總時間大概在一個小時左右。

我：好的市咆。

面試官：那請做下簡單的自我介紹開始汉操。

我：好的，那我開始做一下自我介紹蒙兰，你好磷瘤，我叫某某某，今年多少歲了搜变，目前就職于某某公司采缚，主要負(fù)責(zé)balabalabala…..

css方向：

面試官：請回答下盒子模式是什么？

我：盒子模式分為標(biāo)準(zhǔn)模式下和怪異模式下挠他，首先標(biāo)準(zhǔn)模式下盒子模型包括外面距扳抽、邊框、內(nèi)邊距、內(nèi)容贸呢；怪異模式下的盒子模型包括外邊距镰烧，內(nèi)容(邊框和內(nèi)邊距和內(nèi)容)。

面試官：那什么場景會需要用到怪異模式楞陷？

我：balabalabala…心想不就是ie才會出現(xiàn)怪異模式嗎怔鳖？還有啥場景可以用怪異模式呢？邊框融合固蛾？

面試官：什么是BFC?

我：BFC结执、BFC、BFC念了三遍艾凯，想不起來了献幔。心里想才問第二個問題就不行了，腦袋一片空白览芳。

面試官：從css的角度有什么可以優(yōu)化的？

我：減少重排重繪鸿竖。

面試官：怎么做沧竟？

我：開啟3d渲染引擎，加速gpu渲染缚忧。

面試官：那也是一個方法悟泵，說下遮罩，講講層級是什么邏輯闪水。

我：z-index設(shè)置顯示級別糕非？

面試官：就只有z-index嗎？

我：還有層級約束球榆，同級層級中持钉，其中內(nèi)部層級無法超越父級層級的z-index。

JS方向：

面試官：let每强、const分別是什么空执？

我：let變量聲明浪箭，為什么會有l(wèi)et,因為之前var是全局聲明變量奶栖，let主要用于塊級作用域變量聲明驼抹。

面試官：我們時間不夠框冀，請直接回答問題明也。不要講歷史绣硝！

我：好的勺三，const是聲明常量甫菠，一旦聲明了就不能修改。

面試官：那const聲明一個對象呢冕屯？

我：引用類型是可以修改的安聘。

面試官：那有什么辦法可以讓引用類型不可以修改呢丘喻？

我：可以用Object.defineproperty中第三個參數(shù)里面有一個可寫屬性，設(shè)置為false就行搀继。

面試官：還有其他辦法嗎？

我：還有可以把對象凍住点骑。

面試官：如何實現(xiàn)一個深拷貝憨募？

我：深拷貝主要實現(xiàn)是判斷當(dāng)前是否是一個引用類型菜谣，如果是引用類型的話就遞歸拷貝下，如果不是就直接復(fù)制。

面試官：你有用過Promise.all嗎抓谴？

我：用的比較少（心里想沒用過，但是又不能直接說）措拇，大概了解怎么用浅悉。

面試官：那它是什么邏輯汹碱？

我：Promise.all接受一個數(shù)組咳促，數(shù)組每一項都是一個Promise,返回值是所有的Promise都執(zhí)行成功最后輸出才是成功。

面試官：如果讓你自己實現(xiàn)一個Promise.all你會怎么實現(xiàn)？

我：我忘記了Promise源碼是怎么寫的了轴术。但是我有一個實現(xiàn)的思路盖袭，首先知道它的入?yún)⑹且粋€數(shù)組，那就可以知道數(shù)組的長度醇蝴，然后遍歷所有的Promise并去執(zhí)行，直到Promise執(zhí)行有結(jié)果時去調(diào)用同一個獲取當(dāng)前所有狀態(tài)集的方法來判斷當(dāng)前是否都執(zhí)行成功或有執(zhí)行失敗的惭适，最后輸出所有執(zhí)行的Promise的執(zhí)行狀態(tài)集合。

面試官：你怎么判斷當(dāng)前執(zhí)行的是哪一個Promise?

我：用數(shù)組的索引。

面試官：解釋下bind,call,apply區(qū)別戒突。

我：bind是綁定誰this就指向誰，bind就一個參數(shù)。

面試官：不對爵卒，bind不止一個參數(shù)遥巴。

我：call和apply的執(zhí)行是一樣的，唯一區(qū)別就是參數(shù)不一樣摆霉。

面試官：那bind可以無線bind下去嗎？

我：應(yīng)該可以吧。

面試官：說說箭頭函數(shù)都有什么特征向挖。

我：箭頭函數(shù)是匿名函數(shù)，箭頭函數(shù)的this來自它的父級。

面試官：那可以bind(箭頭函數(shù))嗎蒜危？

我：停頓3秒…不行吧皆疹。

面試官：如何判斷數(shù)值類型捎迫，都有什么方法？

我：typeof, instanceof , 比較嚴(yán)格的方式Object.prototype.toString.call(target)蛔翅。

面試官：講講Event Loop.

我：停頓2秒…給點提示山析。

面試官：就是宏任務(wù)、微任務(wù)那些。

我：那就是普通任務(wù)執(zhí)行，遇到宏任務(wù)執(zhí)行第一個宏任務(wù)后等龙，會把第一個微任務(wù)收掉再執(zhí)行下一個宏任務(wù)接著又執(zhí)行下一個微任務(wù)。注(這邊正確邏輯應(yīng)該是普通任務(wù)都走完，然后收掉第一波微任務(wù)位仁，再走下一個宏任務(wù)，接著走第二波任務(wù)以此循環(huán))

面試官：那setTimeout(()=>{5個Promise.resolve()})的執(zhí)行順序是什么？

我：5個按順序執(zhí)行空盼。

面試官：那遞歸這個計時器呢？是怎么執(zhí)行的苟呐？分層還是一口氣執(zhí)行呢？

我：分層執(zhí)行两波。

網(wǎng)絡(luò)&安全方向：

面試官：同源策略是什么抱怔？如何處理跨域局冰？

我：協(xié)議、域名沫勿、端口有其中一個不一樣就不是同一個源翁锡；vue可以針對普通請求設(shè)置跨域為true瘟判，就可以對普通跨域進行請求梨熙。

面試官：vue有這種能力邪财？

我：不對不對糠馆，那不是vue干的事。我還是先講服務(wù)端的吧，服務(wù)端可以開啟跨域，有一個cre(withCredential)…的屬性開啟來就可以處理普通跨域請求躁垛，還有復(fù)雜請求的話我記得是要開啟2個屬性就行，還有一個就是服務(wù)端針對ip作為白名單就可以解決跨域問題。

面試官：常見的狀態(tài)碼都有哪些？

我：200、404探遵、500、401、403病瞳。

面試官：304是什么？

我：重定向逗爹？

面試官：不對于购。

我：緩存斑胜？

面試官：對的，什么緩存？

我：協(xié)商緩存。

面試官：講下http中對稱加密，非對稱加密腐螟，數(shù)字簽名都是為誰加密操灿？

我：一臉懵逼…它們都是為誰加密？？斥扛？我講講它們都是什么楣黍，我的理解阶女，安全我最近也在做哩治，首先對稱加密我用到的是AES秃踩，前后端用同一個key加解密；非對稱加密一個是公私鑰业筏，公鑰可以解私鑰，私鑰可以解公鑰驾孔；數(shù)字簽名我理解它應(yīng)該是和加鹽差不多芍秆。

框架方向：

面試官：如何知道dom渲染完成？

我：mounted翠勉。

面試官：解釋下vue2和vue3監(jiān)聽對象的區(qū)別妖啥，并說下優(yōu)缺點。

我：vue2用到的是Object.defineproperty來劫持每一個key对碌，通用他們的getter和setter來訂閱值的變化荆虱，而vue3用到的是proxy代理，又因為vue2不能對引用類型友好的進行劫持，所有尤大大重寫了引用類型的劫持方法怀读。vue2劫持的缺點還有一個是不好擴展诉位，每增加一個都要遞歸來監(jiān)聽，而vue3的代理就不用菜枷，你只要監(jiān)聽最上層的對象就行苍糠。

面試官：那你說下裝飾器和代理的區(qū)別？

我：這個…啤誊，我回答不上來岳瞭。

面試官：vue傳值都有哪些方法？

我：應(yīng)該有9種方法蚊锹，我可能說不全瞳筏。

面試官：不用全都講，只要講一些常用的就行牡昆。

我：props姚炕、v-bind、emit丢烘、provide柱宦、inject, vuex（還有$parent,eventBus,localstoryge,sessionStoryge,$children,手動寫一個定閱等等）。

面試官：講下keep-alive是什么铅协？

我：它是一個組件緩存捷沸，當(dāng)你的組件被緩存時并隱藏了，再次被激活時它會走組件的activited鉤子狐史，表示命中了該組件痒给。

面試官：那如果組件帶有參數(shù)呢？如何緩存骏全？

我：keep-alive它有一個屬性可以匹配全路徑緩存苍柏。

面試官：keep-alive是怎么實現(xiàn)的？它是緩存代碼片段姜贡，還是虛擬dom试吁，還是分片段？

我：balabalabala… 虛擬dom楼咳。

面試官：DSL如何做到級聯(lián)熄捍？

我：表單項A聯(lián)動表單項B，我們是將聯(lián)動的邏輯放到表單項B的配置中的母怜，B如果聯(lián)動C那聯(lián)動邏輯可以寫到C的配置中余耽。

面試官：表單如何統(tǒng)一實現(xiàn)校驗方法？

我：我是給每個表單項都支持校驗方法苹熏，然后向表單發(fā)通知碟贾，由表單來收集所有檢驗來實現(xiàn)的币喧。

工程化方向：

面試官：你們工程化是什么？

我：webpack袱耽。

面試官：你有手寫過webpack配置過嗎杀餐？

我：沒有，但是大致都知道什么意思·朱巨。

面試官：假設(shè)你是項目負(fù)責(zé)人史翘，你要怎么考慮包太大，編譯慢的原因和如何處理蔬崩？

我：包大就分包恶座，webpack一開始什么都沒做的打包方案是將所有js打包到一個js文件中搀暑，如果我們用懶加載就可以做到分包效果沥阳，可以將一些相同的代碼合并，采用tree shaking自点。

面試官：如何開啟tree shaking?

我：安裝插件和配置就行桐罕，它是一個靜態(tài)語法分析，直接可以分析你的靜態(tài)代碼桂敛。

面試官：繼續(xù)功炮。

我：編譯慢的話可以采用異步編譯。balabalabala……這邊聊到優(yōu)化去了..偏題了术唬。

面試官：時間有點超時了薪伏，最后一個問題，你們項目中有用到ts嗎粗仓？

我：沒有嫁怀。

面試官：那我們今天的面試就到這里結(jié)束了。

我：我還想再補充下剛才那個問題借浊，雖然我們項目中沒用到ts塘淑，但是我自己的項目是用ts的。

面試官：其實沒那么硬性要求蚂斤，ts是一個…

我：好的存捺，謝謝，88

面試官：拜拜

二面：(用時1小時5分鐘-騰訊會議視頻)

巧了曙蒸，二面的面試時間和一面是一樣的捌治。

面試官：你是叫某某嗎？

我：不是纽窟，我叫某某某肖油。

面試官：不好意思。

我：沒關(guān)系师倔。

面試官：那我們今天的面試正式開始构韵，你先做個簡單的自我介紹周蹭。

我：好的，那我開始自我介紹了疲恢。balabalabal…

面試官：你剛才講到你的項目凶朗，那你講講你是怎么實現(xiàn)的。

我：DSL…..balbalabalabal應(yīng)該有講8分鐘左右显拳。

面試官：如何把一個三維的數(shù)組拉平棚愤，再去重，再將序杂数。

我：首先可以使用數(shù)組的flat方法宛畦，將數(shù)組進行兩次flat后，它就拉平了揍移。

面試官：為什么要兩次呢次和？請問flat的參數(shù)是什么？

我：我暫時不清楚flat的參數(shù)那伐，那我先講下去重吧踏施，假設(shè)已經(jīng)用flat把三維數(shù)組拉平了，接著去重的話罕邀，如果是簡單的數(shù)字?jǐn)?shù)組的話畅形，那我們可以用[…new Set(Array)],進行去重，如果是比較復(fù)雜的話诉探，我們可以遍歷數(shù)組日熬，然后將數(shù)組的每一項作為一個對象的key,以及用一個空數(shù)組來計入這個去重過的數(shù)組，如果遍歷到同一個key項去和剛才的object中的key做對比肾胯，如果存在不做處理竖席，程序繼續(xù)，直到所有遍歷結(jié)束就可以得出一個去重數(shù)組阳液；接著我們對數(shù)組做降序怕敬，我們可以用sort方法，也可以自己用分治算法寫一個降序函數(shù)帘皿。

面試官：如何用分治算法寫一個降序呢东跪？

我：分治算法的原理是，遍歷數(shù)組每一項鹰溜，然后把當(dāng)前項的比他大的放左邊虽填，比它小的放右邊。

面試官：那你這樣和sort差在哪里曹动？

我：分治算法的復(fù)雜度是在OnLogn,我記得sort的復(fù)雜的是On^2,主要是遍歷過的那個數(shù)值只要比較一輪斋日，下輪比較的時候就不需要再對他進行比較了。

面試官：vue中的diff是如何實現(xiàn)的墓陈，請說下頭比較恶守，尾比較第献，同層比較。

我：這…我還沒看到vue中diff的源碼這一部分兔港，但是我知道diff是什么一個邏輯庸毫。

面試官：vue中diff是根據(jù)遍歷虛擬dom,然后去遍歷所有虛擬節(jié)點判斷節(jié)點元素對應(yīng)的dom type,以及給他設(shè)定一個key值，如果下次比較的時候衫樊，這個key值變了就表示這個節(jié)點需要做更新飒赃，所以我們在寫v-for的時候?qū)懩莻€key它是可以提高比較性能的。balabalabal…應(yīng)該講了有五分鐘(面試官還是挺好的科侈，幫我解釋了一下)

我：嗯载佳，懂了(其實還沒全懂)。

面試官：講講vue路由的原理臀栈。

我：vue路由分為兩種形式蔫慧，一種是hash藕漱，一種是history;首先講下hash崭闲，它是根據(jù)路徑上的#后面的變量來控制路由跳轉(zhuǎn)的威蕉，而history是根據(jù)h5的pushState來進行路由跳轉(zhuǎn)的，它倆的效果是一樣的韧涨，但是hash會在路由上多一個#以及后面的變量虑粥。

面試官：hash是怎么監(jiān)聽變化的第晰？

我：我記得有一個好像是onHashchange可以監(jiān)聽茁瘦。

面試官:現(xiàn)在不是比較流行的有按需加載，那按需加載就會出現(xiàn)webpack把一個js文件拆分成多個js文件腔稀，那請求路由是怎么知道對應(yīng)的js在哪一個文件呢弱左？

我：停頓8秒左右拆火，我對路由源碼還不是很清楚，會后我會去看下vue-router源碼模狭，雖然我不知道它源碼怎么寫的，但是我好像記得它是給js文件名加上了hash值锚赤，這樣路由跳轉(zhuǎn)的時候就可以根據(jù)這個hash值做跳轉(zhuǎn)了。

面試官：webpack如何做優(yōu)化浑侥，都做過哪一些呢？例如有寫過css loader嗎伶选？

我：沒做過什么優(yōu)化，但是我對他的優(yōu)化方案還是有一些了解的，例如塞帐，壓縮荷鼠。

面試官：壓縮本身就自帶了允乐。

我：我說的是uglify。

面試官：那你講講你知道的。

我：tree shaking,靜態(tài)語法分析厦滤；代碼重復(fù)合并，可以控制代碼重復(fù)幾次時就讓它合并生成一個新函數(shù)來打包碘菜。

面試官：那請問如何設(shè)置合并代碼呢仰坦？

我：我一時想不起來怎么設(shè)置了玫霎，只記得有一個插件里面有一個屬性可以設(shè)置。

面試官：還有什么優(yōu)化方案嗎鼻种？

我：dllplugin罢缸，我知道這個，但是我還沒用過息楔。

面試官：dllplugin可以將只更新的js打包一塊，將未更新的打包一塊，這樣我們再更新cdn的時候就只更新被更新過的就行拯啦。

我：嗯，下次我試用用看。

面試官：講講什么是虛擬列表兵迅，項目中有用過嗎？

我：項目中還沒有用過扯夭，因為還沒有遇到過這樣的業(yè)務(wù)場景橡淑，但是大致明白它是一個什么原理。虛擬列表是根據(jù)瀏覽器的可視屏加上滾動距離來判斷當(dāng)前滾動的位置。假設(shè)我們一屏有十條數(shù)據(jù)蜜笤，那我們可以設(shè)置一個數(shù)組，里面放10條數(shù)據(jù)，當(dāng)我們滾動后，根據(jù)滾動的距離判斷當(dāng)前要顯示的數(shù)據(jù)晾咪。

面試官：那你這樣肯定會出現(xiàn)抖動。

我：那我們渲染三屏數(shù)據(jù)應(yīng)該就可以不抖動了。

面試官：其實可以設(shè)置三屏或四屏數(shù)據(jù)叼旋，給未顯示的做一個骨骼架，這樣就不會抖動了辟拷。

我：那我想問下诀紊，每條數(shù)據(jù)的高度是一致的嗎笤喳？

面試官：有一致的也有不一致的忧饭。

我：那假設(shè)初始頁面是在第10屏幕因俐，鼠標(biāo)向上滾動休玩，數(shù)據(jù)的上上屏動態(tài)加載出來，那它就不算抖動嗎遥赚？

面試官：這個抖動是允許的，如果是正常從第一屏滾下來，是沒問題的毫炉，如果是從中間往上滾一定會出現(xiàn)數(shù)據(jù)高度不確定導(dǎo)致頁面撐開的現(xiàn)象弥激。

我：明白了趾疚。

面試官：講講繼承辛孵。

我：現(xiàn)在用的比較多的是es6的extend繼承，還有es5的繼承是寄生式組合繼承，它是從寄生繼承，和組合繼承演變過來的嗓蘑。還有es6或更高版本推薦用extend，所以我現(xiàn)在有用比較多的是這個，它也是一個趨勢。

面試官：你們項目中都用到什么設(shè)計模式暖呕。

我：我們項目中用到的設(shè)計模式比較少笼吟，如果說要用到應(yīng)該是vue用到的觀察者模式艳狐。

面試官：你自己封裝組件的話沒用到過單例和工廠嗎？例如組件用工廠來封裝，這樣可以比較好的擴展。

我：我封裝的那個嚴(yán)格來說應(yīng)該沒有用到工廠恨旱，但是我也支持用戶自己做擴展钝凶，只是它不能任意做擴展掂名。

面試官：我看到你拿筆了，你就手寫一個防抖或節(jié)流，隨便寫一個拿給我看。

我：好的，稍等封救。

…..5分鐘過去了….,看到了嗎券躁？

面試官：你怎么沒用到setTimeout以舒。

我：我可能把防抖和節(jié)流搞混了，你說的用到setTimeout那個是在一定時間進到函數(shù)的時候會清除setTimout,然后直到一段時間后都沒有再進到函數(shù)是，間隔一定時間去執(zhí)行對應(yīng)操作世分，我寫的這個它的場景是按鈕提交的時候防止它多次提交時雌澄，假設(shè)我設(shè)置一個按鈕300毫秒內(nèi)只能點擊一次這樣的一個場景炫掐。

面試官：你對我們的公司有什么想問的嗎畦浓？

我：balablablaba….

面試官：dadadada…….

來回兩三回合…

我：暫時沒什么問題了祷嘶。

面試官：那今天的面試就到這里了风响。

我：好的双泪，88， 謝謝剪返。

面試官：嗯，拜拜掖看。

三面：(用時10分鐘-hr電話)

面試官：你好我是某盟hr尚卫，之前你面試的技術(shù)已經(jīng)通過了，這一輪是hr面吱涉。首先對你初步了解下刹泄。我們正常是兩輪技術(shù)面，兩輪hr面怎爵。

我：好的。

面試官：你目前人在哪里鳖链？

我：廈門姆蘸。

面試官：那你為什么要離職呢？

我：想去大城市發(fā)展撒轮。還有現(xiàn)在在乙方乞旦，比較被動。

面試官：那你為什么不先考慮下深圳呢题山？深圳離廈門不是比較近兰粉。

我：深圳不熟，我畢業(yè)的時候就在上海顶瞳，現(xiàn)在回來玖姑。中間balablablab…想再回去發(fā)展,可以對那邊的環(huán)節(jié)無縫生活愕秫。

…中間信號不好，卡了一小會兒焰络。

面試官：你對下一份工作有什么期望戴甩？

我：我之前了解過你們公司技術(shù)員也有23十號人，我希望和其他技術(shù)人員討論闪彼，共同進步甜孤。

面試官：你希望的薪資是多少？

我：我希望拿到你們這個崗位薪資的頂畏腕。

面試官：具體點缴川。

我：xxx。

面試官：因為你面試的評語描馅，寫得有點少把夸，我去落實下。再給你回復(fù)铭污。

我：好的恋日。

面試官：那今天就到這里。

我：好的嘹狞，88

面試官：嗯岂膳。

叮咚買菜

一面：(用時45分鐘電話)

面試官：我是剛拿到你的簡歷，請你先做下簡單的自我介紹刁绒。

我：好的闷营，balablabalabalba…

面試官：你接觸vue多久了。

我：我大概是18年開始接觸的知市。

面試官：那也有3年了傻盟，那你講講vue雙向綁定的原理。

我：vue2雙向綁定是根據(jù)defineproperty這個函數(shù)對對象以及它的key進行setter,和getter的劫持嫂丙，以及用觀察者模式來實現(xiàn)的娘赴。大概的原理是，用遞歸把所有的key都definepropety一遍跟啤，并對所有的key進行訂閱诽表，然后當(dāng)有key被修改了就會發(fā)通知通知所有被訂閱者，并執(zhí)行一遍達到雙向綁定這么一個原理隅肥。

面試官：那你講講如何對一個對象的屬性的變化進行監(jiān)聽竿奏。

我：心想(我剛不是說過了嗎？)腥放，definepropety的第三個參數(shù)中的setter可以做到泛啸。

面試官：講講keep-alive的原理。

我：緩存組件秃症，它可以緩存組件候址，當(dāng)這個組件再次被激活的時候會調(diào)用activited鉤子吕粹，keep-alive可以對路由匹配的組件進行緩存，也支持全路徑緩存岗仑。它大概的一個原理是通過虛擬dom把代碼片段存入documentFragment,然后存到內(nèi)存中匹耕，當(dāng)組件再次被激活的時候，就把這個文檔片段插到對應(yīng)的dom節(jié)點中荠雕。

面試官：那你講講路由的原理稳其。

我：vue的路由分為兩種，hash路由和history路由舞虱，首先hash路由是由路徑上#后面的變量來監(jiān)聽路由變化的欢际，而history是html5中的pushState來監(jiān)聽路由變化。

面試官：如何對網(wǎng)絡(luò)層做優(yōu)化矾兜？

我：網(wǎng)絡(luò)層做優(yōu)化有，減少網(wǎng)絡(luò)請求患久，緩存一些比較不會變化的數(shù)據(jù)接口椅寺，圖片請求可以做成雪碧圖，把小圖標(biāo)做成base64圖蒋失。把文件資源放到cdn返帕。

面試官：在瀏覽器中輸入url發(fā)生了什么？

我：首先域名輸入后篙挽，會進行DNS解析到對應(yīng)的ip和端口荆萤，然后現(xiàn)在一般的處理是nginx做路由分發(fā)，把服務(wù)器對應(yīng)的資源下載到客戶端铣卡，客戶端拿到前端資源會按html標(biāo)準(zhǔn)進行頁面渲染链韭，其中頁面會生成兩個樹cssom,dom,然后按順序執(zhí)行html代碼，當(dāng)然這個過程也遵循event loop,接著渲染head,css,body然后把js放到之前煮落，因為js會阻塞頁面渲染敞峭。

面試官：setTimeout(()=>console.log(1));$nextTicket(()=>console.log(2));輸出結(jié)果是什么？

我：setTimeout是宏任務(wù)蝉仇，$nextTicket是微任務(wù)旋讹，先執(zhí)行微任務(wù)再執(zhí)行宏任務(wù)。

面試官：$nextTicket是什么原理轿衔？

我：不知道（我以為要我講v8原理沉迹，心有點慌了。）

面試官：這個有點類似Promise的封裝害驹。

我：Promise.then?

面試官：差不多鞭呕。

我：我是第一次聽說(感覺面試官自己應(yīng)該也不懂)。

面試官：你有帶過新人嗎裙秋？

我：之前有一家公司是司徒制琅拌，陸陸續(xù)續(xù)帶過3個人缨伊。

面試官：講講你對未來的規(guī)劃。

我：高級開發(fā)->資深開發(fā)->專家->架構(gòu)

面試官：你有什么想了解我們公司的进宝？

我：貴公司招聘的這個崗位主要是什么的刻坊？

面試官：我們現(xiàn)在用的是vue+elementui在做供應(yīng)鏈，這個崗位是負(fù)責(zé)供應(yīng)鏈開發(fā)党晋。

我：貴公司這個項目目前做到什么程度谭胚，是01，還是12未玻，或是已經(jīng)在維護迭代過程灾而。

面試官：現(xiàn)在很少有項目是0~1的了，都是在維護迭代更新扳剿。

我：貴公司目前有硬性加班每個月嗎旁趟？

面試官：我們目前每天上班大部分是到8點左右，大小周庇绽，周六加班是有一天的工錢的锡搜。

我：目前沒什么問題了。

面試官：那我們今天面試就到這里瞧掺。我會把你的資料拿給我們?nèi)耸隆?/p>

我：好的耕餐，88。

面試官：嗯辟狈，拜拜肠缔。

涂鴉

一面：(用時40分鐘電話)

面試官：你好，請問你是某某某嗎哼转？我們約了今天面試明未。

我：對的。

面試官：我們公司是大小周释簿，小周的那一天可以自己調(diào)工作日調(diào)休亚隅。你會介意嗎？

我：不算太介意(心想庶溶，只要錢給夠997奉陪到底)

面試官：你之前接觸的都是vue煮纵，對react了解嗎？

我：不算太了解偏螺，兩年前寫過react-native行疏。

面試官：好的，那我們的面試正式開始套像，請做個自我介紹酿联。

我：你好，我叫某莫某。balablabla…一貫的作風(fēng)(一分鐘)贞让。

面試官：你剛才講到組件庫周崭，那你講講你是什么設(shè)計及實現(xiàn)的。

我：balablabala……字段->模版->頁面…講了10分鐘喳张。

面試官：那你沒用到單元測試嗎续镇？你知道單元測試有什么嗎？

我：目前沒有销部，目前市面上的單元測試有test摸航，mocha，e2e舅桩。

面試官：vue的路由和window.herf有什么區(qū)別酱虎。

我：vue路由有兩種模式一個是hash一個是history，hash是根據(jù)路徑上的#號后面的變化來監(jiān)聽的有個hashChange的函數(shù)可以監(jiān)聽hash的變化來進行對路由的跳轉(zhuǎn)擂涛；history是比較流行的路由方案读串，它對seo比較友好。它的原理是用到html5的api撒妈，pushState爹土、popState來對路由的監(jiān)聽，它的效果是hash是一樣的踩身，區(qū)別是它在url上沒有#號。那它們和window.href的區(qū)別href.location只要一改變整個頁面就會刷新社露，所以它們是一個是單頁和多頁的區(qū)別挟阻。

面試官：講講vue虛擬dom到真實dom是一個什么原理，以及如何做到diff的峭弟。

我：vue虛擬dom到真實dom的原理附鸽，那是model->view的一個過程，因為vue是對data數(shù)據(jù)的劫持瞒瘸，當(dāng)data數(shù)據(jù)改變了坷备，也就是data中的key被訂閱的key會收到發(fā)布來的通知，并開始對渲染層進行變更渲染情臭，那渲染的邏輯是省撑，先獲取當(dāng)前需要變更的代碼片段把它用document.fragment文檔片段存起來，然后根據(jù)修改的數(shù)據(jù)俯在，對文檔片段進行批量更改竟秫，最后再打到真實的dom里面。還有你剛才說的diff跷乐、vue中的v-for就有用到肥败，它是先用到頭尾比較再到詳細(xì)比較，當(dāng)匹配到頭尾不一致時，就是整個換掉馒稍，如果匹配到頭尾一致時就會去比較詳情皿哨，詳情里面再去同層比較，如果同層的h5標(biāo)簽不一致就更新纽谒，如果一樣的話繼續(xù)深入比較以此類推证膨，還有剛剛講到的v-for為什么我們在寫的時候要寫key呢？那是因為在詳細(xì)比較的時候佛舱，如果有key的話椎例，它比較的速度要比沒有key的速度要快，應(yīng)該如果有key就直接比較key的內(nèi)容请祖，如果沒有的話就得全局遍歷才能對比订歪。

面試官：webpack的原理和都有什么優(yōu)化方案？

我：webpack的原理可以從它的配置看出來肆捕，首先是入口文件刷晋，再到各個loader，以及插件慎陵，最后到輸出入口眼虱，它的邏輯大概就是輸入文件的時候，對各個文件進行處理再輸出一個邏輯席纽。它的優(yōu)化方案可以有對代碼中重復(fù)的寫的代碼進行合并設(shè)置捏悬，可以設(shè)置當(dāng)重復(fù)代碼出現(xiàn)次數(shù)大于2或3時，webpack將取抽象出一個公共方法润梯，讓這些用到的地方都統(tǒng)一去調(diào)同一個方法过牙。還有就是可以用tree shaking，靜態(tài)語法分析纺铭，將代碼中實際沒有用到的代碼抖掉寇钉；還有就是用dllplugin，找個插件目前我沒實踐過舶赔，但是我知道它可以做優(yōu)化扫倡，它的作用是打包差異，這樣更新的時候只更新差異就行竟纳。

面試官：babel的實現(xiàn)原理是什么撵溃，它怎么做到ES6到ES5.

我：babel的實現(xiàn)原理是ES6抽象語法樹到中間一個什么環(huán)節(jié)再到ES5的抽象語法樹，中間我記得還有三個環(huán)節(jié)給忘記了蚁袭。

面試官：瀏覽器從輸入url都發(fā)生了什么征懈？中間環(huán)節(jié)都有什么可以優(yōu)化的。

我：瀏覽器從輸入url首先是域名會被DNS解析成對應(yīng)的ip和端口揩悄，然后服務(wù)器一般會使用nginx對ip和端口進行路由的分發(fā)卖哎，找到路由指向的位置，將對應(yīng)的文件下載到客戶端，客戶端拿到資源在瀏覽器進行對其執(zhí)行亏娜，首先是html渲染焕窝，根節(jié)點然后到head，head里面有meta在到css渲染维贺，對了瀏覽器渲染的時候會生成兩棵樹一棵dom它掂，一棵是cssom，最后呈現(xiàn)合并的效果溯泣。js渲染一般放到之前虐秋，因為js渲染會阻塞dom渲染，接著到了body垃沦，body里面渲染可以使用vue或react框架客给，進行虛擬dom到真實dom的渲染；然后body中有可能會請求圖片資源肢簿，小圖片可以做雪碧圖靶剑，icon可以做base64圖。

面試官：講講vue2和vue3的區(qū)別池充？

我：我們現(xiàn)在還沒有升級到vue3桩引，我對vue3了解的不是很透徹，但是也知道一些區(qū)別收夸，首先vue3是用proxy改寫了defineproperty的劫持方法坑匠，以及vue3重寫了生命鉤子，還有它也用到了hooks卧惜，這兩天好像發(fā)布了vue3.2笛辟，如果業(yè)務(wù)上有用到vue3的話，我回去詳細(xì)了解序苏。

面試官：forEach和map有什么區(qū)別？

我：forEach沒有返回值捷凄，map返回值是新數(shù)組忱详。

面試官：forEach可以break嗎？

我：我沒這么用過跺涤，應(yīng)該是不可以吧匈睁，我記得map是不能這么用的，forEach應(yīng)該也是不行的桶错。

面試官：講講V8垃圾回收機制航唆。

我：停頓3秒。V8我不了解院刁，講講我對垃圾回收的理解糯钙，可能不是js的，我記得在學(xué)校有學(xué)到window系統(tǒng)的GC回收，它是在空閑的時候定時去清理window上被刪除的垃圾任岸。那瀏覽器我們在執(zhí)行js片段是時候再榄，它是執(zhí)行即銷毀的，但這邊銷毀我的理解它應(yīng)該沒有被垃圾及時回收享潜，而是進到了垃圾回收等待階段困鸥，這個還有一種現(xiàn)象就是js有一個閉包如果在閉包的時候其實就不會立即銷毀。我的理解v8應(yīng)該也是在空閑的時候進行垃圾回收剑按。

面試官：你有做過管理嗎疾就？

我：兩年前有帶過人算嗎？

面試官：最近呢艺蝴？

我：最近沒有猬腰。

面試官：那我們今天的面試大概就到這里，會在1-2天給你回復(fù)吴趴。

我：好的漆诽，88。

面試官：嗯锣枝，拜拜厢拭。

神州優(yōu)車

1.請解釋下什么是事件委托

2.請解釋下jq的on怎么實現(xiàn)

3.node的中間件是什么

4.請寫一個正則匹配下0～1000

5.解釋下vue原理

6.什么是變量聲明

7.什么是單線程，什么是單進程

8.__protype__與prototype有什么區(qū)別

9.什么是混合開發(fā)撇叁，如何用js調(diào)用原生

10.移動端用到的單位是什么

11.解釋下vw是什么意思

12.如何啟動node項目供鸠，如果node掛掉如何重啟

笨鳥社交

1.請說下路由鉤子有哪些，你都在里面做什么陨闹？

2.vue的生命周期是什么楞捂？

3.數(shù)組的遍歷有哪些方法黍翎？

4.vue的父子組件如何通信择浊？

6.sync雙向綁定如何自己實現(xiàn)？

7.解釋下provide和inject是什么挂谍，有什么用君账？

8.keep-alive是什么繁堡？

9.key這個解釋下有什么作用？

10.講一下對其他框架的了解

11.fulter是什么乡数？

12.請說一下es6以后還有什么新功能椭蹄？

13.every、some净赴、find這些是什么意思绳矩？

淵亭科技

1.基礎(chǔ)類型是什么，不少于5個玖翅，如何判斷翼馆？

2.數(shù)組的方法有哪些割以，不低于10個

3.如何去重

4.如何平鋪數(shù)組

5.狀態(tài)碼都是些什么意思

6.立即執(zhí)行函數(shù)有哪些？至少寫三種

7.0.1+0.2為什么不等于0.3

8.1/0結(jié)果是什么写妥？0/0結(jié)果是什么拳球？

9.隱藏樣式有哪些？

10.如何獲取數(shù)組的第一項珍特，請盡可能多的舉例祝峻。

搞定設(shè)計

首先面試官自我介紹

我也自我介紹

并介紹了我的項目

音頻播放是怎么知道現(xiàn)在播放到哪里的？

有接觸過canvas嗎扎筒？

elementui是如何做到組件Message和this.$Message一樣效果的莱找？如果讓你自己寫一個你會怎么寫？

開始對基礎(chǔ)進行面試

es6或以上有什么了解的嗜桌？

map和forEach有什么區(qū)別奥溺？

這兩個誰運行得比較快？

map如果沒有返回值骨宠，輸出結(jié)果是什么浮定？

講講高級編輯器是怎么做優(yōu)化的？

假設(shè)有50萬條數(shù)據(jù)如何快速找到自己想要的那條數(shù)據(jù)层亿？

如何找到一棵樹的節(jié)點桦卒？

遞歸遍歷死循環(huán)了怎么處理？

Promise如何串型執(zhí)行匿又？

如何自己寫一個類似Promise.all方灾？

假設(shè)有一個數(shù)字集合，如何獲取最大兩個數(shù)之和的索引碌更？

http請求時緩存策略是什么樣子的裕偿？

協(xié)商緩存的etag是什么的etag.

復(fù)雜請求的options是干什么用的？

復(fù)雜請求一定會有options嗎痛单？

options的報頭是什么嘿棘？

transform，都可以設(shè)置什么效果旭绒？順序會有影響嗎蔫巩？