互聯網大廠求職面經及總結 | 掘金技術徵文

時間 2019-11-07

標籤互聯網大廠求職總結技術徵文简体版

原文原文鏈接

校招近十家一線互聯網大廠的面經css

個人秋招之路差很少走到盡頭了,感受真是精疲力盡了.把這大半年的經歷和麪試總結寫下來,但願能給和我同樣在求職路上煎熬的人一點幫助.html

先說背景:微電子科學與工程專業,學過兩門和CS相關的課程:c語言和單片機.這個專業的惟一好處就是:大部分人並不知道這個專業學什麼,覺得和電信差很少.因此在衆多野生程序員中也算一丁點兒優點,哈哈.本專業適合讀博,大三開學決定不去讀研了,轉CS作前端.這也算是一個我很菜的藉口,能夠自我欺騙一下.前端

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

就這樣一直熬到四月份,開始漸漸可以從容應對前兩輪技術面.五月初,拿到美團和頭條實習offer.本身幾斤幾兩仍是拎得清,這兩個offer多少都有運氣成分,因此並無多高興.每次刷別人面經,看到本身那麼多答不上就很慌亂,因而依然不停投簡歷,不停面試,爲秋招積累經驗.node

6月份去了美團實習,上班比較輕鬆,leader人也很好,有相對多的時間學習而不是沉迷業務.提早批校招開始後,就開始刷面經,準備面試.8月初拿到留用意向書,月底離職回學校專心準備面試.react

秋招投的公司很少,除了Face++,給了面試機會的公司基本都能走完全部面試流程,雖然有些最後並無給offer,可是這個狀態也勉強過得去了.webpack

因此啊,努力老是會有成果的,還在掙扎的同窗千萬別放棄了,總有柳暗花明時.

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

一. 學會主導面試問題走向和適時展現本身技術深度是很關鍵的一點.nginx

舉例來講,你花了足夠時間研究了HTTP/2,基本上對它瞭如指掌.那麼面試官一旦問到計網或者性能優化或者HTTP,HTTPS,你就要想辦法引導面試官問你HTTP/2,而後展現你的功力.程序員

二. 學會回答問題:

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

三. 應對總監/經理面:

通常技術問題較少,多職業規劃和過去經歷總結.我的覺得這裏最重要的是要讓面試官以爲你是個頗有潛力的人,之後會是一個優秀的程序員.能夠用本身的經歷佐證你熱愛技術,喜歡探究原理,作事可以鍥而不捨等等,表現你具有優秀程序員的品質.應對其餘問題慎言就好,出口以前先想好.
除此以外,我看過美團面試評價表,他們也在意一我的表達能力,思惟能力,以及我的素質.因此適當注重我的軟實力也能夠彌補技術上的不足.

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

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

進階:

《HTTP權威指南》,掌握HTTP1.1 HTTP/2 HTTPS的各個特性
JS系列: 《你不知道的JavaScript》.曾探的《JavaScript設計模式》.《JavaScript函數式編程》.
算法,推薦《JavaScript數據結構和算法》
性能優化,推薦《web性能權威指南》
下面總結前端主要知識點:

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,寫了總結

360 奇舞團

兩輪技術面+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領我出去等二面.
滴滴給人面試體驗太差了,因此放棄面試了.

附錄:

下面是春招實習的一些面經,和校招差很少

騰訊一面

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佈局的優缺點

騰訊Alloy Team

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

實現動畫有哪些途徑
- CSS3
- JS幀動畫,定時器,requestAnimateFrame
- Canvas動畫
- SVG
- 圖片
對象繼承的實現

二面

web安全
- https加密過程,證書用途
- xss幾種形式,防範手段,過濾哪些字符?
- xsrf原理,實例,防範手段(Laravel的token)
- Sql注入
性能優化
- 代碼優化(html,css,js)
- 網絡性能優化:
  1. Cache緩存之強制緩存和協商緩存.看具體詳情
  2. CDN原理及應用
  3. 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,只是看不到元素,元素依然存在而且佔有原有位置.
注:
事件綁定的差別:
一、display:none：元素完全消失，不會觸發綁定的事件.
二、visibility:hidden：沒法觸發其點擊事件，有一種說法是display:none是元素看不見摸不着，而visibility:hidden是看不見摸得着，這種說法是不許確的，設置元素的visibility後沒法觸發點擊事件，說明這種方法元素也是消失了，只是依然佔據着頁面空間。
三、opacity:0：能夠觸發點擊事件，設置元素透明度爲0後，元素只是相對於人眼不存在而已，對瀏覽器來講，它仍是存在的，因此能夠觸發綁定事件
動畫屬性的差別: 一、display:none：徹底不受transition屬性的影響，元素當即消失
二、visibility：hidden：元素消失的時間跟transition屬性設置的時間同樣，可是沒有動畫效果.
三、opacity:0,動畫屬性生效,可以進行正常的動畫效果. 代碼演示地址