前言
先介紹一下自己的情況吧
成都青城山下某大學(xué)畢業(yè)忧勿，專科瞻讽，軟件測試專業(yè)畢業(yè)
22歲鸳吸，15年出來實習(xí)，工作經(jīng)驗接近三年速勇，之前主要做后端寫PHP晌砾，自己喜歡瞎折騰，從去年六月份開始研究前端烦磁，算下來前端經(jīng)驗半年多
年底由于種種原因想換一份工作养匈，但由于太忙哼勇，沒認真搞簡歷，也沒怎么復(fù)習(xí)基礎(chǔ)呕乎，導(dǎo)致很多本來會的都沒敢往簡歷上寫积担。于是寫了一個簡版的簡歷掛在Boss直聘上，準(zhǔn)備年過完再認真籌備這件事情猬仁。
令我意外的是帝璧，一周竟收到八條阿里的面試邀請，看了網(wǎng)上前輩的一些心得：阿里三個月內(nèi)只能應(yīng)聘一次逐虚，于是選了兩個心儀的部門投了簡歷聋溜，其中一個內(nèi)推完沒下文，多半是學(xué)歷沒過
以下是阿里面試過程
第一輪 電話面試
自我介紹
balabala....叭爱，好久沒面試過撮躁，自我介紹居然顯得很緊張，說了一些簡歷上沒有的東西买雾，比如之前寫PHP把曼、用Swoole做智能硬件通訊啊之類，以及為什么寫前端啊漓穿，balabala...
會ES6嗎嗤军，什么是解構(gòu)賦值？
直接舉了個例子
const { a, b, c } = { a: 'aa', b: 'bb', c: 'cc' }
說下React的生命周期
實例化getDefaultProps
React方法中晃危，調(diào)用事件處理方法(里面要用到this)怎么調(diào)用
this.foo.bind(this)
接問題4叙赚，為什么需要bind(this)
作用域的問題，foo() {} 與 const foo = () => {}里面的this作用域不一樣僚饭，foo() {}里面使用外部成員震叮，需要bind(this)，直接使用的this作用域僅在該方法內(nèi)部
接問題4鳍鸵，能不能不使用bind(this)
可以使用箭頭函數(shù)
可以使用lodash-decorators里面的Bind裝飾器
裝飾器的原理
語法糖苇瓣，實則調(diào)用Object.defineProperty，可以添加偿乖、修改對象屬性
自己實現(xiàn)一個通用方法击罪，做到不需要使用bind與裝飾器達到問題4的目的
柯里化 + apply，詳細過程不贅述...
閉包里面的this作用域
內(nèi)部函數(shù)的this指向外部包裹它的作用域
React render做了什么
主要分首次渲染與更新來說贪薪，說的比較多媳禁，不贅述，網(wǎng)上react源碼分析一大堆...這期間順帶提到了利用redux-saga在shouldComponentUpdate時所做優(yōu)化画切，以及自己的開源項目
說說xss與csrf竣稽，怎么防止
xss：跨站腳本攻擊，如果不過濾執(zhí)行了js代碼，可能導(dǎo)致cookie泄露等丧枪。防止：過濾csrf：跨站請求偽造，挾制用戶在當(dāng)前已登錄的Web應(yīng)用程序上執(zhí)行非本意的操作庞萍。防止：設(shè)置token拧烦、寫操作用post、JSON API禁用CORS钝计、禁用跨域請求恋博、檢查referrer
Ajax的原理，你平常怎么發(fā)送網(wǎng)絡(luò)請求的
通過XMLHttpRequest/ActiveXObject新建Ajax請求通過onreadystatechange注冊回調(diào)函數(shù)使用open私恬、setRequestHeader债沮、send結(jié)合發(fā)送請求平常發(fā)送網(wǎng)絡(luò)請求：用next做同構(gòu)應(yīng)用時，使用isomorphic-fetch發(fā)送請求本鸣，如果只是客戶端發(fā)送請求時疫衩，使用axios
有三個元素，第一個與第三個寬度都為100px荣德，中間元素占用剩余空間闷煤，怎么做到中間元素隨著瀏覽器寬度的變化而變化
講講box-sizing
標(biāo)準(zhǔn)模式：width與height指的是內(nèi)容區(qū)域的寬高，增加padding涮瞻、border鲤拿、margin會影響總體尺寸怪異模式：width與height指內(nèi)容區(qū)+padding+border，增加padding署咽、border不會影響總體尺寸
做項目有沒有遇到什么坑
最近做的這些項目項目也沒有遇到什么大坑近顷，印象很深的是之前實習(xí)搭建EKL中央日志服務(wù)器的時候，被一個時間問題坑了一天宁否，EKL收集的日志時間與服務(wù)器的時間（時區(qū)）不一致窒升，導(dǎo)致收集不到日志
你覺得搭建EKL有那些難點
相關(guān)服務(wù)器搭建倒是沒什么難點，我覺得使用EKL最麻煩的是寫grok match正則家淤，匹配不同的日志异剥，需要不同的正則，不過寫到后面也習(xí)慣了絮重，還OK
講講印象比較深的后端項目
之前實習(xí)時冤寿，做智能硬件項目，是一個寵物智能項圈青伤，能記錄寵物的運動數(shù)據(jù)督怜，硬件每隔一段時間會發(fā)送大量的陀螺儀與加速計數(shù)據(jù)到服務(wù)端，通過swoole建立tcp狠角，接受二進制數(shù)據(jù)号杠，然后將接受到的數(shù)據(jù)通過map reduce處理...
停一下，你講到處理大數(shù)據(jù)用map reduce，那為什么不用redis之類的
我個人覺得應(yīng)該是當(dāng)時團隊比較小姨蟋，需要一個快速且簡單的解決方案屉凯，所以map reduce正是我們所需要的，redis我也知道眼溶，可以使用zset悠砚，求和很方便
說說mysql的事務(wù)
BEGIN、事務(wù)回滾ROLLBACK堂飞、事務(wù)提交COMMIT
說說你最滿意的業(yè)務(wù)項目
說了一個next.js的觸屏版同構(gòu)項目灌旧，項目中使用到了prefech預(yù)先加載，以及next的動態(tài)加載绰筛，體驗相當(dāng)?shù)目焓嗵胣progress展示滾動條，在next.js還沒有發(fā)布5.0版本/解決style-jsx中使用less铝噩、sass問題的時候衡蚂，自己用postcss解決了，整個項目使用flexible + rem做響應(yīng)式薄榛，自己改寫了video-react組件讳窟，兼容觸屏版，還有一些自認為不錯的業(yè)務(wù)思想不贅述...
說說rem與em的區(qū)別
rem是根據(jù)根的font-size變化敞恋，em是根據(jù)父級的font-size變化
一面總結(jié)
一面面試的時候時不時順帶表現(xiàn)一下自己丽啡，根據(jù)面試官的問題回答時順帶提了一下看過的開源項目，比如react(redner過程)硬猫、next(postcss解決style-jsx編寫less补箍、isomorphic-fetch的使用等)、ant pro(lodash-decorators的使用)等
第二輪 筆試
歡迎小伙伴們在評論區(qū)貼上自己的答案哦
第三輪 電話面試
主要談到自己所開源的兩個前端項目啸蜜，這當(dāng)然是我最喜歡的地方坑雅，遇到自己喜歡的東西根本停不下來，balabala說了太多（生活中我的話很少衬横，屬于比較內(nèi)向的那種裹粤，哈哈），還有一些職業(yè)發(fā)展啊蜂林、個人想法啊之類的...
遺憾的是三面掛了遥诉，給的反饋是話太多，說不到重點噪叙。其實現(xiàn)在回想起來矮锈，個人覺得三面應(yīng)該是我表現(xiàn)最好的一面，當(dāng)時面完覺得穩(wěn)過了睁蕾，哈哈苞笨。因為談的全是我了解的東西债朵，隨便一個問題，我都可以說上幾分鐘瀑凝，但也正是這個原因?qū)е铝嗣嬖囀⌒蚵f的太多也不一定是好事，有時候需要簡潔粤咪，直擊重點芝加。
<<<前端是我一輩子的信仰，寫代碼直到50歲>>>
關(guān)注微信公眾號：web前端學(xué)習(xí)圈回復(fù)關(guān)鍵詞【簡書】送你50G最適合2020年學(xué)習(xí)的web前端零基礎(chǔ)入門教程（視頻+筆記+素材+源碼+項目實戰(zhàn)）
另外公眾號每天都會分享學(xué)習(xí)方法射窒，知識干貨，實戰(zhàn)案例将塑，面試技巧脉顿，經(jīng)驗分享等相關(guān)文章，關(guān)注web前端學(xué)習(xí)圈=關(guān)注5000+前端大牛
結(jié)語
很幸運一個尩懔龋科生以半年的前端經(jīng)驗?zāi)塬@得阿里的面試機會艾疟，結(jié)局雖掛了，但也不是因為技術(shù)原因敢辩，內(nèi)心還是很欣慰的蔽莱，還有阿里的面試官都很nice，面完也會及時的反饋戚长，當(dāng)你緊張的時候會給你留時間調(diào)整盗冷，結(jié)局沒過到也會給建議與鼓勵。最后各位程序猿看官同廉，豐富技術(shù)的同時不要忘了提升自己的表達能力哦
