一般阿里社招都是招3-5年的P6+高級(jí)工程師曲伊，當(dāng)初自己一年經(jīng)驗(yàn)也沒(méi)有想過(guò)有這個(gè)面試機(jī)會(huì)织阅。
雖然沒(méi)想著換工作，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息绎签，某一天枯饿，在某boss上有個(gè)人找我，叫我發(fā)一下簡(jiǎn)歷诡必，我一看是阿里的某技術(shù)專家奢方，雖然之前也有阿里的在某boss上給我要簡(jiǎn)歷，但是我深知自己經(jīng)驗(yàn)不足爸舒，然后給boss說(shuō)我是16屆的蟋字，只有一年經(jīng)驗(yàn)，然后就沒(méi)有然后了扭勉。這次我依然這么回復(fù)鹊奖，但是這boss說(shuō)，沒(méi)關(guān)系涂炎，他喜歡基礎(chǔ)好的忠聚，讓我可以試一試，于是我也抱著試一試的心態(tài)發(fā)了簡(jiǎn)歷璧尸。
簡(jiǎn)歷發(fā)過(guò)去之后咒林，boss就給我打了電話，讓我簡(jiǎn)單的介紹一下自己爷光，我就噼里啪啦說(shuō)了一些垫竞，還說(shuō)了一些題外話。然后boss就開(kāi)始問(wèn)我問(wèn)題蛀序。
由于面了四輪欢瞪，所以最開(kāi)始的面試記憶有點(diǎn)模糊了，細(xì)細(xì)回想徐裸，又感覺(jué)記憶猶新遣鼓。
電話初探
- 說(shuō)一下你了解CSS盒模型。
我就說(shuō)了一下IE的怪異盒模型和標(biāo)注瀏覽器的盒模型重贺，然后可以通過(guò)box-sizing屬性控制兩種盒模型的變換骑祟。 - 說(shuō)一下box-sizing的應(yīng)用場(chǎng)景。
這個(gè)也不難气笙，簡(jiǎn)單說(shuō)了一兩個(gè)應(yīng)用場(chǎng)景次企，具體就不一一細(xì)說(shuō)了。 - 說(shuō)一下你了解的彈性FLEX布局.
這個(gè)我也比較了解潜圃，各種概念和屬性能想到的說(shuō)了一大堆缸棵，也扯到了Grid布局，基本這個(gè)也沒(méi)啥問(wèn)題谭期。 - 說(shuō)一下一個(gè)未知寬高元素怎么上下左右垂直居中堵第。
說(shuō)了一下flex彈性布局的實(shí)現(xiàn)吧凉，說(shuō)了一下兼容性，扯到了postcss的一些東西踏志，然后說(shuō)了一下常規(guī)的兼容性比較好的實(shí)現(xiàn)阀捅。 - 說(shuō)一下原型鏈，對(duì)象狰贯，構(gòu)造函數(shù)之間的一些聯(lián)系也搓。
這個(gè)我之前寫(xiě)過(guò)相關(guān)的文章，自己也有比較深入的理解涵紊，所以這個(gè)也不在話下傍妒，噼里啪啦說(shuō)了一大堆，也不知道面試官聽(tīng)得咋樣摸柄。 - DOM事件的綁定的幾種方式
說(shuō)了三種颤练，然后說(shuō)了一些冒泡，默認(rèn)事件驱负，以及DOM2嗦玖，DOM3級(jí)的一些標(biāo)準(zhǔn)。 - 說(shuō)一下你項(xiàng)目中用到的技術(shù)棧跃脊，以及覺(jué)得得意和出色的點(diǎn)宇挫，以及讓你頭疼的點(diǎn)，怎么解決的酪术。
這個(gè)因人而異器瘪，開(kāi)放性問(wèn)題，主要考察平時(shí)項(xiàng)目的一些積累吧绘雁，這個(gè)我回答感覺(jué)也比較ok橡疼。 - 有沒(méi)有了解http2.0,websocket,https，說(shuō)一下你的理解以及你所了解的特性庐舟。
這個(gè)我看過(guò)一些文章欣除，但是沒(méi)有什么印象，扯了一些概念挪略，但是回答的不是很深历帚。
第一輪電話初探，大約面了50分鐘杠娱，就記起來(lái)這么多挽牢，還有一些細(xì)節(jié)問(wèn)題可能淡忘了，總體來(lái)說(shuō)墨辛，面的都是以基礎(chǔ)為主卓研，然后boss說(shuō)把我簡(jiǎn)歷推薦給內(nèi)部趴俘，進(jìn)行正式的社招流程睹簇。
一輪技術(shù)面
然后當(dāng)天晚上一個(gè)女的面試官就給我打電話了奏赘，說(shuō)八點(diǎn)半進(jìn)行下一輪技術(shù)面試，沒(méi)想到效率這么快太惠，我都沒(méi)怎么準(zhǔn)備磨淌。這次就直接省略自我介紹了。
- webpack的入口文件怎么配置凿渊，多個(gè)入口怎么分割啥的梁只，我也沒(méi)太聽(tīng)清楚。
這個(gè)自己就說(shuō)了一下自己的理解埃脏，以及自己用node寫(xiě)的多入口怎么配置搪锣，然后面試官說(shuō)不是多入口配置，然后我又說(shuō)了一下自己的理解彩掐，然后這題就過(guò)了构舟。 - 我看到你的項(xiàng)目用到了Babel的一個(gè)插件：transform-runtime以及stage-2，你說(shuō)一下他們的作用堵幽。
這個(gè)我也還算比較了解狗超，就說(shuō)了一下ES的一些API，比如generator啥的默認(rèn)不轉(zhuǎn)換朴下，只轉(zhuǎn)換語(yǔ)法努咐，需要這個(gè)來(lái)轉(zhuǎn)換，然后說(shuō)profill啥的殴胧，扯了一下stage-1渗稍，stage-2，stage-3溃肪，這個(gè)問(wèn)題回答還算清楚免胃。 - 我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin這個(gè)插件，有沒(méi)有覺(jué)得壓縮速度很慢惫撰，有什么辦法提升速度羔沙。
這個(gè)我主要回答了一下，我之前也沒(méi)怎么了解厨钻，一個(gè)想到是緩存原理扼雏，壓縮只重新壓縮改變的，還有就是減少冗余的代碼夯膀，壓縮只用于生產(chǎn)階段诗充，然后面試官問(wèn)還有呢？我就說(shuō)诱建，還可以從硬件上提升蝴蜓，可以得到質(zhì)的飛躍，比如換臺(tái)I9處理器的電腦。茎匠。格仲。。 - 簡(jiǎn)歷上看見(jiàn)你了解http協(xié)議诵冒。說(shuō)一下200和304的理解和區(qū)別
這個(gè)噼里啪啦說(shuō)了一堆凯肋，協(xié)商緩存和強(qiáng)制緩存的區(qū)別，流程汽馋，還有一些細(xì)節(jié)侮东，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特征，這一塊之前有過(guò)比較詳細(xì)的了解豹芯，所以還是應(yīng)答如流悄雅。 - DOM事件中target和currentTarget的區(qū)別
這個(gè)沒(méi)答上來(lái)。铁蹈。煤伟。 - 說(shuō)一下你平時(shí)怎么解決跨域的。以及后續(xù)JSONP的原理和實(shí)現(xiàn)以及cors怎么設(shè)置木缝。
我就說(shuō)了一下Jason和cors,然后問(wèn)我JSONP的原理以及cors怎么設(shè)置便锨，這一塊自己也實(shí)踐過(guò)，所以還是對(duì)答如流的我碟。 - 說(shuō)一下深拷貝的實(shí)現(xiàn)原理放案。
這個(gè)也還好，就是考慮的細(xì)節(jié)不是很周全矫俺，先是說(shuō)了一種JSON.stringify和JSON.parse的實(shí)現(xiàn)吱殉，以及這種實(shí)現(xiàn)的缺點(diǎn)，主要就是非標(biāo)準(zhǔn)JSOn格式無(wú)法拷貝以及兼容性問(wèn)題厘托，然后問(wèn)了我有么有用過(guò)IE8的一個(gè)什么JSON框架友雳，我也不記得是什么了，因?yàn)槲覊焊鶝](méi)聽(tīng)過(guò)铅匹，然后說(shuō)了一下尾遞歸實(shí)現(xiàn)深拷貝的原理押赊，還問(wèn)了我typeof null是啥，這個(gè)當(dāng)然是Object包斑。流礁。。 - 說(shuō)一下項(xiàng)目中覺(jué)得可以改進(jìn)的地方以及做的很優(yōu)秀的地方罗丰？
這個(gè)也是因人而異神帅，開(kāi)放性問(wèn)題，大致扯了一下自己的經(jīng)歷萌抵，也還OK找御。
最后問(wèn)了有什么需要問(wèn)的地方元镀，面試到這里基本就結(jié)束了，大約面了一個(gè)多鐘頭霎桅，還是蠻累的凹联。總體來(lái)說(shuō)哆档，回答的廣度和深度以及細(xì)節(jié)都還算OK，覺(jué)得這輪面試基本沒(méi)什么懸念住闯。
二輪技術(shù)面
過(guò)了幾天瓜浸，接到阿里另一個(gè)面試官的電話，上一輪面試通過(guò)了比原，這次是二輪技術(shù)面插佛，說(shuō)估計(jì)一個(gè)鐘頭。這次依然跳過(guò)自我介紹之類的量窘，直奔主題雇寇。
- 有沒(méi)有自己寫(xiě)過(guò)webpack的loader,他的原理以及啥的，記得也不太清楚蚌铜。
這個(gè)我就說(shuō)了一下锨侯，然后loader配置啥的，也還ok冬殃。 - 有沒(méi)有去研究webpack的一些原理和機(jī)制囚痴，怎么實(shí)現(xiàn)的。
這個(gè)我簡(jiǎn)單說(shuō)了一下我自己了解的审葬，因?yàn)檫@一塊我也沒(méi)深入去研究深滚，所以說(shuō)的應(yīng)該比較淺。 - babel把ES6轉(zhuǎn)成ES5或者ES3之類的原理是什么涣觉，有沒(méi)有去研究痴荐。
這一塊我說(shuō)了一下自己的思路，大致也還OK官册，我也沒(méi)去深入研究怎么轉(zhuǎn)換的生兆，之前好像看過(guò)類似的文章，自己也只觀察過(guò)轉(zhuǎn)換之后的代碼是啥樣的膝宁，至于怎么轉(zhuǎn)換的規(guī)則皂贩，真的沒(méi)去深入觀察。 - git大型項(xiàng)目的團(tuán)隊(duì)合作昆汹，以及持續(xù)集成啥的明刷。
這里我就說(shuō)了一下自己了解的git flow方面的東西，因?yàn)闆](méi)有實(shí)戰(zhàn)經(jīng)驗(yàn)满粗，所以我就選擇性說(shuō)明了這一塊的不熟練辈末，然后面試官也沒(méi)細(xì)問(wèn)。 - 什么是函數(shù)柯里化？以及說(shuō)一下JS的API有哪些應(yīng)用到了函數(shù)柯里化的實(shí)現(xiàn)挤聘？
這個(gè)我就說(shuō)了一下函數(shù)柯里化一些了解轰枝，以及在函數(shù)式編程的應(yīng)用，最后說(shuō)了一下JS中bind函數(shù)和數(shù)組的reduce方法用到了函數(shù)柯里化组去。 - ES6的箭頭函數(shù)this問(wèn)題鞍陨，以及拓展運(yùn)算符。
這一塊主要是API和概念的問(wèn)題从隆，扯了一些規(guī)范以及嚴(yán)格模式下其他情況this只想問(wèn)題诚撵。 - JS模塊化Commonjs,UMD,CMD規(guī)范的了解，以及ES6的模塊化跟其他幾種的區(qū)別键闺，以及出現(xiàn)的意義寿烟。
這個(gè)也是說(shuō)了一下自己的理解和認(rèn)知，自己對(duì)模塊化歷史以及一些規(guī)范都有所涉獵辛燥，這一塊也還湊合筛武。 - 說(shuō)一下Vue實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理，以及vue.js和react.js異同點(diǎn)挎塌，如果讓你選框架徘六，你怎么怎么權(quán)衡這兩個(gè)框架，分析一下榴都。
主要是發(fā)布訂閱的設(shè)計(jì)模式硕噩，還有就是ES5的Object.defineProperty的getter和setter機(jī)制，然后順便扯了一下Angular的臟檢測(cè)缭贡，以及alvon.js最先用到這種方式炉擅。然后扯了一下vue.js和react.js異同點(diǎn)，權(quán)衡框架選擇阳惹，調(diào)研分析之類谍失，噼里啪啦說(shuō)了一大堆。 - 我看你也寫(xiě)博客莹汤，說(shuō)一下草稿的交互細(xì)節(jié)以及實(shí)現(xiàn)原理快鱼。
這一款就按照自己用過(guò)簡(jiǎn)書(shū)或者掘金，SG這類草稿的體驗(yàn)纲岭，詳細(xì)說(shuō)了一下抹竹，這個(gè)開(kāi)放性問(wèn)題，說(shuō)到點(diǎn)基本就OK止潮。我們每天晚上八點(diǎn)在騰訊課堂都有前端的免費(fèi)課程窃判， 你要來(lái)聽(tīng)課學(xué)習(xí)一下嗎？有沒(méi)有興趣呢喇闸？
最后面試官問(wèn)我有什么想問(wèn)的嗎袄琳，面試到這里基本就結(jié)束了询件，差不多面了一個(gè)小時(shí)，說(shuō)過(guò)幾天就會(huì)給答復(fù)唆樊，如果過(guò)了就會(huì)去阿里園區(qū)進(jìn)行下一輪的技術(shù)面宛琅。
三輪技術(shù)面
上一輪發(fā)揮感覺(jué)沒(méi)前兩輪發(fā)揮好，所以還是有點(diǎn)不自信的逗旁，沒(méi)想到第三天后嘿辟，就來(lái)電話了，通知我去阿里園區(qū)面試片效。
因?yàn)榘⒗镂飨獔@區(qū)距離我不到十公里红伦，我就踩著共享單車一點(diǎn)鐘就出發(fā)了，天氣比較熱堤舒，飄在路上，百感交集哺呜，身邊一輛法拉利轟鳴而過(guò)舌缤，又一輛蘭博基尼呼嘯而過(guò)，我心里一萬(wàn)頭草泥馬奔騰某残，MLGB国撵，心里暗想，為神馬開(kāi)這車的人不是此刻看文章的你玻墅？
走到半路了介牙，面試官給我打電話了，說(shuō)我怎么還沒(méi)到澳厢，說(shuō)約定的是兩點(diǎn)鐘环础，我一下子就懵逼了，短信只有一個(gè)游客訪問(wèn)ID剩拢，并沒(méi)有通知我具體時(shí)間线得，反正不管誰(shuí)的疏忽，我肯定是要遲到了徐伐，于是我快馬加鞭贯钩，踩著賊難騎的共享單車，背著微風(fēng)办素，一路狂奔角雷，到阿里園區(qū)已是汗流浹背，油光滿面性穿，氣喘乎乎勺三。。需曾。
面試遲到了檩咱，印象肯定不好揭措，加上滿頭大汗的形象也不太好，加上自己饑渴難耐刻蚯，這面是估計(jì)要GG了绊含，一進(jìn)來(lái)就直奔主題，這次是兩個(gè)大Boss面試我炊汹。
第一個(gè)面試官
- 先自我介紹一下躬充，說(shuō)一下項(xiàng)目的技術(shù)棧，以及項(xiàng)目中遇到的一些問(wèn)題啥的讨便。
這個(gè)問(wèn)題就是個(gè)開(kāi)場(chǎng)白充甚，簡(jiǎn)要說(shuō)明一下，問(wèn)題都不大霸褒，這個(gè)面試官就是第一次打電話給我面試的那個(gè)boss伴找，所以技術(shù)那塊boss心里也有個(gè)底細(xì)，所以沒(méi)再問(wèn)技術(shù)問(wèn)題废菱。 - 一個(gè)業(yè)務(wù)場(chǎng)景技矮，面對(duì)產(chǎn)品不斷迭代，以及需求的變動(dòng)該怎么應(yīng)對(duì)殊轴，具體技術(shù)方案實(shí)現(xiàn)衰倦。
具體業(yè)務(wù)場(chǎng)景，我就不一一描述旁理，Boss在白板上畫(huà)了一個(gè)大致的模塊圖樊零，然后做了一些需求描述。然后需求一層一層的改變孽文，然后往下挖驻襟，主要是考察應(yīng)對(duì)產(chǎn)品能力，以及對(duì)代碼的可維護(hù)性和可拓展性這些考察芋哭，開(kāi)放性問(wèn)題塑悼，我覺(jué)得還考察一些溝通交流方面的能力，因?yàn)橛行┑胤矫嬖嚬俟室庹f(shuō)得很含糊楷掉，反正就是一個(gè)綜合能力厢蒜，以及對(duì)產(chǎn)品的理解，中間談到怎么實(shí)現(xiàn)烹植，也問(wèn)到了一些具體的點(diǎn)斑鸦，記得問(wèn)到的有一下幾個(gè)。
① 怎么獲取一個(gè)元素到視圖頂部的距離草雕。
② getBoundingClientRect獲取的top和offsetTop獲取的top區(qū)別
③事件委托
第二個(gè)面試官
- 業(yè)務(wù)場(chǎng)景：比如說(shuō)百度的一個(gè)服務(wù)不想讓阿里使用巷屿，如果識(shí)別到是阿里的請(qǐng)求，然后跳轉(zhuǎn)到404或者拒絕服務(wù)之類的墩虹？
主要是考察http協(xié)議頭Referer嘱巾，然后怎么判斷是阿里的ip或者啥的憨琳，我也不太清楚。 - 二分查找的時(shí)間復(fù)雜度怎么求旬昭，是多少
篙螟。。问拘。排序的還算清楚一點(diǎn)遍略，查找真的不知所措，沒(méi)回答上來(lái)骤坐，也沒(méi)猜绪杏，意義不大，不會(huì)就是不會(huì)纽绍。 - XSS是什么蕾久，攻擊原理，怎么預(yù)防拌夏。
這個(gè)很簡(jiǎn)單僧著，跨站腳本攻擊XSS(cross site scripting)，攻擊類型主要有兩種：反射型和存儲(chǔ)型辖佣，簡(jiǎn)單說(shuō)了一下如何防御：
①轉(zhuǎn)義
②DOM解析白名單
③第三方庫(kù)
④CSP
自己對(duì)web安全這塊系統(tǒng)學(xué)習(xí)過(guò)霹抛，前前后后大約了解了很多搓逾，對(duì)于XSS,CSRF,點(diǎn)擊劫持卷谈，Cookie安全，HTTP竊聽(tīng)篡改霞篡，密碼安全世蔗，SQL注入，社會(huì)工程學(xué)都有一定了解朗兵，所以這個(gè)自然也不在話下污淋。
線性順序存儲(chǔ)結(jié)構(gòu)和鏈?zhǔn)酱鎯?chǔ)結(jié)構(gòu)有什么區(qū)別？以及優(yōu)缺點(diǎn)余掖。
我是類比JS數(shù)組和對(duì)象來(lái)回答的寸爆，反正還算湊合吧，自己都數(shù)據(jù)結(jié)構(gòu)這塊多少還是有些印象盐欺，所以入了前端赁豆，對(duì)數(shù)據(jù)結(jié)構(gòu)和算法確實(shí)一直淡忘了。分析一下移動(dòng)端日歷冗美，PC端日歷以及桌面日歷的一些不同和需要注意的地方魔种。
這個(gè)我能想到的大致都說(shuō)了一遍，不同的場(chǎng)景交互和細(xì)節(jié)以及功能都有所偏差粉洼，以及功能的側(cè)重都可能不同节预。白板寫(xiě)代碼叶摄，用最簡(jiǎn)潔的代碼實(shí)現(xiàn)數(shù)組去重。
我寫(xiě)了兩種實(shí)現(xiàn)方式：ES6實(shí)現(xiàn)：
[...new Set([1,2,3,1,'a',1,'a'])]
ES5實(shí)現(xiàn)：
[1,2,3,1,'a',1,'a'].filter(function(ele,index,array){ return index===array.indexOf(ele)})怎么實(shí)現(xiàn)草稿安拟，多終端同步蛤吓，以及沖突問(wèn)題？
這個(gè)回答的不算好去扣，本來(lái)也想到類比git的處理方式柱衔，但是說(shuō)的時(shí)候往另外一個(gè)方面說(shuō)了，導(dǎo)致與面試官想要的結(jié)果不一樣愉棱。
最后說(shuō)目前的工作經(jīng)驗(yàn)達(dá)不到P6水平唆铐，業(yè)務(wù)類稍弱，阿里現(xiàn)在社招只要P6的高級(jí)工程師奔滑，但是可以以第二梯隊(duì)進(jìn)去艾岂，就是以第三方簽署就業(yè)協(xié)議，一年后可以轉(zhuǎn)正朋其，就是俗稱的外包王浴。多少還是有點(diǎn)遺憾，面了四輪面了個(gè)外包梅猿，最后放棄這份工作了氓辣。
最后，感謝boss一直以來(lái)的關(guān)照和器重袱蚓。
我有一個(gè)前端學(xué)習(xí)交流QQ群：328058344 如果你在學(xué)習(xí)前端的過(guò)程中遇到什么問(wèn)題钞啸，歡迎來(lái)我的QQ群提問(wèn)，群里每天還會(huì)更新一些學(xué)習(xí)資源喇潘。禁止閑聊体斩，非喜勿進(jìn)。
