摘要：作者兩年經(jīng)驗(yàn)第一家任職的是個(gè)小公司第二家算是二線互聯(lián)網(wǎng)公司各待了一年吧能有機(jī)會(huì)去阿里面試很驚喜先來和大家分享一下面試經(jīng)歷電話面試初探因?yàn)檫€在職的緣故電話面試從晚上點(diǎn)鐘開始持續(xù)了半個(gè)小時(shí)左右一開始的時(shí)候特比緊張甚至聲音略有些顫抖簡(jiǎn)單自我介紹做

作者兩年經(jīng)驗(yàn), 第一家任職的是個(gè)小公司, 第二家算是二線互聯(lián)網(wǎng)公司, 各待了一年吧... 
能有機(jī)會(huì)去阿里面試很驚喜! 
先來和大家分享一下面試經(jīng)歷...

因?yàn)檫€在職的緣故,電話面試從晚上8點(diǎn)鐘開始, 持續(xù)了半個(gè)小時(shí)左右,
一開始的時(shí)候特比緊張,甚至聲音略有些顫抖 = =!

簡(jiǎn)單自我介紹, 做過哪些項(xiàng)目, 使用哪些技術(shù)棧 ?
這個(gè)就沒什么好說的,因人而異,不要吹自己并不熟悉的技術(shù),免得被深入問的時(shí)候答不上來

如何看待前端框架選型 ?
我比較熟悉vue和react 就主要提到了這兩款框架各自的優(yōu)點(diǎn)和缺點(diǎn)以及性能對(duì)比, 以及上手難度, 社區(qū)生態(tài), 團(tuán)隊(duì)成員組成, 招聘難度啊 blabla...

vue的如何實(shí)現(xiàn)雙向綁定的 ?
Object.defineProperty() 這個(gè)方法來追蹤依賴并來完成UI的更新

react virsualDOM 是什么? 如何實(shí)現(xiàn)? 說一下diff算法 ?
vm網(wǎng)上資料很多, 實(shí)現(xiàn)其實(shí)也只是解析JSX -> AST語(yǔ)法樹, diff算法主要是說了react如何將O(n3)的算法降低到O(n)級(jí)別的

工作中最出色的點(diǎn), 和你最頭疼的問題 如何解決的 ?
還好提前準(zhǔn)備到了, 現(xiàn)場(chǎng)想肯定就黃了... (捂臉)

平時(shí)如何學(xué)習(xí), 最近接觸了解了哪些新的知識(shí) ?
什么github 各種論壇 書籍... 想到的都說了就成

結(jié)束之后,面試官不告訴我結(jié)果說讓我等通知, 然后掛了電話一分鐘后, 電話就來了...
約我第二天去辦公地點(diǎn)面試 ! (效率還挺高)...

一面的面試官很和藹,彬彬有禮, 讓我頓時(shí)放松了許多

簡(jiǎn)單自我介紹, 介紹一下你的項(xiàng)目, 技術(shù)棧 ?

react和vue的比較 ?

React Diff 算法 ?
和電話面試前三題基本一樣, 從你的回答中面試官來找問題, 可能我回答相似度高吧, 問題都相似

觀察者模式實(shí)現(xiàn) ?
設(shè)計(jì)模式其實(shí)看的不多, 只是說了一下大體的思路

http報(bào)文頭部有哪些字段? 有什么意義 ?
這個(gè)就很多了, cookie cache-control user-agent expires host refer 等等 挑你會(huì)的常用的說, 面試官也不會(huì)要求你都說全的

移動(dòng)端高清方案如何解決 ?
這里被卡住了, 沒有理解到是rem布局+幾倍圖+1px問題, 只提到了flexible.js,并且說了一下原理,現(xiàn)在回頭看,說的還是有問題... 還是有點(diǎn)久了,忘記了

webpack的原理, loader 和 plugin 是干什么的? 有自己手寫過么 ?
大致說了一下,webpack解析模塊, loader和plugin的作用, 沒有手寫過, 看過一部分代碼...

簡(jiǎn)述從網(wǎng)頁(yè)輸入url到網(wǎng)頁(yè)展示的過程發(fā)生了哪些事情 ?
說的還是比較粗, 不過重點(diǎn)DNS解析,三次握手,數(shù)據(jù)請(qǐng)求,瀏覽器如何解析DOM樹,css樹應(yīng)該都提到了, 還提到了瀏覽器的多進(jìn)程多線程架構(gòu),js線程和渲染線程互斥

細(xì)節(jié)問題: 我的項(xiàng)目中是一套代碼實(shí)現(xiàn)了PC h5兼容 ,組件耦合嚴(yán)重, 問有沒有什么好的解決方案 ?
只想到了把數(shù)據(jù)層抽象出來,但是其他的不知道該如何解決... 現(xiàn)在也不知道- . -

SSR 和 客戶端渲染有什么區(qū)別 , vue是如何實(shí)現(xiàn)綁定事件的 ?
簡(jiǎn)述服務(wù)端渲染大概經(jīng)歷了哪些過程, 最后生成HTML文件,并且有flag讓框架知道這是已經(jīng)由服務(wù)端渲染完畢, store中的數(shù)據(jù)一般會(huì)掛在在window.__inialState__下... vue綁定事件的實(shí)現(xiàn), 不太明白考官的意思, 簡(jiǎn)述了vue通過聲明的方式來書寫事件綁定代碼, 實(shí)現(xiàn)訂閱發(fā)布的模式, 對(duì)DOM原生事件做了一層封裝 云云... 也不知道說的對(duì)不對(duì)

簡(jiǎn)述公司node架構(gòu)中容災(zāi)的實(shí)現(xiàn) ?
因?yàn)槲姨岬搅诉@個(gè), 答的很模糊, 估計(jì)有不少漏洞... 實(shí)際上應(yīng)該是cdn slb node三層容災(zāi)

瀏覽器事件有哪些過程? 為什么一般在冒泡階段, 而不是在捕獲階段注冊(cè)監(jiān)聽? addEventListener 參數(shù)分別是什么 ?
第一個(gè)很簡(jiǎn)單, 捕獲,元素,冒泡 第二個(gè)當(dāng)時(shí)沒回答出來, 后來查到可能是IE8以下沒有捕獲階段, 還有可能是冒泡比較符合一般控制事件影響的一般習(xí)慣

面向?qū)ο笕绾螌?shí)現(xiàn)? 需要復(fù)用的變量 怎么處理 ?
ES5的構(gòu)造函數(shù)+prototype ES6的class 復(fù)用的變量放在構(gòu)造函數(shù)的原型上

移動(dòng)端300ms延時(shí)的原因? 如何處理?
移動(dòng)端雙擊的設(shè)置,導(dǎo)致會(huì)有300ms系統(tǒng)判斷的延時(shí). fastclick, 或者touchEnd來代替

主流框架的數(shù)據(jù)單向/雙向綁定實(shí)現(xiàn)原理 ?
vue defineProperty(), react setState() DOMdiff, 訂閱發(fā)布模式 展開來說一下就可以了

簡(jiǎn)述轉(zhuǎn)行經(jīng)歷, 如何學(xué)習(xí) ?
作者入坑之前,還做過兩年建筑設(shè)計(jì)... 所以大概訴說了下辛酸史 (捂臉)

你覺得自己在前端工作的最大的優(yōu)點(diǎn)是什么 拿實(shí)際工作的內(nèi)容舉例?
這里實(shí)際上很丟臉, 吹了一波, 結(jié)果被問細(xì)節(jié)的時(shí)候, 愣是想不起來實(shí)際工作例子... 結(jié)果面試官看我很尷尬 就換了個(gè)話題= . =

最后聊了一會(huì)兒,問了一下團(tuán)隊(duì)情況,換個(gè)人繼續(xù)二面

和一面前3問基本一致,簡(jiǎn)述項(xiàng)目,React vue區(qū)別 virsualDOM實(shí)現(xiàn)

DIFF算法為什么是O(n)復(fù)雜度而不是O(n^3)

http code碼? 200 302 304等等

移動(dòng)端rem布局如何實(shí)現(xiàn)? 簡(jiǎn)述原理?
這個(gè)網(wǎng)上有很多,簡(jiǎn)單說就是rem可以通過控制html的字體大小來統(tǒng)一作為標(biāo)桿,其他的rem寬度可以跟隨調(diào)整, 只需要將html根字體和移動(dòng)端寬度大小做關(guān)聯(lián)計(jì)算就可以

JSbridge原理, js和native是如何通信的?
問的比較深,我也是一知半解... 就說了一些schema和native方法注入webview來執(zhí)行代碼,ios使用iframe來通信

Rollup和webpack區(qū)別, treeshaking是什么? 為什么可以實(shí)現(xiàn)

TCP三次握手的過程, get post請(qǐng)求的區(qū)別 ?

靜態(tài)文件的瀏覽器緩存如何實(shí)現(xiàn)?
其實(shí)還是考察http相關(guān)的緩存只是,答出來cache-control expires Etag 304 瀏覽器如何識(shí)別相同文件等等就可以了

前端跨域方案
JSONP CORS document.domain nginx/nodejs代理 等等

http 請(qǐng)求包含哪些字段 分別是什么意思

js 有哪些數(shù)據(jù)類型 如何判斷? null 和 undefined區(qū)別 應(yīng)用場(chǎng)景?
基本類型和復(fù)雜類型, typeof instanceof Object.prototype.toString 第二個(gè)答出來, 平時(shí)工作中很少注意到

new String("a") 和 "a" 是一樣的么?
一個(gè)是字符串對(duì)象,一個(gè)是基本類型

移動(dòng)端如何實(shí)現(xiàn)下拉到底部 跟隨移動(dòng) 結(jié)束后回彈的動(dòng)畫?
了解iScroll的話,應(yīng)該不難

移動(dòng)端如何優(yōu)化首頁(yè)白屏?xí)r間過長(zhǎng) ?
雅虎軍規(guī),還有一些其他的移動(dòng)端優(yōu)化,還有離線包或者serviceworker之類的,還趁機(jī)問了下團(tuán)隊(duì)是采用哪種方案,也是離線包

ES6 generator函數(shù)簡(jiǎn)述

數(shù)組去重實(shí)現(xiàn)?
網(wǎng)上很多, 說了new Set([...array]) 循環(huán)遍歷indexOf 最快的對(duì)象鍵值對(duì)的方法

js浮點(diǎn)數(shù)運(yùn)算不精確 如何解決?
這個(gè)真不會(huì), 回來看了下才知道

工作中最得意和出色的點(diǎn), 頭疼的點(diǎn), 問題如何解決的

為何換工作?
哈哈, 回答--- 大廠夢(mèng)~

聊了下阿里的壓力,文化

這一面據(jù)說是p8大佬,面的時(shí)候并不知道,聊的時(shí)候挺晚的了,沒之前緊張,輕松了很多

公司的前端工程化實(shí)踐

轉(zhuǎn)行之后是如何自學(xué)前端的, 學(xué)習(xí)途徑 有沒有一些自己的代碼

DOM基礎(chǔ)知識(shí),添加元素,刪除元素等等...

DOM節(jié)點(diǎn)類型
這就屬于給自己挖坑, 提到了... 結(jié)果太久沒看了,忘了

正則表達(dá)式如何匹配一段url ?在正則表達(dá)式中有哪幾種作用?
正則平時(shí)寫的比較多,同事經(jīng)常會(huì)讓我?guī)兔懻齽t, 這個(gè)倒是沒啥問題

移動(dòng)端優(yōu)化方式? 離線包是如何實(shí)現(xiàn)的?

最后聊了一下項(xiàng)目,聊了一下目前公司

最后跟我說技術(shù)面試通過了(很爽快~), 后面會(huì)有HR來面我...

后面就是很緊張的通過了HR面試, 定級(jí)P6
目前還在最后的流程中, 還在等待offer, 祝我一切順利吧! ^ - ^