一般阿里社招都是招3-5年的P6+高級(jí)工程師缩滨，當(dāng)初自己一年經(jīng)驗(yàn)也沒有想過有這個(gè)面試機(jī)會(huì)持搜。
雖然沒想著換工作密似，但是經(jīng)常關(guān)注一些招聘網(wǎng)站的信息，某一天葫盼，在某boss上有個(gè)人找我残腌，叫我發(fā)一下簡歷，我一看是阿里的某技術(shù)專家贫导，雖然之前也有阿里的在某boss上給我要簡歷抛猫，但是我深知自己經(jīng)驗(yàn)不足，然后給boss說我是16屆的孩灯，只有一年經(jīng)驗(yàn)闺金，然后就沒有然后了。這次我依然這么回復(fù)峰档，但是這boss說败匹，沒關(guān)系寨昙，他喜歡基礎(chǔ)好的，讓我可以試一試掀亩，于是我也抱著試一試的心態(tài)發(fā)了簡歷舔哪。
簡歷發(fā)過去之后，boss就給我打了電話槽棍，讓我簡單的介紹一下自己捉蚤，我就噼里啪啦說了一些，還說了一些題外話炼七。然后boss就開始問我問題缆巧。
由于面了四輪，所以最開始的面試記憶有點(diǎn)模糊了豌拙，細(xì)細(xì)回想陕悬，又感覺記憶猶新。
電話初探
- 說一下你了解CSS盒模型按傅。
我就說了一下IE的怪異盒模型和標(biāo)注瀏覽器的盒模型墩莫，然后可以通過box-sizing屬性控制兩種盒模型的變換。 - 說一下box-sizing的應(yīng)用場(chǎng)景逞敷。
這個(gè)也不難狂秦，簡單說了一兩個(gè)應(yīng)用場(chǎng)景，具體就不一一細(xì)說了推捐。 - 說一下你了解的彈性FLEX布局.
這個(gè)我也比較了解裂问，各種概念和屬性能想到的說了一大堆，也扯到了Grid布局牛柒，基本這個(gè)也沒啥問題堪簿。 - 說一下一個(gè)未知寬高元素怎么上下左右垂直居中。
說了一下flex彈性布局的實(shí)現(xiàn)皮壁，說了一下兼容性椭更，扯到了postcss的一些東西，然后說了一下常規(guī)的兼容性比較好的實(shí)現(xiàn)蛾魄。 - 說一下原型鏈虑瀑，對(duì)象，構(gòu)造函數(shù)之間的一些聯(lián)系滴须。
這個(gè)我之前寫過相關(guān)的文章舌狗，自己也有比較深入的理解，所以這個(gè)也不在話下扔水，噼里啪啦說了一大堆痛侍，也不知道面試官聽得咋樣。 - DOM事件的綁定的幾種方式
說了三種魔市，然后說了一些冒泡主届，默認(rèn)事件赵哲，以及DOM2，DOM3級(jí)的一些標(biāo)準(zhǔn)君丁。 - 說一下你項(xiàng)目中用到的技術(shù)棧誓竿，以及覺得得意和出色的點(diǎn)，以及讓你頭疼的點(diǎn)谈截，怎么解決的。
這個(gè)因人而異涧偷，開放性問題簸喂，主要考察平時(shí)項(xiàng)目的一些積累吧，這個(gè)我回答感覺也比較ok燎潮。 - 有沒有了解http2.0,websocket,https喻鳄，說一下你的理解以及你所了解的特性。
這個(gè)我看過一些文章确封，但是沒有什么印象除呵，扯了一些概念，但是回答的不是很深爪喘。
第一輪電話初探颜曾，大約面了50分鐘，就記起來這么多秉剑，還有一些細(xì)節(jié)問題可能淡忘了泛豪，總體來說，面的都是以基礎(chǔ)為主侦鹏，然后boss說把我簡歷推薦給內(nèi)部诡曙，進(jìn)行正式的社招流程。
一輪技術(shù)面
然后當(dāng)天晚上一個(gè)女的面試官就給我打電話了略水，說八點(diǎn)半進(jìn)行下一輪技術(shù)面試价卤，沒想到效率這么快，我都沒怎么準(zhǔn)備渊涝。這次就直接省略自我介紹了慎璧。
- webpack的入口文件怎么配置，多個(gè)入口怎么分割啥的跨释，我也沒太聽清楚炸卑。
這個(gè)自己就說了一下自己的理解，以及自己用node寫的多入口怎么配置煤傍，然后面試官說不是多入口配置盖文，然后我又說了一下自己的理解，然后這題就過了蚯姆。 - 我看到你的項(xiàng)目用到了Babel的一個(gè)插件：transform-runtime以及stage-2五续，你說一下他們的作用洒敏。
這個(gè)我也還算比較了解，就說了一下ES的一些API疙驾，比如generator啥的默認(rèn)不轉(zhuǎn)換凶伙，只轉(zhuǎn)換語法，需要這個(gè)來轉(zhuǎn)換它碎，然后說profill啥的函荣，扯了一下stage-1，stage-2扳肛，stage-3傻挂，這個(gè)問題回答還算清楚。 - 我看到你的webpack配置用到webpack.optimize.UglifyJsPlugin這個(gè)插件挖息，有沒有覺得壓縮速度很慢金拒，有什么辦法提升速度。
這個(gè)我主要回答了一下套腹，我之前也沒怎么了解绪抛，一個(gè)想到是緩存原理，壓縮只重新壓縮改變的电禀，還有就是減少冗余的代碼幢码，壓縮只用于生產(chǎn)階段，然后面試官問還有呢尖飞？我就說蛤育，還可以從硬件上提升，可以得到質(zhì)的飛躍葫松，比如換臺(tái)I9處理器的電腦瓦糕。。腋么。咕娄。 - 簡歷上看見你了解http協(xié)議。說一下200和304的理解和區(qū)別
這個(gè)噼里啪啦說了一堆珊擂，協(xié)商緩存和強(qiáng)制緩存的區(qū)別圣勒，流程，還有一些細(xì)節(jié)摧扇，提到了expires,Cache-Control,If-none-match,Etag,last-Modified的匹配和特征圣贸，這一塊之前有過比較詳細(xì)的了解，所以還是應(yīng)答如流扛稽。 - DOM事件中target和currentTarget的區(qū)別
這個(gè)沒答上來吁峻。。。 - 說一下你平時(shí)怎么解決跨域的用含。以及后續(xù)JSONP的原理和實(shí)現(xiàn)以及cors怎么設(shè)置矮慕。
我就說了一下Jason和cors,然后問我JSONP的原理以及cors怎么設(shè)置，這一塊自己也實(shí)踐過啄骇，所以還是對(duì)答如流的痴鳄。 - 說一下深拷貝的實(shí)現(xiàn)原理。
這個(gè)也還好缸夹，就是考慮的細(xì)節(jié)不是很周全痪寻，先是說了一種JSON.stringify和JSON.parse的實(shí)現(xiàn)，以及這種實(shí)現(xiàn)的缺點(diǎn)虽惭，主要就是非標(biāo)準(zhǔn)JSOn格式無法拷貝以及兼容性問題橡类，然后問了我有么有用過IE8的一個(gè)什么JSON框架，我也不記得是什么了趟妥，因?yàn)槲覊焊鶝]聽過，然后說了一下尾遞歸實(shí)現(xiàn)深拷貝的原理佣蓉，還問了我typeof null是啥披摄，這個(gè)當(dāng)然是Object。勇凭。疚膊。 - 說一下項(xiàng)目中覺得可以改進(jìn)的地方以及做的很優(yōu)秀的地方？
這個(gè)也是因人而異虾标，開放性問題寓盗，大致扯了一下自己的經(jīng)歷，也還OK璧函。
最后問了有什么需要問的地方傀蚌，面試到這里基本就結(jié)束了，大約面了一個(gè)多鐘頭蘸吓，還是蠻累的善炫。總體來說库继，回答的廣度和深度以及細(xì)節(jié)都還算OK箩艺，覺得這輪面試基本沒什么懸念。
二輪技術(shù)面
過了幾天宪萄，接到阿里另一個(gè)面試官的電話艺谆，上一輪面試通過了，這次是二輪技術(shù)面拜英，說估計(jì)一個(gè)鐘頭静汤。這次依然跳過自我介紹之類的，直奔主題。
- 有沒有自己寫過webpack的loader,他的原理以及啥的撒妈，記得也不太清楚恢暖。
這個(gè)我就說了一下，然后loader配置啥的狰右，也還ok杰捂。 - 有沒有去研究webpack的一些原理和機(jī)制，怎么實(shí)現(xiàn)的棋蚌。
這個(gè)我簡單說了一下我自己了解的嫁佳，因?yàn)檫@一塊我也沒深入去研究，所以說的應(yīng)該比較淺谷暮。 - babel把ES6轉(zhuǎn)成ES5或者ES3之類的原理是什么蒿往，有沒有去研究。
這一塊我說了一下自己的思路湿弦，大致也還OK瓤漏，我也沒去深入研究怎么轉(zhuǎn)換的，之前好像看過類似的文章颊埃，自己也只觀察過轉(zhuǎn)換之后的代碼是啥樣的蔬充，至于怎么轉(zhuǎn)換的規(guī)則，真的沒去深入觀察班利。 - git大型項(xiàng)目的團(tuán)隊(duì)合作饥漫，以及持續(xù)集成啥的。
這里我就說了一下自己了解的git flow方面的東西罗标，因?yàn)闆]有實(shí)戰(zhàn)經(jīng)驗(yàn)庸队，所以我就選擇性說明了這一塊的不熟練，然后面試官也沒細(xì)問闯割。 - 什么是函數(shù)柯里化彻消？以及說一下JS的API有哪些應(yīng)用到了函數(shù)柯里化的實(shí)現(xiàn)？
這個(gè)我就說了一下函數(shù)柯里化一些了解宙拉，以及在函數(shù)式編程的應(yīng)用证膨，最后說了一下JS中bind函數(shù)和數(shù)組的reduce方法用到了函數(shù)柯里化。 - ES6的箭頭函數(shù)this問題鼓黔，以及拓展運(yùn)算符央勒。
這一塊主要是API和概念的問題，扯了一些規(guī)范以及嚴(yán)格模式下其他情況this只想問題澳化。 - JS模塊化Commonjs,UMD,CMD規(guī)范的了解崔步，以及ES6的模塊化跟其他幾種的區(qū)別，以及出現(xiàn)的意義缎谷。
這個(gè)也是說了一下自己的理解和認(rèn)知井濒，自己對(duì)模塊化歷史以及一些規(guī)范都有所涉獵灶似，這一塊也還湊合。 - 說一下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)研分析之類，噼里啪啦說了一大堆宰缤。 - 我看你也寫博客颂翼，說一下草稿的交互細(xì)節(jié)以及實(shí)現(xiàn)原理。
這一款就按照自己用過簡書或者掘金慨灭，SG這類草稿的體驗(yàn)朦乏，詳細(xì)說了一下，這個(gè)開放性問題缘挑，說到點(diǎn)基本就OK集歇。我們每天晚上八點(diǎn)在騰訊課堂都有前端的免費(fèi)課程桶略， 你要來聽課學(xué)習(xí)一下嗎语淘？有沒有興趣呢？
最后面試官問我有什么想問的嗎际歼，面試到這里基本就結(jié)束了惶翻，差不多面了一個(gè)小時(shí)，說過幾天就會(huì)給答復(fù)鹅心，如果過了就會(huì)去阿里園區(qū)進(jìn)行下一輪的技術(shù)面吕粗。
三輪技術(shù)面
上一輪發(fā)揮感覺沒前兩輪發(fā)揮好，所以還是有點(diǎn)不自信的旭愧，沒想到第三天后颅筋，就來電話了，通知我去阿里園區(qū)面試输枯。
因?yàn)榘⒗镂飨獔@區(qū)距離我不到十公里议泵，我就踩著共享單車一點(diǎn)鐘就出發(fā)了，天氣比較熱桃熄，飄在路上先口，百感交集，身邊一輛法拉利轟鳴而過，又一輛蘭博基尼呼嘯而過碉京，我心里一萬頭草泥馬奔騰厢汹，MLGB，心里暗想谐宙，為神馬開這車的人不是此刻看文章的你烫葬？
走到半路了，面試官給我打電話了卧惜，說我怎么還沒到厘灼，說約定的是兩點(diǎn)鐘，我一下子就懵逼了咽瓷，短信只有一個(gè)游客訪問ID设凹，并沒有通知我具體時(shí)間，反正不管誰的疏忽茅姜，我肯定是要遲到了闪朱，于是我快馬加鞭，踩著賊難騎的共享單車钻洒，背著微風(fēng)奋姿，一路狂奔，到阿里園區(qū)已是汗流浹背素标，油光滿面称诗，氣喘乎乎。头遭。寓免。
面試遲到了，印象肯定不好计维，加上滿頭大汗的形象也不太好袜香，加上自己饑渴難耐，這面是估計(jì)要GG了鲫惶，一進(jìn)來就直奔主題蜈首，這次是兩個(gè)大Boss面試我。
第一個(gè)面試官
- 先自我介紹一下欠母，說一下項(xiàng)目的技術(shù)棧欢策，以及項(xiàng)目中遇到的一些問題啥的。
這個(gè)問題就是個(gè)開場(chǎng)白赏淌，簡要說明一下踩寇，問題都不大，這個(gè)面試官就是第一次打電話給我面試的那個(gè)boss猜敢，所以技術(shù)那塊boss心里也有個(gè)底細(xì)姑荷，所以沒再問技術(shù)問題盒延。 - 一個(gè)業(yè)務(wù)場(chǎng)景，面對(duì)產(chǎn)品不斷迭代鼠冕，以及需求的變動(dòng)該怎么應(yīng)對(duì)添寺，具體技術(shù)方案實(shí)現(xiàn)。
具體業(yè)務(wù)場(chǎng)景懈费，我就不一一描述计露，Boss在白板上畫了一個(gè)大致的模塊圖，然后做了一些需求描述憎乙。然后需求一層一層的改變票罐，然后往下挖，主要是考察應(yīng)對(duì)產(chǎn)品能力泞边，以及對(duì)代碼的可維護(hù)性和可拓展性這些考察该押，開放性問題，我覺得還考察一些溝通交流方面的能力阵谚，因?yàn)橛行┑胤矫嬖嚬俟室庹f得很含糊蚕礼，反正就是一個(gè)綜合能力，以及對(duì)產(chǎn)品的理解梢什，中間談到怎么實(shí)現(xiàn)奠蹬，也問到了一些具體的點(diǎn)，記得問到的有一下幾個(gè)嗡午。
① 怎么獲取一個(gè)元素到視圖頂部的距離囤躁。
② getBoundingClientRect獲取的top和offsetTop獲取的top區(qū)別
③事件委托
第二個(gè)面試官
- 業(yè)務(wù)場(chǎng)景：比如說百度的一個(gè)服務(wù)不想讓阿里使用，如果識(shí)別到是阿里的請(qǐng)求荔睹，然后跳轉(zhuǎn)到404或者拒絕服務(wù)之類的狸演？
主要是考察http協(xié)議頭Referer，然后怎么判斷是阿里的ip或者啥的应媚，我也不太清楚严沥。 - 二分查找的時(shí)間復(fù)雜度怎么求猜极，是多少
中姜。。跟伏。排序的還算清楚一點(diǎn)丢胚，查找真的不知所措，沒回答上來受扳，也沒猜携龟，意義不大，不會(huì)就是不會(huì)勘高。 - XSS是什么峡蟋，攻擊原理坟桅，怎么預(yù)防。
這個(gè)很簡單蕊蝗，跨站腳本攻擊XSS(cross site scripting)仅乓，攻擊類型主要有兩種：反射型和存儲(chǔ)型，簡單說了一下如何防御：
①轉(zhuǎn)義
②DOM解析白名單
③第三方庫
④CSP
自己對(duì)web安全這塊系統(tǒng)學(xué)習(xí)過蓬戚，前前后后大約了解了很多夸楣，對(duì)于XSS,CSRF,點(diǎn)擊劫持，Cookie安全子漩，HTTP竊聽篡改豫喧，密碼安全，SQL注入幢泼，社會(huì)工程學(xué)都有一定了解紧显，所以這個(gè)自然也不在話下。
線性順序存儲(chǔ)結(jié)構(gòu)和鏈?zhǔn)酱鎯?chǔ)結(jié)構(gòu)有什么區(qū)別缕棵？以及優(yōu)缺點(diǎn)鸟妙。
我是類比JS數(shù)組和對(duì)象來回答的，反正還算湊合吧挥吵，自己都數(shù)據(jù)結(jié)構(gòu)這塊多少還是有些印象重父，所以入了前端，對(duì)數(shù)據(jù)結(jié)構(gòu)和算法確實(shí)一直淡忘了忽匈。分析一下移動(dòng)端日歷房午，PC端日歷以及桌面日歷的一些不同和需要注意的地方。
這個(gè)我能想到的大致都說了一遍丹允，不同的場(chǎng)景交互和細(xì)節(jié)以及功能都有所偏差郭厌，以及功能的側(cè)重都可能不同。白板寫代碼雕蔽，用最簡潔的代碼實(shí)現(xiàn)數(shù)組去重折柠。
我寫了兩種實(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)草稿，多終端同步批狐，以及沖突問題扇售？
這個(gè)回答的不算好，本來也想到類比git的處理方式嚣艇，但是說的時(shí)候往另外一個(gè)方面說了承冰，導(dǎo)致與面試官想要的結(jié)果不一樣。
最后說目前的工作經(jīng)驗(yàn)達(dá)不到P6水平食零，業(yè)務(wù)類稍弱困乒，阿里現(xiàn)在社招只要P6的高級(jí)工程師，但是可以以第二梯隊(duì)進(jìn)去贰谣，就是以第三方簽署就業(yè)協(xié)議娜搂，一年后可以轉(zhuǎn)正迁霎，就是俗稱的外包。多少還是有點(diǎn)遺憾百宇，面了四輪面了個(gè)外包欧引，最后放棄這份工作了。
最后恳谎，感謝boss一直以來的關(guān)照和器重芝此。
我有一個(gè)前端學(xué)習(xí)交流QQ群：328058344 如果你在學(xué)習(xí)前端的過程中遇到什么問題，歡迎來我的QQ群提問因痛，群里每天還會(huì)更新一些學(xué)習(xí)資源婚苹。禁止閑聊，非喜勿進(jìn)鸵膏。
