摘要：年求職面經及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業學過兩門和相關的課程語言和單片機這個專業的唯一好處就是大部分人并不知道這個專

我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫助.

先說背景:微電子科學與工程專業,學過兩門和CS相關的課程:c語言和單片機.這個專業的唯一好處就是:大部分人并不知道這個專業學什么,以為和電信差不多.所以在眾多野生程序員中也算一丁點兒優勢,哈哈.本專業適合讀博,大三開學決定不去讀研了,轉CS做前端.這也算是一個我很菜的借口,可以自我欺騙一下.

求職經歷:
三月份開始投簡歷找實習,發現自己真是菜的一無是處.一開始就是騰訊和阿里的內推面試,被虐的體無完膚,(事件模型,原生XHR,this等等都答不上)于是開始瘋狂惡補前端.大三下課程巨多,買了一塊新電池,上課坐在最后邊敲代碼.遇到稍微知名一點的互聯網公司就投簡歷,不停面試,每次面試完趕緊記錄面經,總結經驗,查漏補缺.

就這樣一直熬到四月份,開始漸漸能夠從容應對前兩輪技術面.五月初,拿到美團和頭條offer.自己幾斤幾兩還是拎得清,這兩個offer多少都有運氣成分,所以并沒有多高興.每次刷別人面經,看到自己那么多答不上就很慌亂,于是依然不停投簡歷,不停面試,為面試積累經驗.

去了美團實習的經歷很愉快,上班比較輕松,leader人也很好,有相對多的時間學習而不是沉迷業務.提前批開始后,就開始刷面經,準備面試.一個月之后拿到留用意向書.

后邊投的公司不多,除了Face++,給了面試機會的公司基本都能走完所有面試流程,頭條,百度,美團,好未來,快手,華為都給了offer.雖然有些最后并沒有給offer,但是這個狀態也勉強過得去了.

面試心經:
互聯網一二線公司基本上都面過,總結一下面試技巧.
綜論:個人以為,技術面一般遵循DFS查找原則,先找一個點切入往深處探底,直到你答不上來,然后開始考察相近知識點,再接著探底.最后綜合評判一個人水平.
因此,你掌握的知識體系必須既有深度又有廣度.但,這是不可能的.

一. 學會主導面試問題走向和適時展示自己技術深度是很關鍵的一點.

舉例來說,你花了足夠時間研究了HTTP/2,基本上對它了如指掌.那么面試官一旦問到計網或者性能優化或者HTTP,HTTPS,你就要想辦法引導面試官問你HTTP/2,然后展示你的功力.

二. 學會回答問題:

面試問題分三種: 
第一類,你遇到過并且熟悉的,這時候不要開心,要控制好回答節奏,避免面試官覺得你剛好撞上. 
第二類:不太熟,簡單解釋,避開可能讓你入坑的詞匯(比如問react你非要說diff,但是寫不出diff算法).
第三類:不會,直接說自己沒接觸這方面,不裝懂.如果是非知識性問題,可以推理一番,體現你的分析能力.

三. 應對總監/經理面:

一般技術問題較少,多職業規劃和過去經歷總結.個人以為這里最重要的是要讓面試官覺得你是個很有潛力的人,以后會是一個優秀的程序員.可以用自己的經歷佐證你熱愛技術,喜歡探究原理,做事能夠持之以恒等等,表現你具備優秀程序員的品質.應對其他問題慎言就好,出口之前先想好.
除此之外,我看過美團面試評價表,他們也在乎一個人表達能力,思維能力,以及個人素質.所以適當注重個人軟實力也可以彌補技術上的不足.

關于應對前端面試,建立完善知識體系:

基礎:
MDN/w3c文檔基本過一遍.就不會在HTML,CSS基礎問題翻車.掌握《JavaScript高級程序設計》就可以應對大部分JS問題.(犀牛書當然也是一樣).然后就是套路型基礎問題,這個多刷刷面經就知道了.

進階:

《HTTP權威指南》,掌握HTTP1.1 HTTP/2 HTTPS的各個特性

JS系列: 《你不知道的JavaScript》,講解js難點問題.曾探的《JavaScript設計模式》,《JavaScript函數式編程》.

算法,推薦《JavaScript數據結構和算法》

下面總結前端主要知識點:

HTTP相關,尤其與網絡性能優化相關

緩存相關,各類緩存控制方式以及CDN

本地數據存儲,cookie,ls等等以及pwa

渲染相關,瀏覽器渲染機制,加載順序,優化點.SPA白屏等等.可

ES6相關,異步函數及其底層原理,推薦阮一峰ES6教程

性能優化,包含東西比較多,不僅要掌握做法更要知道原理.

設計模式,怎么寫,優缺點以及應用場景.

web安全,XSS,CSRF,SQL注入具體原理和防范措施

webpack相關問題,打包原理,模塊相關.

CSS3和HTML5相關

跨域的處理方案以及原理

即時通信方案以及原理

三大框架相關問題,vdom,數據綁定,diff之類.

阿里騰訊以及外企都是直接刷簡歷,沒給面試機會.心塞.
我也很絕望啊, who let me so vegetable !

兩輪技術面
(7月份搜狐大廈,問的都比較簡單,只記得這么多)

BFC

Flexbox用法,詳見總結

排序,找出最大三個數

快排原理,復雜度計算

繼承的實現方式,詳細問了創建實例對象的內部過程.

vdom原理,實現

異步原理,macrotask和microtask,寫了總結

兩輪技術面+HR面,當時沒記錄,只記得沒答上來的問題

webpack刷新原理

server push和websocket

url長度為什么受限制

XHR如何傳遞二進制流

百度內推面了倆部門,前前后后總計面了六輪,沒寫全,問的問題太多有些也記不清了.

大搜在百度現場面.三小時面完三輪.(荒郊野外真遠 -_-

一輪面試問的都比較基礎
例行自我介紹,隨便問了下美團實習項目,然后開始考察基礎.
Q:先講講JS繼承,后邊有白板,可以畫畫.
講了一下ES5繼承和原型鏈,寫了ES6的class示例.
Q:做過性能優化沒,講講性能優化
大概說了傳輸,渲染,緩存的優化
Q:一般怎么排查性能問題
chrome面板,balabala.其他第三方工具
Q:cookie,localStorage有些什么區別
就記得這些了,基本覆蓋大部分基礎知識

二面超嚴肅
例行自我介紹,問了問項目.
Q:學校課程(本專業沒有任何CS相關課程)是些啥?
Q:數據結構了解多少,講講前端上用到的
堆棧,隊列,hash table,DFS(挖了一個坑)
Q:現在給個DOM,寫個DFS查找里邊的所有文本,打印出來
白紙上大概寫出了樣子,但是明顯有BUG
Q:遞歸是什么原理,需不需要設置顯式終止條件?
答不出來
Q:給個數組,把這個數組每個元素放到一個l列表格里,打印表格DOM結構
寫了一個兩層循環
Q:講講URL到頁面過程
balabala
Q:HTTP建立是什么過程,詳細點,是長連接嗎?
Q:HTTP報文和回文內容包含些什么
Q:XHR怎么發的,具體怎么建立的,和HTTP有什么區別
原生XHR講一遍,區別不了解
Q:XHR上傳文件和其他數據有哪些區別?和HTTP傳數據有什么不一樣?
文件上傳用formData.
面試官XHR傳數據會base64編碼

三面 經理
除了聊人生外:
Q:你這項目里canvas繪制散點曲線怎么解決的?
高階貝塞爾曲線擬合,計算控制點.也可以最小二乘法計算.
Q:為什么不看看其他開源項目比如echart源碼?(我用過echarts)
當時沒有這么高覺悟.
介紹了網頁搜索部前端組業務,整個部門只有一個前端組,貌似加班.

電話面試,兩天面完

一面
例行自我介紹,對著項目問問.
和大搜一面差不多
此外還問了:
Q:如何實現繼承
高程繼承背一遍
Q:實例化對象是怎么樣的過程?
Q:構造函數上有哪些屬性?
length,其他不了解
Q:構造函數的prototype指向什么?和實例對象的prototype有什么關系?
Q:這里邊this是什么,其他地方用途
Q:bind和call有什么區別?
Q:排序算法懟一波,復雜度懟一波

二面
例行自我介紹,項目問的更深.
Q:ES6了解哪些,一個個細問?
Q:異步一般用什么?
promise,順便讓講了promise細節,之前做過總結
Q:ES6 module怎么實現的,和require區
Q:for of 和for循環有什么區別?
Q:canvas監聽點擊事件怎么實現
獲取觸發位置,計算是否在所繪圖形范圍
Q:其他寫法嗎?canvas有沒有相關接口
他說有,isPointInPath(),這個我忘記了.
Q:web安全知道哪些?
Q:Csrf怎么防范,驗證了origin和refer是否能完全避免?
并不能完全避免

三面
例行介紹,問了學校三年情況,在團隊情況,實習情況.
然后話題一轉,英文怎么樣,我是聽說不行,讀寫還行.
然后全程英文視頻面(流汗
面試官自我介紹,然后開始問.
英語確實爛,想說的說不出來,好尷尬.
面試官比較厲害,南大本科,國外留學碩博,創辦AI公司被百度收購就來這.
我要是做NLP就好了.當過CEO的人真是有魅力.
后邊面試官給了一些職業規劃和學習上的建議.

三輪技術面,一下午完成.
牛客視頻面,上來就是寫題.
第一題寫url轉置,www.toutiao.com => com.toutiao.www
轉換成數組,然后換位.
面試官說,不用API,像c語言一樣寫怎么辦.
查找所有.,記錄index.根據index數組長度,循環交換每兩個相鄰index之前的片段.
面試官說這里交換用到了temp臨時變量,js不用臨時變量而交換值該怎么寫呢?比如交換ab值.寫個函數試試.
想了一會兒,嘗試寫一個柯里化函數解決,但是沒寫出來,面試官提示ES6.
個人覺得這題好偏,除了解構,用arguments和對象都能實現.

  [a,b] = [b,a];
  {    
       a:b,
       b:a
   }

接著考察css,要求寫一個搜索框,右側搜索按鈕固定寬度,左側自適應.
寫了一個absolute定位,浮動布局,css3 calc,css translate設置寬度.
然后大致講了用flex布局.
中間問了哪些元素默認是inline-block,解釋與block,inline的差別.
面試官接著上邊問css3有哪些新特性?
問到了動畫,就細細問animation,我說動畫不熟.中間提到了css3性能,
接著問2D和3D動畫性能上有什么差異?這個不了解,說了有些可以觸發GPU加速,渲染性能有一定提升.
面試官又問動畫的GPU問題,這就答不上了.

不多說,寫題.
bind函數實現,這個不難,一會兒寫完了.主要是考閉包和arg,另外記得先檢測bind是否存在.
面試官說不完善,bind綁定對象之后再去調用傳參怎么辦.
獲取arguments傳入返回的函數.
然后出了這個題:

最多存儲n對KV;如果大于n個, 則隨意剔除一個已經過期的KV;如果沒有過期的KV, 
則按照LRU的規則剔除一個KV;查詢時如果已經過期, 則返回空;

沒學過算法完全看不懂.
然后開始問性能優化,從域名服務開始,到HTTP傳輸,到加載和緩存,再到渲染,再到代碼優化,一步步詳細講解.
中間面試官打斷HTTP,問HTTP/2有哪些特性?
講了多路復用和server push.
然后問HTTPS過程
講了HTPPS建立連接,證書加密過程
面試官又問簡歷HTTPS連接之后傳輸數據怎么加密?
面試官問雪碧圖為什么能優化性能?
答減少HTTP連接,一次性傳輸,HTTP有并發限制
問HTTP為什么限制并發,我說可能是避免資源占用過多.
問要是非要一次性加載100張圖怎么辦?說不知道,知道的CDN也不能解決.
面試官問HTTP2多路復用是什么?
建立一個HTTP連接,傳輸多個文件.
問那雪碧圖優化點在哪里?還有別的么?答不上.
(其實雪碧圖把多張圖合并,一定程度上減小了體積,單個圖片要包含很多無用信息,但是在HTTP層的優化可以被多路復用替代了).
HTTP在OSI哪一層? 應用層
詳細說哪七層?
在渲染優化上問了函數節流,并讓寫了一個節流函數.
在代碼優化上問了queryselectAll和getBy的區別,
還問了mouseenter和mouseover的區別.

三面主要問項目和實習,遇到了考察點就追問到底.
沒什么具體印象了.
以下為血的教訓:
又問了OSI,
依然不會.
面試官:中間隔了一個小時,你就不去查一下嗎?
我:.....

上來一個定時器異步的for循環題,問了一下結果要求解釋.沒啥難度,就是要細心.
然后是一個很長函數調用的題,主要考察this指向,作用域鏈,原型鏈和call.一不小心會掉進坑里,我給了結果,順便深入講了一下分析過程.
接著是一個模板解析函數,給一個mustache風格的模板和一堆參數,要求編譯模板并輸出.白紙手寫.
大概畫了幾筆,發現判斷模板是否合法寫不出來.然后接著寫mustache替換.
告訴面試官自己的想法和遇到的難題,面試官趁勢對著代碼問了一些問題.
面試官又問了一下事件代理,
大致講了這個東西,順便解釋了事件模型和性能優化點.
然后讓解釋url到頁面渲染的過程,
大致說了整個流程.
接著問css和js加載的差異,主要考察js阻塞問題.
然后問domready和onload區別,這點不是很清楚,答得不好.
中間提到了HTTP/2,所以面試官又讓細說http的各個版本.
講了http1.1特性.http/2的二進制分幀,多路復用,server push以及性能優化作用,然后講了https加密.
面試官接著問HTTPS流程和細節,詳細解釋了HTTPS證書加密過程.
面試官讓HR領我出去等二面.
滴滴給人面試體驗太差了,所以放棄面試了.

快手HC很少,面試也有點難,薪資還不錯,面完了之后去辦公室看了看,感覺挺不錯的.
講講這家略神秘的公司面試流程
一面是基礎技術面,將前端的方方面面都問了一下,給了一些算法題和技術場景,讓給解決方案.
二面(前端主管)基本全程在線coding,題目記不清了,四五道題難度有高有低,寫了整整一個小時代碼.后邊是半小時前端技術面,基本每個點都會問到問不下去.
三面是部門Leader面(前后端主管),HR后來說三面考察智力,反應速度和學習能力,問了一些算法和智力題,給了一個UML圖應用實例,讓設計一個停車場計費系統的UML示例圖.
四面是HR面,亂七八糟問了一通,學校情況啊,實現情況啊,個人性格啊什么的.

春招實習的時候沒有offer,于是投了菊廠試試.筆試,性格測試混混就過了.兩輪面試,問了一些學校的項目經歷和關于c語言的問題,其他都是在聊天.然后莫名其妙就過了面試.
秋招直接進終面,也沒有問任何技術問題,40分鐘也在瞎聊天.然后就拿到offer了,感覺沒有比華為更簡單的面試了?.薪資一般水平.

下面是其他公司的一些面經:

1.瀏覽器工作原理

瀏覽器的主要組件包括：
用戶界面－ 包括地址欄、后退/前進按鈕、書簽目錄
瀏覽器引擎－ 用來查詢及操作渲染引擎的接口
渲染引擎－ 渲染界面:Firefox、Chrome和Safari是基于兩種渲染引擎構建的，Firefox使用Geoko——Mozilla自主研發的渲染引擎，Safari和Chrome都使用webkit.
網絡－ 用來完成網絡調用，例如http請求
UI 后端－ 用來繪制類似組合選擇框及對話框等基本組件，具有不特定于某個平臺的通用接口，底層使用操作系統的用戶接口
JS解釋器－ 解釋執行JS代碼
數據存儲－ 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數據

2.Web安全,舉例說明

3.狀態碼

4.同源:同端口,同域名,同協議

5.對象繼承

6.ES6歷史以及新特性有哪些?

7.promise原理

8.事件模型

9.常見兼容性問題,列舉(移動端/PC端)

10.性能優化　　　

1.Ajax原理

2.瀏覽器解析過程

流程： 解析html以構建dom樹->構建render樹->布局render樹->繪制render樹
參考文章

3.垂直居中

4.數據類型判斷

5.路由實現

6.數據本地存儲

7.跨域 參考

8.數據雙向綁定單向綁定優缺點

1.無線性能優化

2.Tap事件,Touch

3.數據存儲

1.Dom操作

2.移動布局方案

3.前后端協作

4.原生Ajax實現過程

1.單鏈表反轉

2.快排

3.即時通信(除了Ajax和websocket)

懵逼了
總結一下其他方式
1.Comet技術：基于HTTP長連接的Web端實時通信技術
2.SSE：服務器發送事件,使用長鏈接進行通訊

4.服務器代理轉發如何處理cookie(nginx)

5.對象繼承

6.this

7.rem布局的優缺點

一面(記錄兩個,其他都還好)

實現動畫有哪些途徑

CSS3

JS幀動畫,定時器,requestAnimateFrame

Canvas動畫

SVG

圖片

對象繼承的實現

二面

web安全

https加密過程,證書用途

xss幾種形式,防范手段,過濾哪些字符?

xsrf原理,實例,防范手段(Laravel的token)

Sql注入

性能優化

代碼優化(html,css,js)

網絡性能優化:

Cache緩存之強制緩存和協商緩存.看具體詳情

CDN原理及應用

HTTP壓縮

上下文環境對象

設計模式(要求說出如何實現,應用,優缺點):

單例模式

工廠模式

發布訂閱模式

跨域(產生原因)

JSONP原理

CORS如何設置

Nginx代理

讀過哪些框架源碼?

如何寫一個CSS庫,要注意哪些東西?

JS面向對象之封裝,繼承,多態的體現和應用?

BST

promiseAll如何實現,以及如何實現多層異步回調?

加油站問題(貪心算法)

XHR具體底層原理和API

單例模式實現/設計模式

JSONP原理,回調過程

Latex怎么解析

hash算法實現,如何避免沖突,如何在沖突里檢測

Generater

ES6怎么編譯成ES5,css-loader原理,過程

ES6轉成ES5的常見例子

常見數據結構,常見算法

node多線程實現

進程和線程

對前端的理解

說說rn,weex原理

說說XHR

Jq的選擇器引擎,$(".a .b")以及$(".a").find(".b")

MD5摘要算法其他用途

前端架構的理解

前端框架的看法

如何做前后端分離

在不使用后端模板渲染的情況下,如何做前端數據直出(不使用異步請求數據)?

SSR適用什么場景?SPA首屏空白原因?

vue構建過程原理,具體流程

模板到DOM大致流程:
template模板經過parse處理后返回AST
獲得一棵AST后再經過generate()生成渲染函數
執行渲染函數后會獲得一個VNode，即虛擬DOM
patch函數，負責把虛擬DOM變為真正DOM。

vue2新增內容?獨立構建（standalone）和運行時構建（runtime-only）的差別和應用?詳情

爬蟲的實現原理?如何實現一個爬蟲,如何解析文件?

如何解決爬蟲慢的問題?

多線程如何保障各個線程的安全?

webpack工具和node了解哪些?node各個模塊的底層原理?

CSS3實現卡片翻轉?

說說職業規劃?

說說HTML難點,語義化的體現?

說說CSS重要難點?如何實現垂直水平居中?

JS中this是什么?如何改變this?

講講時間復雜度計算?

算法題:假定26個字母對應1-26,將一串數字轉成字母有多少種可能?
暴力解法復雜度是多少?

(百度外賣業務:包含移動客戶端(RN,hybrid),PC web端,H5,后臺界面vue,桌面應用包含編輯器插件,前端構建工具,node中間層)

盒模型之box-sizing

XHR原理及API

session和sessionStorage

map forEach(數組各個API細節)

dom事件代理,有什么優點?

三種隱藏方式差別:visibility:hidden,display:none,opacity:0

渲染上的差異:
1.將元素設置為display:none后，元素在頁面上將徹底消失，元素本來占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的回流和重繪。  
2.設置元素的visibility為hidden，和display:none的區別在于，元素在頁面消失后，其占據的空間依舊會保留著，所以它只會導致瀏覽器重繪而不會回流。      
3.opacity:0,只是看不到元素,元素依然存在并且占有原有位置.
注:
事件綁定的差異:
1、display:none：元素徹底消失，不會觸發綁定的事件.
2、visibility:hidden：無法觸發其點擊事件，有一種說法是display:none是元素看不見摸不著，而visibility:hidden是看不見摸得著，這種說法是不準確的，設置元素的visibility后無法觸發點擊事件，說明這種方法元素也是消失了，只是依然占據著頁面空間。
3、opacity:0：可以觸發點擊事件，設置元素透明度為0后，元素只是相對于人眼不存在而已，對瀏覽器來說，它還是存在的，所以可以觸發綁定事件
動畫屬性的差異: 1、display:none：完全不受transition屬性的影響，元素立即消失
2、visibility：hidden：元素消失的時間跟transition屬性設置的時間一樣，但是沒有動畫效果.
3、opacity:0,動畫屬性生效,能夠進行正常的動畫效果. 代碼演示地址

inline和block元素列舉,block和inline-block區別?

span包含12px大小英文"abc",問span高度?baseline怎么理解?

css實現自適應正方形?

string查找第一個不重復字符.如果換成字符串呢?

Angular數據綁定機制?

重繪和回流的理解

querySelectAll和ByClassName所獲取元素的區別?如何綁定事件?

getComputedStyle用法?

addEventListener綁定事件?參數不同的執行順序.

正則匹配電話號碼.exec,match,search用法?推薦一篇高質量正則文章

數據類型判斷的方法,toString判斷的來源?

ES6 class原理?

function rest參數長度?function.length如何判斷與arguments對象長度區別?

var a;typeof a;let a;考察點

mvp,mvc,mvvm

vuex原理,watch對象

js defer async順序,模塊依賴(AMD,CMD差別)

設計模式和應用

session和cookie

清浮動,BFC

cookie存儲在哪里?(memory)

typeof

Null,Undefined,Boolean,Number,String,Object
typeof 只能檢測基本數據類型

四欄布局

數組,數組對象去重

數組查某個字符出現次數

選擇器權值

右鍵菜單定制

函數不定參

定時器原理

url=>渲染:script阻塞

數據結構應用

數據雙向綁定(vue,ng原理)

面向對象三要素

閉包

三欄布局

內聯元素包含塊元素的表現

三種隱藏方式的區別

求最大子數組和.

塊元素和內聯元素渲染區別?

ul li實現計數.

flex-box用法

svg與canvas

JPG,png圖片特點,場景

CSS寫輪播

拖拽組建

PV統計

URL監聽變化

1.數組操作

2.排序算法

3.動態規劃(書包問題)

4.編程題(正則)

線程

各類通信協議

二叉樹

算法復雜度

棧封裝,利用棧對數組reverse(編程)

各類排序算法以及復雜度計算

Node的一些用法

二叉樹遍歷

JS內部屬性

頁面之間傳參

程序題:數組找公共元素

出入棧可能性計算

數組去重

基本數據類型

Null,Undefined,Boolean,Number,String,Object
typeof 只能檢測基本數據類型