五月中級前端面試報告

前端，面試時間 5.7-5.19，共計兩週。西安，薪資區間 10-15css

因爲考慮到我的發展緣由，從杭州回到了老家陝西，面試了七、8家，2個offer收場。記錄一下面試狀況。（題目不重要，重點在於如何將眼花繚亂的題目分類到你的知識體系中。
html

公司A

公司狀況：初創公司，銀行項目，人數20+，需出差。
技術棧：前端vue+後端spring
問題：前端

url輸入到頁面顯示全過程
vuex包括哪些內容
vue項目優化
computed和watch區別
vue-router鉤子介紹
vue-router懶加載實現

思考：問題很少，瀏覽器原理+vue全家桶，緊張緣由computed、watch區別沒答上來
vue

公司B

主要問項目，我簡歷項目是ERP+公衆號+數據大屏
問題：node

項目難點
權限模塊粒度怎樣設計的，具體到代碼如何控制？所有都用if-else？不是的話怎麼抽離
你剛纔說的是總體架構和實現，能夠看出你對業務掌握的比較好，那具體到前端，你作了什麼？
公衆號開發項目具體說說
如何部署？Nginx如何配置
爲何用node來作
你以爲整個項目核心在哪？
微信公衆號事件用過哪些？
數據可視化項目介紹下

思考：負責人注重項目，基礎知識沒問，問題就集中在「項目難點、亮點、解決方法、我的思考」。總體下來感受本身的項目幾乎無亮點可言，實際上也是沒有對本身的項目核心深挖，項目不在多，找一個你以爲最複雜的項目中最難的點往深層擴展，剖析項目背景，你負責的模塊，模塊所用技術，亮點
python

公司C(offer)

問題：react

es6語法用過哪些
基本數據類型
let var區別
什麼是閉包
閉包的同級變量和子級變量可否獲取到
this是什麼
做用域有哪些
什麼是塊級做用域
如何在當前js中使用其餘js變量
如何給數組添加新的方法？（考察原型、繼承）
雙等三等區別
如何判斷兩個數組是否相等，是用雙等仍是三等？（是個坑，雙等三等都不行）
undefined和null區別
0.1+0.2在三等狀況下是否等於0.3
staic和assets有什麼區別
jQuery屬性選擇器如何拿到第三個input節點

Vuewebpack

用過的組件庫有哪些
MVVM如何實現
diff算法理解
v-if v-show區別
單頁面多頁面區別
computed、watch區別
location.href和vue-router跳轉有什麼區別
生命週期
mount階段作來什麼
項目中有多個環境怎麼處理
v-once是作什麼的
路由懶加載如何實現
圖片懶加載原理是什麼

其餘：nginx

你簡歷上寫的python和node，熟悉到什麼程度？
公衆號項目介紹下，能看看嗎
看下你的小程序項目
還有其餘能夠展現的項目嗎？
前端如何解決跨域

思考：主要集中在js基礎和vue，問題不難，能夠說是中級前端問題。
git

公司D

看了你github最近在刷leetcode，你爲何要學算法？
拿你刷過的算法第一題舉例，移動0問題。解決思路是什麼？
在你的博客裏有看到我的規劃，你對你本身是怎樣的評價呢
Js 位運算有了解過嗎
Css問題 p標籤文本無法設置它的高度，怎麼去讓它前n個字符變高
看了你的博客最近也參加過活動，有什麼收穫嗎？
Vue 項目比起傳統項目有什麼優點
vue如何實現自定義指令呢
Vue項目中狀態判斷如何處理，好比在某個頁面我須要判斷用戶是不是登陸狀態？
解釋下什麼是動態規劃？它的應用場景，項目中有沒有用到
咱們假如要作抽獎活動，保證絕對的公平，把人名放在數組中，怎麼去作
你簡歷上有寫大型文件上傳 oss 有沒有什麼難點？

思考：主管提早經過簡歷提早看了個人博客文章，github。因此一些問題也是針對性的。

公司E

MVC與MVVM分別介紹下
MVC的數據流向是怎樣的「雙向流動」怎麼解釋雙向流動？
解釋下數據雙向綁定
三個框架中有哪些是雙向綁定的「vue angular」
Angular是如何實現雙向綁定的？「髒值檢查」
你以爲react和vue有什麼區別？「vue有不少內置指令，模板語法，react是一切皆組件」
若是我一直寫vue，如今上手react，難點在哪？「es6語法，jsx模板語法」
Url輸入到頁面顯示經歷了什麼？「導航階段 dns解析 tcp鏈接 TLS驗證發起請求接收響應鏈接中斷。解析階段 html js css分開解析，html解析爲dom對象，拆分標籤 text，js由v8引擎處理，css被解析爲cssom 層樹，光柵化」
DNS是如何解析的？怎麼拿到地址的
DNS解析耗時嗎？「耗時的，由於要查看是否有緩存」如何優化？（沒答出來，被告知能夠看看dns預解析）
你說到v8引擎，說下v8引擎如何解析一段js代碼？「先轉成AST樹，再轉成機器碼，最後轉爲字節碼，執行字節碼。瀏覽器對重複的js代碼有優化即時編譯技術，若是發現一段代碼常用，則不用轉字節碼直接執行機器碼」
Tcp鏈接過程解釋下「就是常說的三次握手第一次是客戶端發起請求第二次服務端做出應答第三次客戶端收到應答知道服務器是通的告訴服務端要請求數據了」
瞭解事件循環嗎
提供事件的隊列是哪來的？
繼續事件循環。你說的宏任務微任務解釋下
哪些被定義爲宏任務，哪些被定義爲微任務
Promise是屬於微任務嗎？「不 promise.then屬於微任務」
說下http請求方式「get post option還有restful中的put delete」
Get post區別
說下restful規範
跨域如何解決？「jsonp iframe proxy nginx反向代理 websocket，後端配置響應頭」還有嗎？「在本地開發時，有用chorme插件來關閉csrf檢測解決跨域」說下iframe怎麼跨域的？（網上看到的說不清楚）proxy跨域的原理是什麼？（這個確實不知道，被告知是webpack中的devsever配置後，node至關於啓動了服務器，瀏覽器請求服務器至關於請求本地服務。）
小程序有作過嗎？你見太小程序跨域嗎？「沒有」那意思就是跨域只在瀏覽器出現，那麼 proxy解決跨域的原理就是啓動了node服務器，轉發其餘端口的服務到本地，這樣就不會跨域了。
Webpack有用過嗎？作過哪些配置？「不一樣環境的配置，devserver」有哪些優化措施？「tree shaking，路由懶加載，代碼分割」
有作過哪些性能優化措施？「資源文件加載，代碼壓縮雪碧圖，cdn資源服務器」
既然webpack用過，那圖片文件打包時轉爲base64，你以爲打包之後體積大了仍是小了？「小了」其實打包之後圖片體積大了30% 「那爲何還要打包？」由於當你圖片特別多的時候 svg 等等圖標特別多，每次請求src是否是都要請求網絡，那請求網絡是否是佔用資源。因此加載base64能減小請求次數
Nodejs有沒有接觸過？「簡歷裏那個公衆號項目就是node作的」原生node嗎？「koa作的」你介紹下koa「基於express的一個node框架，本質很是簡單，把其餘應用都做爲中間件外包出去，核心是洋蔥圈模型」 koa是基於express的？「嗯是的」
說說洋蔥圈模型「相似於柯里化，內層中間件返回的值做爲外層中間件的參數」
說說柯里化「參數分開與放在一個括號裏的結果相同」怎麼實現呢？「能夠攔截它的get方法和apply方法來實現」
有本身寫過中間件嗎？「沒有，都用的別人的」node服務在線上跑的時候，報錯了怎麼查看控制檯結果「錯誤統一捕獲，在全局處理，放到日誌中，查看日誌」日誌用的是什麼庫？「koa-logger」
node服務怎麼讓它後臺啓動的？「supervisor配置，而後開啓進程」
Webpack打包時間太久？打包文件過大怎麼解決「第二個問題代碼拆分，把相似於vue這種幾乎不變的框架放到cdn緩存，其餘的文件模塊化拆分，組件庫按需加載，第一個問題打包時間太久雖然常常有遇到過，但也沒辦法解決。不過我瞭解到最近vue3有新動做，棄用webpack，改用新框架，主要解決開發環境打包太久的問題」
在網絡請求中如何把大文件資源壓縮傳輸？（沒答上來）你知道GZip格式嗎？「嗯知道，在nginx配置時有設置過gzip壓縮」
你簡歷寫的oss大文件上傳能具體說下嗎
你在團隊中是什麼角色？
你提到的規範是指？或者你從哪看到的相關規範？「vue官方文檔寫的已經很清楚了，推薦優化策略和規範」

思考：這個主管問的內容涉及到

JS基礎
瀏覽器原理
網絡協議
框架原理
webpack性能優化

並且本身在回答問題1時，容易用術語B來佐證/描述，繼而引起問題2，好比koa->洋蔥圈模型->柯里化，在你對相關術語能熟練掌握時，看起來挖的坑反而成爲你引導面試官發問的方向。

公司F

問題：
Vue生命週期
說下具體每一個階段作了什麼事
Vuex單向數據流解釋下
app有作過嗎？
Pc是如何適配移動端的
混合開發有作過嗎
思考：
問的問題很是少。顯然在我答到移動端問題時，由於沒作過，不符合公司技術棧需求，沒有複用價值而提早終止。但有趣的是，我知道這幾個問題面試確定過不了，因此告知面試官這樣會不會不太合理，由於沒有發掘出來求職者的潛力，不可能每一個人作的業務都面面俱到的涉及全部技術點。面試官笑着問我有什麼亮點是他沒有發掘的。
這個問題其實我也沒有想過，本身說本身的亮點。最終仍是沒過，不過我確實能夠考慮下本身有什麼亮點待發掘。

公司G

問題：
React生命週期，每一個階段作了什麼
docker用了哪些容器
docker除容器外哪部分是抽離出來的
ES6 繼承方式有哪些
類有哪些東西能夠被繼承？
一個類中，static 普通方法箭頭函數重名時，會調用哪一個？
箭頭函數有哪些特性
Scss如何複用變量
scss中的@和％有什麼區別
上傳文件斷點續傳怎麼作
思考：
問題一樣少，可是有公司須要的框架、css、js、docker、項目，可謂是面面俱到，在箭頭函數特性和scss、類的繼承那塊，發現本身對ES6瞭解的仍是太少，在react項目中，ES6隨處可見。因此爲了以後發展，這部分不能僅停留在會用，須要繼續深刻。

公司H(最終入職)

問題：

看了簡歷，非計算機專業，培訓了？「是的」那你須要補課的有不少呀。
html和css瞭解嗎？那麼多標籤，屬性你是怎麼學習的？

有記筆記嗎？「有的，日常有記筆記的習慣」
能夠看看嗎？「用手機打開了本身的語雀遞給面試官」
嗯，這些都是你收藏的文章嗎？「呃，都是本身寫的，看的書或者參加活動整理的」

JavaScript如何呢？這樣。你手寫個楊輝三角吧？（面試官把紙筆遞給我，而後在翻個人博客。我寫了僞代碼，停下了筆）「這部分沒辦法運行，我給你說下個人思路」

嗯，你這個方法也能夠，可是打印一行就建個數組，若是有n行，就是n個數組，時間和空間複雜度都很高呀。「...頗有道理」楊輝三角的每一個元素實際上是排列組合，你只要用排列組合打印每一個值就行。

深拷貝知道嗎？「嗯，知道」寫一下，要求有這麼幾點，對對象的不一樣類型（正則、時間等）作處理，同時對循環引用深度作處理，好比它循環調用，讓它的遞歸深度爲10層，而後跳出。

聽到要手寫的時候真的欲哭無淚，由於刷題的時候看到過這個題，當時想的是誰會讓手寫這個呀。最終寫出來一部分交上去了，處理循環調用那寫不出來

最後一個題，遍歷嵌套對象，每一個對象有 key、value、children（數組），把每層的key、value打印出來。（這個題就不描述了，我以爲挺簡單的，或者是我覺得挺簡單，其實也沒有理解題意。）
React組件傳值有哪些方法
React的Provide和consume是由於什麼產生的？
React版本升級時，會有一些組件無法用，頁面顯示白屏，如何定位是哪些組件出的問題

思考：在介紹了公司狀況以後，面試就結束了，面試官幾乎全程在看個人博客，這也是最終我選這家公司的緣由之一。

思惟導圖

從上面這幾家公司面試狀況，能夠看出10-15這個薪資區間面試問的深度仍是有的，對算法的要求也不是很高。瀏覽器原理和JS、ES佔的比例較大，框架其次，這樣來畫個面試該有的知識體系，而後不斷調整，補充。

總結

萬丈高樓平地起，紮實每一步走的路，併產出一些可複用的經驗
在面試的過程當中不斷調整，和麪試官切磋，瞭解目前的就業形勢。
瞭解並正視本身的不足，當這個面試有些問題你答不上來時，必定要記住它，別在一個坑掉進去兩次
平時的積累很重要，看書、視頻、培訓、專欄
回來以後發現走的路也不止互聯網這一條，舉個例子，並非每一個人都有那麼強的學習動力，那麼他們怎麼養活本身呢？投資/創業/兼職接活，那麼我能作的就是搞好人脈，同時擴散影響力，要學習的地方還有不少。
目前西安（互聯網二線）公司中有激情，願意學習、進步的技術仍是挺多的，因此無論你現在在北上廣深仍是二線城市，必定要端正心態，努力學習，別讓後浪拍死。