摘要：年求職面經(jīng)及總結(jié)我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經(jīng)歷和面試總結(jié)寫下來(lái)希望能給和我一樣在求職路上煎熬的人一點(diǎn)幫助先說(shuō)背景微電子科學(xué)與工程專業(yè)學(xué)過(guò)兩門和相關(guān)的課程語(yǔ)言和單片機(jī)這個(gè)專業(yè)的唯一好處就是大部分人并不知道這個(gè)專

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

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

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

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

去了美團(tuán)實(shí)習(xí)的經(jīng)歷很愉快,上班比較輕松,leader人也很好,有相對(duì)多的時(shí)間學(xué)習(xí)而不是沉迷業(yè)務(wù).提前批開始后,就開始刷面經(jīng),準(zhǔn)備面試.一個(gè)月之后拿到留用意向書.

后邊投的公司不多,除了Face++,給了面試機(jī)會(huì)的公司基本都能走完所有面試流程,頭條,百度,美團(tuán),好未來(lái),快手,華為都給了offer.雖然有些最后并沒有給offer,但是這個(gè)狀態(tài)也勉強(qiáng)過(guò)得去了.

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

一. 學(xué)會(huì)主導(dǎo)面試問(wèn)題走向和適時(shí)展示自己技術(shù)深度是很關(guān)鍵的一點(diǎn).

舉例來(lái)說(shuō),你花了足夠時(shí)間研究了HTTP/2,基本上對(duì)它了如指掌.那么面試官一旦問(wèn)到計(jì)網(wǎng)或者性能優(yōu)化或者HTTP,HTTPS,你就要想辦法引導(dǎo)面試官問(wèn)你HTTP/2,然后展示你的功力.

二. 學(xué)會(huì)回答問(wèn)題:

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

三. 應(yīng)對(duì)總監(jiān)/經(jīng)理面:

一般技術(shù)問(wèn)題較少,多職業(yè)規(guī)劃和過(guò)去經(jīng)歷總結(jié).個(gè)人以為這里最重要的是要讓面試官覺得你是個(gè)很有潛力的人,以后會(huì)是一個(gè)優(yōu)秀的程序員.可以用自己的經(jīng)歷佐證你熱愛技術(shù),喜歡探究原理,做事能夠持之以恒等等,表現(xiàn)你具備優(yōu)秀程序員的品質(zhì).應(yīng)對(duì)其他問(wèn)題慎言就好,出口之前先想好.
除此之外,我看過(guò)美團(tuán)面試評(píng)價(jià)表,他們也在乎一個(gè)人表達(dá)能力,思維能力,以及個(gè)人素質(zhì).所以適當(dāng)注重個(gè)人軟實(shí)力也可以彌補(bǔ)技術(shù)上的不足.

關(guān)于應(yīng)對(duì)前端面試,建立完善知識(shí)體系:

基礎(chǔ):
MDN/w3c文檔基本過(guò)一遍.就不會(huì)在HTML,CSS基礎(chǔ)問(wèn)題翻車.掌握《JavaScript高級(jí)程序設(shè)計(jì)》就可以應(yīng)對(duì)大部分JS問(wèn)題.(犀牛書當(dāng)然也是一樣).然后就是套路型基礎(chǔ)問(wèn)題,這個(gè)多刷刷面經(jīng)就知道了.

進(jìn)階:

《HTTP權(quán)威指南》,掌握HTTP1.1 HTTP/2 HTTPS的各個(gè)特性

JS系列: 《你不知道的JavaScript》,講解js難點(diǎn)問(wèn)題.曾探的《JavaScript設(shè)計(jì)模式》,《JavaScript函數(shù)式編程》.

算法,推薦《JavaScript數(shù)據(jù)結(jié)構(gòu)和算法》

下面總結(jié)前端主要知識(shí)點(diǎn):

HTTP相關(guān),尤其與網(wǎng)絡(luò)性能優(yōu)化相關(guān)

緩存相關(guān),各類緩存控制方式以及CDN

本地?cái)?shù)據(jù)存儲(chǔ),cookie,ls等等以及pwa

渲染相關(guān),瀏覽器渲染機(jī)制,加載順序,優(yōu)化點(diǎn).SPA白屏等等.可

ES6相關(guān),異步函數(shù)及其底層原理,推薦阮一峰ES6教程

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

設(shè)計(jì)模式,怎么寫,優(yōu)缺點(diǎn)以及應(yīng)用場(chǎng)景.

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

webpack相關(guān)問(wèn)題,打包原理,模塊相關(guān).

CSS3和HTML5相關(guān)

跨域的處理方案以及原理

即時(shí)通信方案以及原理

三大框架相關(guān)問(wèn)題,vdom,數(shù)據(jù)綁定,diff之類.

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

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

BFC

Flexbox用法,詳見總結(jié)

排序,找出最大三個(gè)數(shù)

快排原理,復(fù)雜度計(jì)算

繼承的實(shí)現(xiàn)方式,詳細(xì)問(wèn)了創(chuàng)建實(shí)例對(duì)象的內(nèi)部過(guò)程.

vdom原理,實(shí)現(xiàn)

異步原理,macrotask和microtask,寫了總結(jié)

兩輪技術(shù)面+HR面,當(dāng)時(shí)沒記錄,只記得沒答上來(lái)的問(wèn)題

webpack刷新原理

server push和websocket

url長(zhǎng)度為什么受限制

XHR如何傳遞二進(jìn)制流

百度內(nèi)推面了倆部門,前前后后總計(jì)面了六輪,沒寫全,問(wèn)的問(wèn)題太多有些也記不清了.

大搜在百度現(xiàn)場(chǎng)面.三小時(shí)面完三輪.(荒郊野外真遠(yuǎn) -_-

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

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

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

電話面試,兩天面完

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

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

三面
例行介紹,問(wèn)了學(xué)校三年情況,在團(tuán)隊(duì)情況,實(shí)習(xí)情況.
然后話題一轉(zhuǎn),英文怎么樣,我是聽說(shuō)不行,讀寫還行.
然后全程英文視頻面(流汗
面試官自我介紹,然后開始問(wèn).
英語(yǔ)確實(shí)爛,想說(shuō)的說(shuō)不出來(lái),好尷尬.
面試官比較厲害,南大本科,國(guó)外留學(xué)碩博,創(chuàng)辦AI公司被百度收購(gòu)就來(lái)這.
我要是做NLP就好了.當(dāng)過(guò)CEO的人真是有魅力.
后邊面試官給了一些職業(yè)規(guī)劃和學(xué)習(xí)上的建議.

三輪技術(shù)面,一下午完成.
?？鸵曨l面,上來(lái)就是寫題.
第一題寫url轉(zhuǎn)置,www.toutiao.com => com.toutiao.www
轉(zhuǎn)換成數(shù)組,然后換位.
面試官說(shuō),不用API,像c語(yǔ)言一樣寫怎么辦.
查找所有.,記錄index.根據(jù)index數(shù)組長(zhǎng)度,循環(huán)交換每?jī)蓚€(gè)相鄰index之前的片段.
面試官說(shuō)這里交換用到了temp臨時(shí)變量,js不用臨時(shí)變量而交換值該怎么寫呢?比如交換ab值.寫個(gè)函數(shù)試試.
想了一會(huì)兒,嘗試寫一個(gè)柯里化函數(shù)解決,但是沒寫出來(lái),面試官提示ES6.
個(gè)人覺得這題好偏,除了解構(gòu),用arguments和對(duì)象都能實(shí)現(xiàn).

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

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

不多說(shuō),寫題.
bind函數(shù)實(shí)現(xiàn),這個(gè)不難,一會(huì)兒寫完了.主要是考閉包和arg,另外記得先檢測(cè)bind是否存在.
面試官說(shuō)不完善,bind綁定對(duì)象之后再去調(diào)用傳參怎么辦.
獲取arguments傳入返回的函數(shù).
然后出了這個(gè)題:

最多存儲(chǔ)n對(duì)KV;如果大于n個(gè), 則隨意剔除一個(gè)已經(jīng)過(guò)期的KV;如果沒有過(guò)期的KV, 
則按照LRU的規(guī)則剔除一個(gè)KV;查詢時(shí)如果已經(jīng)過(guò)期, 則返回空;

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

三面主要問(wèn)項(xiàng)目和實(shí)習(xí),遇到了考察點(diǎn)就追問(wèn)到底.
沒什么具體印象了.
以下為血的教訓(xùn):
又問(wèn)了OSI,
依然不會(huì).
面試官:中間隔了一個(gè)小時(shí),你就不去查一下嗎?
我:.....

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

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

春招實(shí)習(xí)的時(shí)候沒有offer,于是投了菊廠試試.筆試,性格測(cè)試混混就過(guò)了.兩輪面試,問(wèn)了一些學(xué)校的項(xiàng)目經(jīng)歷和關(guān)于c語(yǔ)言的問(wèn)題,其他都是在聊天.然后莫名其妙就過(guò)了面試.
秋招直接進(jìn)終面,也沒有問(wèn)任何技術(shù)問(wèn)題,40分鐘也在瞎聊天.然后就拿到offer了,感覺沒有比華為更簡(jiǎn)單的面試了?.薪資一般水平.

下面是其他公司的一些面經(jīng):

1.瀏覽器工作原理

瀏覽器的主要組件包括：
用戶界面－ 包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸?br>瀏覽器引擎－ 用來(lái)查詢及操作渲染引擎的接口
渲染引擎－ 渲染界面:Firefox、Chrome和Safari是基于兩種渲染引擎構(gòu)建的，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit.
網(wǎng)絡(luò)－ 用來(lái)完成網(wǎng)絡(luò)調(diào)用，例如http請(qǐng)求
UI 后端－ 用來(lái)繪制類似組合選擇框及對(duì)話框等基本組件，具有不特定于某個(gè)平臺(tái)的通用接口，底層使用操作系統(tǒng)的用戶接口
JS解釋器－ 解釋執(zhí)行JS代碼
數(shù)據(jù)存儲(chǔ)－ 屬于持久層，瀏覽器需要在硬盤中保存類似cookie的各種數(shù)據(jù)

2.Web安全,舉例說(shuō)明

3.狀態(tài)碼

4.同源:同端口,同域名,同協(xié)議

5.對(duì)象繼承

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

7.promise原理

8.事件模型

9.常見兼容性問(wèn)題,列舉(移動(dòng)端/PC端)

10.性能優(yōu)化　　　

1.Ajax原理

2.瀏覽器解析過(guò)程

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

3.垂直居中

4.數(shù)據(jù)類型判斷

5.路由實(shí)現(xiàn)

6.數(shù)據(jù)本地存儲(chǔ)

7.跨域 參考

8.數(shù)據(jù)雙向綁定單向綁定優(yōu)缺點(diǎn)

1.無(wú)線性能優(yōu)化

2.Tap事件,Touch

3.數(shù)據(jù)存儲(chǔ)

1.Dom操作

2.移動(dòng)布局方案

3.前后端協(xié)作

4.原生Ajax實(shí)現(xiàn)過(guò)程

1.單鏈表反轉(zhuǎn)

2.快排

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

懵逼了
總結(jié)一下其他方式
1.Comet技術(shù)：基于HTTP長(zhǎng)連接的Web端實(shí)時(shí)通信技術(shù)
2.SSE：服務(wù)器發(fā)送事件,使用長(zhǎng)鏈接進(jìn)行通訊

4.服務(wù)器代理轉(zhuǎn)發(fā)如何處理cookie(nginx)

5.對(duì)象繼承

6.this

7.rem布局的優(yōu)缺點(diǎn)

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

實(shí)現(xiàn)動(dòng)畫有哪些途徑

CSS3

JS幀動(dòng)畫,定時(shí)器,requestAnimateFrame

Canvas動(dòng)畫

SVG

圖片

對(duì)象繼承的實(shí)現(xiàn)

二面

web安全

https加密過(guò)程,證書用途

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

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

Sql注入

性能優(yōu)化

代碼優(yōu)化(html,css,js)

網(wǎng)絡(luò)性能優(yōu)化:

Cache緩存之強(qiáng)制緩存和協(xié)商緩存.看具體詳情

CDN原理及應(yīng)用

HTTP壓縮

上下文環(huán)境對(duì)象

設(shè)計(jì)模式(要求說(shuō)出如何實(shí)現(xiàn),應(yīng)用,優(yōu)缺點(diǎn)):

單例模式

工廠模式

發(fā)布訂閱模式

跨域(產(chǎn)生原因)

JSONP原理

CORS如何設(shè)置

Nginx代理

讀過(guò)哪些框架源碼?

如何寫一個(gè)CSS庫(kù),要注意哪些東西?

JS面向?qū)ο笾庋b,繼承,多態(tài)的體現(xiàn)和應(yīng)用?

BST

promiseAll如何實(shí)現(xiàn),以及如何實(shí)現(xiàn)多層異步回調(diào)?

加油站問(wèn)題(貪心算法)

XHR具體底層原理和API

單例模式實(shí)現(xiàn)/設(shè)計(jì)模式

JSONP原理,回調(diào)過(guò)程

Latex怎么解析

hash算法實(shí)現(xiàn),如何避免沖突,如何在沖突里檢測(cè)

Generater

ES6怎么編譯成ES5,css-loader原理,過(guò)程

ES6轉(zhuǎn)成ES5的常見例子

常見數(shù)據(jù)結(jié)構(gòu),常見算法

node多線程實(shí)現(xiàn)

進(jìn)程和線程

對(duì)前端的理解

說(shuō)說(shuō)rn,weex原理

說(shuō)說(shuō)XHR

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

MD5摘要算法其他用途

前端架構(gòu)的理解

前端框架的看法

如何做前后端分離

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

SSR適用什么場(chǎng)景?SPA首屏空白原因?

vue構(gòu)建過(guò)程原理,具體流程

模板到DOM大致流程:
template模板經(jīng)過(guò)parse處理后返回AST
獲得一棵AST后再經(jīng)過(guò)generate()生成渲染函數(shù)
執(zhí)行渲染函數(shù)后會(huì)獲得一個(gè)VNode，即虛擬DOM
patch函數(shù)，負(fù)責(zé)把虛擬DOM變?yōu)檎嬲鼶OM。

vue2新增內(nèi)容?獨(dú)立構(gòu)建（standalone）和運(yùn)行時(shí)構(gòu)建（runtime-only）的差別和應(yīng)用?詳情

爬蟲的實(shí)現(xiàn)原理?如何實(shí)現(xiàn)一個(gè)爬蟲,如何解析文件?

如何解決爬蟲慢的問(wèn)題?

多線程如何保障各個(gè)線程的安全?

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

CSS3實(shí)現(xiàn)卡片翻轉(zhuǎn)?

說(shuō)說(shuō)職業(yè)規(guī)劃?

說(shuō)說(shuō)HTML難點(diǎn),語(yǔ)義化的體現(xiàn)?

說(shuō)說(shuō)CSS重要難點(diǎn)?如何實(shí)現(xiàn)垂直水平居中?

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

講講時(shí)間復(fù)雜度計(jì)算?

算法題:假定26個(gè)字母對(duì)應(yīng)1-26,將一串?dāng)?shù)字轉(zhuǎn)成字母有多少種可能?
暴力解法復(fù)雜度是多少?

(百度外賣業(yè)務(wù):包含移動(dòng)客戶端(RN,hybrid),PC web端,H5,后臺(tái)界面vue,桌面應(yīng)用包含編輯器插件,前端構(gòu)建工具,node中間層)

盒模型之box-sizing

XHR原理及API

session和sessionStorage

map forEach(數(shù)組各個(gè)API細(xì)節(jié))

dom事件代理,有什么優(yōu)點(diǎn)?

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

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

inline和block元素列舉,block和inline-block區(qū)別?

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

css實(shí)現(xiàn)自適應(yīng)正方形?

string查找第一個(gè)不重復(fù)字符.如果換成字符串呢?

Angular數(shù)據(jù)綁定機(jī)制?

重繪和回流的理解

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

getComputedStyle用法?

addEventListener綁定事件?參數(shù)不同的執(zhí)行順序.

正則匹配電話號(hào)碼.exec,match,search用法?推薦一篇高質(zhì)量正則文章

數(shù)據(jù)類型判斷的方法,toString判斷的來(lái)源?

ES6 class原理?

function rest參數(shù)長(zhǎng)度?function.length如何判斷與arguments對(duì)象長(zhǎng)度區(qū)別?

var a;typeof a;let a;考察點(diǎn)

mvp,mvc,mvvm

vuex原理,watch對(duì)象

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

設(shè)計(jì)模式和應(yīng)用

session和cookie

清浮動(dòng),BFC

cookie存儲(chǔ)在哪里?(memory)

typeof

Null,Undefined,Boolean,Number,String,Object
typeof 只能檢測(cè)基本數(shù)據(jù)類型

四欄布局

數(shù)組,數(shù)組對(duì)象去重

數(shù)組查某個(gè)字符出現(xiàn)次數(shù)

選擇器權(quán)值

右鍵菜單定制

函數(shù)不定參

定時(shí)器原理

url=>渲染:script阻塞

數(shù)據(jù)結(jié)構(gòu)應(yīng)用

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

面向?qū)ο笕?/p>

閉包

三欄布局

內(nèi)聯(lián)元素包含塊元素的表現(xiàn)

三種隱藏方式的區(qū)別

求最大子數(shù)組和.

塊元素和內(nèi)聯(lián)元素渲染區(qū)別?

ul li實(shí)現(xiàn)計(jì)數(shù).

flex-box用法

svg與canvas

JPG,png圖片特點(diǎn),場(chǎng)景

CSS寫輪播

拖拽組建

PV統(tǒng)計(jì)

URL監(jiān)聽變化

1.數(shù)組操作

2.排序算法

3.動(dòng)態(tài)規(guī)劃(書包問(wèn)題)

4.編程題(正則)

線程

各類通信協(xié)議

二叉樹

算法復(fù)雜度

棧封裝,利用棧對(duì)數(shù)組reverse(編程)

各類排序算法以及復(fù)雜度計(jì)算

Node的一些用法

二叉樹遍歷

JS內(nèi)部屬性

頁(yè)面之間傳參

程序題:數(shù)組找公共元素

出入?？赡苄杂?jì)算

數(shù)組去重

基本數(shù)據(jù)類型

Null,Undefined,Boolean,Number,String,Object
typeof 只能檢測(cè)基本數(shù)據(jù)類型