大華前端秋招面經(jīng)

?一面

沒有一絲絲防備，上課一半電話就打過來了，是個(gè)小姐姐

自我介紹
技術(shù)棧（vue2 vue3簡單做過項(xiàng)目 react只是簡單學(xué)過）
vue2隨便挑一個(gè)底層原理來講講（選了響應(yīng)式，詳細(xì)地講了一遍）
說說vue3的響應(yīng)式原理，做一下對比（vue3的還不是很熟，只說了通過proxy實(shí)現(xiàn)，能彌補(bǔ)vue2中刪除和通過key添加屬性不能觸發(fā)響應(yīng)式的缺陷，深層原理沒有了解）
打包工具了解哪些（webpack學(xué)習(xí)過，vite只是用過現(xiàn)成配好的）
說說你用webpack做過什么優(yōu)化（打包速度：開啟oneof、開多線程/多進(jìn)程，生產(chǎn)環(huán)境請求速度：分包，這里舉了我在實(shí)際項(xiàng)目中的分包優(yōu)化，把面試官引向我的項(xiàng)目）
項(xiàng)目只做了webpack首屏優(yōu)化嗎（回答我的另一個(gè)長文章優(yōu)化，提到了利用緩存、分塊傳輸）
你提到的分塊傳輸是懶加載嗎（有一些區(qū)別，因?yàn)槲疫€想讓用戶通過ctrl-f來進(jìn)行全局檢索，所以要分塊加載，但不能懶加載）
你提到了利用緩存，詳細(xì)說說瀏覽器緩存還有本地存儲（強(qiáng)緩存協(xié)商緩存答了一遍，本地緩存我以為是在問我PWA的ServiceWorker）
問的本地緩存是指cookie webstorage這些，不過你提到了PWA就都說說吧（都答了一遍，并且說在項(xiàng)目中本地配置后跑過PWA，只是需要HTTPS所以不能發(fā)布上線）
做過登錄鑒權(quán)嗎（說了我的博客項(xiàng)目，用的單token進(jìn)行鑒權(quán)）
說說ES6+（腦子有點(diǎn)短路，只答了塊級作用域 proxy，小姐姐引導(dǎo)性的問了我?guī)讉€(gè)，說到promise時(shí)我說深入了解過）
那就說說Promise底層實(shí)現(xiàn)吧（整個(gè)答了一遍，重點(diǎn)講了then方法的實(shí)現(xiàn)，鏈?zhǔn)秸{(diào)用和promiseA+要的判定條件）
再說說閉包和模塊化（經(jīng)典八股，模塊化講了閉包、catch塊、IIFE、ESM）
反問（面試流程：2 + 高管 + HR 四輪面試，流程時(shí)間：不確定，投的人是不是很多，每天大概有多少面試：小姐姐說今年人很多，她一個(gè)人已經(jīng)面了四十多個(gè)人了，其他面試官也差不多，這還是第二批撈的）

?二面

這次面試也是小姐姐負(fù)責(zé)的

自我介紹
主要了解vue2框架是吧（對）
為什么一開始選擇vue框架上手呢？（vue設(shè)計(jì)理念就是為了讓新手更好上手，而且現(xiàn)在國內(nèi)公司大部分用的還是vue）
路由懶加載具體是怎么實(shí)現(xiàn)的？（使用上來說的話，就是配置時(shí)動(dòng)態(tài)引入組件。原理上來說的話，就是webpack打包時(shí)會根據(jù)我們動(dòng)態(tài)引入的組件進(jìn)行分包操作，這樣在首屏的時(shí)候就不需要加載全部內(nèi)容）
動(dòng)態(tài)路由相關(guān)的API（一時(shí)間沒反應(yīng)過來，她說是動(dòng)態(tài)掛載路由，我就說了我的后臺項(xiàng)目中根據(jù)用戶角色來實(shí)現(xiàn)路由權(quán)限的控制，其中就用到了動(dòng)態(tài)路由，主要是通過addRoutes進(jìn)行動(dòng)態(tài)添加）
問項(xiàng)目中的留言墻
1. 留言的隨機(jī)位置是如何生成的？（隨機(jī)數(shù)+定位）
2. 如何判斷重復(fù)位置（生成后對比）
3. 那點(diǎn)位重復(fù)概率應(yīng)該比較小，怎么判斷不會被遮蓋呢（我這個(gè)當(dāng)時(shí)沒有詳細(xì)考慮，如果讓我現(xiàn)在修改邏輯的話，考慮添加寬度信息，進(jìn)行比對看是否被遮蓋。后來想了想，應(yīng)該回答只要left和top定位不在同一個(gè)點(diǎn)上，那么就不會被完全遮蓋，只要鼠標(biāo)放在對應(yīng)的塊上面，它的層級就會變到最高，而這里要實(shí)現(xiàn)的也不是留言的完全展示，而是一個(gè)熱鬧的景象，就和山崖邊的同心鎖或老樹上的許愿條幅一般，聚集著的是人們的一個(gè)寄托。）
4. 你是怎么想到做留言墻的（在博客里面感覺留一個(gè)這樣的東西比較有趣）
5. 考慮過其他一些實(shí)現(xiàn)形式嗎（沒太懂問哪方面的，小姐姐提示我說是UI設(shè)計(jì)方面的，我就說可以和qq空間朋友圈一樣排布，也可以做瀑布流）
項(xiàng)目中的黑白主題變換是如何實(shí)現(xiàn)的（封裝了一個(gè)切換主題的工具函數(shù)，內(nèi)部通過修改css變量的形式來修改主題色，當(dāng)前主題是在vuex中保存的，也會在localstorage做一個(gè)持久化，這樣下次打開的時(shí)候就可以加載上次的主題）
js操作css變量的底層原理，是借助庫來實(shí)現(xiàn)的嗎（沒有，它原生就有這個(gè)能力）
有在網(wǎng)上了解其他一些css換膚方案嗎？（沒，因?yàn)樾枨蠛唵危跃筒扇〉默F(xiàn)在這個(gè)設(shè)計(jì)方案）
另一個(gè)電商項(xiàng)目
1. 也是你的練手項(xiàng)目對吧？（√）
2. 是PC還是移動(dòng)？（H5）
3. 用的什么UI框架（因?yàn)槭蔷毷猪?xiàng)目，所以自己嘗試著去把各個(gè)組件封裝了一下，包括其中的輪播圖、按鈕之類的）
這些項(xiàng)目有用打包工具嗎，是webpack嗎？（是）
說說webpack常用的配置項(xiàng)（分了開發(fā)環(huán)境的優(yōu)化配置以及一些常用的loader和plugin說了）
分包打包的chunk了解嗎（了解，說了項(xiàng)目中首屏優(yōu)化做的分包操作）
websocket連接機(jī)制（先返回101表示切換協(xié)議，后續(xù)發(fā)送心跳包來檢測是否存活，記得不清了，不知道這樣答對不對）
說一下HTTPS中證書發(fā)放流程（不太懂這個(gè)發(fā)放流程是指什么，說了非對稱加密交換對稱密鑰，此后通過對稱加密通信）
HTTPS中用到的加密算法有哪些（這個(gè)真不懂）
你了解的加密算法（常見的是計(jì)算哈希，有MD5，還有一個(gè)很長的叫什么H什么X什么256，記不太清了，項(xiàng)目中登錄密碼加密用的是MD5）
前端開發(fā)時(shí)常見的安全問題（說了文章上傳時(shí)用第三方轉(zhuǎn)義庫進(jìn)行特殊符號轉(zhuǎn)義防XSS，還有g(shù)et請求會有一個(gè)csrf的問題，所以只能用get做查詢操作）
svg和canvas的異同點(diǎn)（都是作圖的，canvas放大會失真，svg是不會失真的向量圖，還有svg我一般是設(shè)計(jì)拿來直接用的）
你了解的前端領(lǐng)域范圍有哪些（傳統(tǒng)的網(wǎng)站開發(fā)，PC和H5，以及一些nodejs前端設(shè)計(jì)到服務(wù)端的一些知識）
前端吸引你的地方在哪里（一開始選前端是因?yàn)樗娂此茫梢越o別人展示，成就感高）
函數(shù)式編程的概念（要做什么就寫什么，把過程寫出來，而面向?qū)ο缶幊叹褪菍ο蟀l(fā)出命令，讓它去幫助我們完成事情）
柯里化的概念（調(diào)用函數(shù)時(shí)，可以先傳入一部分參數(shù)，后續(xù)執(zhí)行時(shí)再傳入另一部分參數(shù)，可以通過bind實(shí)現(xiàn)）看看計(jì)算器案例算是柯里化嗎
react的設(shè)計(jì)思想（與MVVM不同，和vue3有點(diǎn)像，上手難度較高一些，只知道這些了）
你認(rèn)為java的工作經(jīng)歷對前端崗位的幫助有哪些（有一些相通的設(shè)計(jì)思想，也對理解SSR有幫助，可以了解更多的業(yè)務(wù)邏輯）
結(jié)束，沒有反問