深圳前端一年半，投了兩個月簡歷，第一場面試

背景

base深圳，一年半經驗，找的初級前端崗位，1-3年，投簡歷兩個月只有兩個面試，這是第一個面試

一面

你對html元素是怎么分類的？

一開始我愣了一下？搞這么簡單的問題？？？后面又問面試官你是指的id選擇器這些嗎，，還是display：block,inline-block這些？不管了，反正我全都講了一遍，說了下這些八股文基礎，感覺有點簡單，說得有點少，另外又展開說了HTML DOM節點那些內容

image是行內元素為什么有寬高？

這個問題我倒是沒有了解過啊，想了下說，會不會和input或者什么video之類的差不多，對于這類元素，瀏覽器有其他的決議方式（萬能答法：問什么都能答瀏覽器決議）

面試官讓我了解下可替換元素，，img屬于可替換元素

你用過哪些http狀態碼？

因為沒有刻意的去背這些玩意，所以只是大概做了下分類，就回答了常見的狀態碼，比如101我就在websocket上見過，200或者201就是請求成功，3開頭大概就是重定向的，又展開說了下永久重定向和臨時重定向的區別，4開頭的大概就是前端問題，比如401就是沒有權限沒有token，404請求url錯誤，5開頭的大概就是后端問題，只說了自己見過的一些狀態碼

404就一定是前端問題嗎？

不一定，狀態碼是可以修改的，比如介面拋錯我也可以搞個404，前后端聯調可以協商的

說下強快取和協商快取

搞忘記是請求頭的哪個欄位了，幾個月都沒看過http方面的內容了，好像是cache-control,只記得一個no-store，這個是不快取，簡單講了下強快取和協商快取的區別，強快取就是直接從快取中拿取資料，不用再發請求，會有一個過期時間來判斷是否命中，協商快取通過Last-Modified（檔案上次修改時間）和etag（檔案內容是否變化）來命中，

接著又展開講了下磁盤快取（disk cache）和記憶體快取（memory cache）的區別，從讀取速度，快取資源大小展開講了下

突然想到了vite，最近在學習vite，就又講了下vite的分包處理，vite用到的強快取和協商快取

說下js異步

除了常見的八股文回答知識

我又提到了async和await，async和await的內部實作，是怎么通過generator，yield，next()來實作的

還講了下不同的執行環境，js的執行機制也會有區別，在node環境和瀏覽器環境js異步執行的區別，

說下es6的新特性

let const、map、set，,weakmap,weakset,解構，簡單提了下，在vue3原始碼中用到的weakmap，準備說下記憶體泄漏的，，但是這玩意太難了，想了想還是沒說了，就說了這幾個、跟面試官說還有一些語法，但是不知道怎么描述，別的突然一下子想不起來了

深拷貝和淺拷貝

我還以為要我手寫，我直接回答，這玩意手寫我不會，我都是直接引入lodash的，什么手寫call、apply、bind這些，我都不會，結果面試官不要我手寫，，是我太敏感了（主要是對這種手寫代碼太厭惡了）

按照八股文面試題簡單講了下區別，主要就是堆疊中地址值的傳遞

接著又展開講到了記憶體、cpu、行程、堆和堆疊，堆和堆疊是放在行程中的，而行程又會被裝入記憶體中，堆疊和堆本質上都只是記憶體中的一片區域，撰寫的一行行代碼都會被轉成指令，保存到記憶體中，cpu就是從記憶體中獲取指令并執行，這些太久沒學了記不太清，不敢說得太多，就簡單說了下

打包之后哪些檔案會被決議成ventor檔案

其實我也不太了解，說了個node_modules也不知道對不對，然后就簡單講了下vite分包，，怎么做分包

vite預構建依賴是怎么做的

當時正在寫mini-vite，面試官看我老是提vite，可能就隨便問了下，主要就是計算出入口檔案，通過esbuild進行依賴掃描，然后將其打包放在指定得檔案夾內，會根據打包的內容生成一個hash值，內容改變hash值也會改變，保存在一個json檔案中，每次開啟專案時都會對比這個hash值來判斷是否需要重新預構建依賴

vue的陣列為什么不能做回應式

沒看vue2的原始碼，好像是讀取不到陣列的長度（可能回答的是錯誤的），直接跟面試官說不太了解vue2的原始碼，平常都是看的vue3原始碼，但是還是強行扯了兩句，用vue2回應式跟vue3做了對比，扯到了vue3回應式，收集依賴和觸發依賴，然后提到了，proxy、reflect，又說了一下這個es6的新特性，在vue3中的原始碼是怎么用的，

你有移動端專案，，肯定做了適配吧，，怎么做的適配？

我笑了，不好意思，還真沒做適配，移動端專案主要是給我們公司內部使用，所以移動端都是固定的螢屏大小，用不到適配，

不過我大學畢業設計的專案用過，用的淘寶適配方案，主要就是改變根節點字體大小，還有一些適配方案，viewport、bootstrap、媒體查詢這些都簡單說了下，

做過權限沒？

這一塊講了下自己的理解

實際業務開發來講好像不太難，主要就是給一個標識，來判斷到底需不要顯示這個路由

你指的標識是什么？

就是來判斷是否顯示這個路由的欄位，可以是一個布林值，也可以是一個其他的什么欄位，通過遞回來篩選前端路由有沒有這個欄位，然后再呼叫addRoute這個方法，添加到路由中，后端回傳的路由資訊不能保存到store中，因為重繪store中的資料就清空了

從代碼實作上來講這些都是比較簡單的，難的是架構（其實我也不太懂，瞎吹的），我們公司專案是用的RBAC權限設計，通過directive封裝自定義指令，達到按鈕級權限設計，內部主要是appenchild、removeChild 添加移除dom節點來實作

接著我又扯到了需求分解

為什么離職

你對自己未來發展的規劃

你是怎么規劃你的學習路線的

你對chatgpt怎么看的

笑了，上午才拿chatgpt幫同事解決了一個正則問題

chatgpt只是工具

二面

面試官說他比較關注性能優化這一塊

上來第一個問題就把我問麻了

你用過正則沒，說下正則

上午才幫同事解決了一個正則問題，沒看過正則，都是用了在學，之前看過高性能javascript，想到正則還可以做一些優化，，因為實在是記不太清了，就只是提了一嘴，

你在專案中用了是怎么做性能優化

簡單描述了下之前在專案中遇到的下拉框卡頓問題，大資料量幾十萬條資料引起的卡頓，開啟了虛擬串列還是出現卡頓，后面對這個組件在框架的基礎上進行了三次封裝，集成了分頁效果，解決了這個卡頓問題

還有一個是動態高度引起的卡頓問題，簡單描述了下實際場景，利用瀏覽器的開發者工具定位到某個方法，發現是某個方法執行了3s左右，造成的卡頓，由于組件封裝復雜，這個方法沒法優化只能叫產品改需求，

說了下lighthouse分析報告，因為平常用的不多，簡單提了一下

又從構建工具上講了下優化，vite針對于依賴預構建、分包，靜態資源等可以做那些優化，

又講了下cdn，cdn的缺點，強快取和協商快取

又講了下fcp、fp、首頁白屏、骨架屏等

代碼層面也可以做優化（夠了夠了，把我打斷了，，你已經說的挺多的了）

csrf攻擊怎么防范

那是去年看的東西，實在是不記得了，

不會的話，不用強答，不要緊，接著就跳過了

閉包

知道閉包嗎，，我內心已經開始組織語言了，接著來了句沒事我不問，哈哈哈哈

怎么做全域捕獲

用window.addEventListener('error',() =>{})

提到了自己的個人博客專案，用vue3+node搭了個個人博客專案，接入了阿里云日志和node性能平臺，利用docker-compose搭了一個簡單的apm，用wsl準備配上sentry的，但是死活安裝不了，不知道是不是環境的問題，是不是應該用linux系統，

又說了一下對于性能監控的想法（只是說一個想法，并不一定是對的），搭一個后臺管理系統，利用window.performance獲取到所有性能資料，給這個后臺管理系統去做可視化展示

針對你公司的專案，你用到了哪些

利用vite做的優化，預構建優化，分包等，

提到了想引入一個前端性能監控的sdk，有這個想法但是公司不看重，所以才沒有實施

剛剛說到了http，說下你見到得http頭有哪些

一時真沒想起來，就簡單答了兩個，直接跟面試官說，我不記得了，但是你讓我看，我大概能知道那些頭資訊是干什么，面試官就沒問了

你的簡歷上也提到了，會html、css，精通js

我連忙擺手說我不是精通js
面試官：哈哈哈哈

說下js異步

你欣賞vue的哪些設計

說了下compiler-core這一塊，createApp，render方法

雙端diff，這一塊的設計，還有回應式

因為原始碼是去年看的，，沒怎么組織好語言，這一塊說的有點亂

你擅長什么？

擅長什么真不好答，我想了一下，，，但是我不擅長的？？比如剛才的web安全、vite、vue3、性能優化等等等

面試官笑了，哈哈哈

未來的發展方向

你對自己未來發展的規劃

說了下我現在正在寫的專案mini-vite

面試官說一面問的都是基礎，他比較注重成長性，這也可能是他沒有往深問原因吧，，最后說我還不錯，在同年人里面算可以的了，

最后又簡單聊了下，，問我住哪，我說在龍崗，說高新園上班最好在公司附近租房（這算不算暗示我可能已經面試通過了？？？），，，我說不是我不愿意，我還有女朋友，得跟她商量，

女朋友在哪上班？，，龍崗，，面試官又笑了，，那還是別換地方了吧，雖然一號線人多，，，

問我渴不渴，，等久了給我買了瓶水，，面試官非常nice，面試程序還是非常愉悅的

三面總監面

自我介紹

怎么改變函式的執行順序

一下子沒有get到面試官到底要問什么

提到了js的單執行緒，又說到了宏任務和微任務,.then和.catch

異步能不能理解成多執行緒

肯定不能，這是兩碼事，我在阮一峰的博客上看到的，又說了下js為什么是單執行緒的

又提到了preload，prefetch

node學了多少

想用node搭一個前后端的中間層，解決并發大資料量的問題，，但是沒找到合適的視頻和教程，

只在個人的博客上用過，簡單的幾個fs、path、process這些模塊

你用docker做了什么？

ci/cd，說了下我的個人博客專案，剛開始是用gitlab搭的但是沒成功，后面嘗試用github action去搭，發現這好像已經不太屬于前端的內容了，有點偏離我的學習路線了，而且這一塊好像也挺復雜的，也就沒有再繼續了

搭建前端apm，我還準備講下部署的，但是因為不太會，所以就沒講了

你對自己未來發展的規劃

你現在在看哪些書

最后也跟我說了，要在公司附近租房

總結

如果是在高新園上班的話，最好要在高新園附近租房

另外，回答的時候最好是擴展開講，不能面試官問一就答一，不知道或者不太了解的問題試著隨便扯下看能不能扯到自己知道的那一塊，但是別瞎扯，還有就是引導面試官問問題（？？？但是我提到了好多次vite面試官都沒問），可能是因為我一年半的經驗，沒有深入性的去問，問的都比較淺，好像更多的都是在關注我個人的規劃，

面試程序，從開始到結束差不多三個小時，兩點半面到五點半，中間還穿插著一些等待時間，總體上來說，三次面試還是非常愉快的，，感覺三個面試官都非常nice，面試的程序也是非常愉悅，三面是總監面的，，總監面完還把我送到門口，

最后結果呢？？ 那肯定是掛了啊

最后

大家如果對vite感興趣，歡迎關注我的vite專案：寫了個輔助學習vite的小工具（mini-vite）

標籤：其他

上一篇：VUE路由傳參的實用方式

下一篇：返回列表