前言

某小哥的面試經(jīng)歷

成都青城山下某大學(xué)畢業(yè)，專(zhuān)科权烧，軟件測(cè)試 專(zhuān)業(yè)畢業(yè)

22歲眯亦，15年出來(lái)實(shí)習(xí)伤溉，工作經(jīng)驗(yàn)接近三年，之前主要做后端寫(xiě)PHP搔驼，自己喜歡瞎折騰谈火，從去年六月份開(kāi)始研究前端，算下來(lái)前端經(jīng)驗(yàn)半年多

年底由于種種原因想換一份工作舌涨，但由于太忙糯耍，沒(méi)認(rèn)真搞簡(jiǎn)歷，也沒(méi)怎么復(fù)習(xí)基礎(chǔ)囊嘉，導(dǎo)致很多本來(lái)會(huì)的都沒(méi)敢往簡(jiǎn)歷上寫(xiě)温技。于是寫(xiě)了一個(gè)簡(jiǎn)版的簡(jiǎn)歷掛在Boss直聘上，準(zhǔn)備年過(guò)完再認(rèn)真籌備這件事情扭粱。

令我意外的是舵鳞，一周竟收到八條阿里的面試邀請(qǐng)，看了網(wǎng)上前輩的一些心得：阿里三個(gè)月內(nèi)只能應(yīng)聘一次琢蛤，于是選了兩個(gè)心儀的部門(mén)投了簡(jiǎn)歷蜓堕，其中一個(gè)內(nèi)推完沒(méi)下文，多半是學(xué)歷沒(méi)過(guò)

以下是阿里面試過(guò)程

第一輪 電話(huà)面試

1博其、自我介紹

balabala....套才，好久沒(méi)面試過(guò)，自我介紹居然顯得很緊張慕淡，說(shuō)了一些簡(jiǎn)歷上沒(méi)有的東西背伴，比如之前寫(xiě)PHP、用Swoole做智能硬件通訊啊之類(lèi)峰髓，以及為什么寫(xiě)前端啊傻寂，balabala...

2、會(huì)ES6嗎携兵，什么是解構(gòu)賦值疾掰？ 直接舉了個(gè)例子

const { a, b, c } = { a: 'aa', b: 'bb', c: 'cc' }

3、說(shuō)下React的生命周期

實(shí)例化

存在期

銷(xiāo)毀時(shí)

componentWillUnmount

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

getDefaultProps

getInitialState

componentWillMount

render

componentDidMount

4眉孩、React方法中个绍，調(diào)用事件處理方法(里面要用到this)怎么調(diào)用

this.foo.bind(this)

5、接問(wèn)題4浪汪，為什么需要bind(this)

作用域的問(wèn)題巴柿，foo() {} 與 const foo = () => {}里面的this作用域不一樣，foo() {}里面使用外部成員死遭，需要bind(this)广恢，直接使用的this作用域僅在該方法內(nèi)部

6、接問(wèn)題4呀潭，能不能不使用bind(this)

可以使用箭頭函數(shù)

可以使用lodash-decorators里面的Bind裝飾器

7钉迷、裝飾器的原理

語(yǔ)法糖至非，實(shí)則調(diào)用Object.defineProperty，可以添加糠聪、修改對(duì)象屬性

8荒椭、自己實(shí)現(xiàn)一個(gè)通用方法，做到不需要使用bind與裝飾器達(dá)到問(wèn)題4的目的

柯里化 + apply舰蟆，詳細(xì)過(guò)程不贅述...

9趣惠、閉包里面的this作用域

內(nèi)部函數(shù)的this指向外部包裹它的作用域

10、React render做了什么

主要分首次渲染與更新來(lái)說(shuō)身害，說(shuō)的比較多味悄，不贅述，網(wǎng)上react源碼分析一大堆...這期間順帶提到了利用redux-saga在shouldComponentUpdate時(shí)所做優(yōu)化塌鸯，以及自己的開(kāi)源項(xiàng)目

11侍瑟、說(shuō)說(shuō)xss與csrf，怎么防止

xss：跨站腳本攻擊丙猬，如果不過(guò)濾執(zhí)行了js代碼涨颜，可能導(dǎo)致cookie泄露等。防止：過(guò)濾

csrf：跨站請(qǐng)求偽造茧球，挾制用戶(hù)在當(dāng)前已登錄的Web應(yīng)用程序上執(zhí)行非本意的操作咐低。防止：設(shè)置token、寫(xiě)操作用post袜腥、JSON API禁用CORS、禁用跨域請(qǐng)求钉汗、檢查referrer

12羹令、Ajax的原理，你平常怎么發(fā)送網(wǎng)絡(luò)請(qǐng)求的

通過(guò)XMLHttpRequest/ActiveXObject新建Ajax請(qǐng)求

通過(guò)onreadystatechange注冊(cè)回調(diào)函數(shù)

使用open损痰、setRequestHeader福侈、send結(jié)合發(fā)送請(qǐng)求

平常發(fā)送網(wǎng)絡(luò)請(qǐng)求：用next做同構(gòu)應(yīng)用時(shí)，使用isomorphic-fetch發(fā)送請(qǐng)求卢未，如果只是客戶(hù)端發(fā)送請(qǐng)求時(shí)肪凛，使用axios

13、有三個(gè)元素辽社，第一個(gè)與第三個(gè)寬度都為100px伟墙，中間元素占用剩余空間，怎么做到中間元素隨著瀏覽器寬度的變化而變化

{`

.main {

width: 100vw;

height: 100vh;

display: flex;

justify-content: space-around;

}

.div-1,.div-3 {

min-width: 100px;

height: 100vh;

}

.div-2 {

width: 100%;

height: 100vh;

}

`}

14滴铅、講講box-sizing

標(biāo)準(zhǔn)模式：width與height指的是內(nèi)容區(qū)域的寬高戳葵，增加padding、border汉匙、margin會(huì)影響總體尺寸

怪異模式：width與height指內(nèi)容區(qū)+padding+border拱烁，增加padding生蚁、border不會(huì)影響總體尺寸

15、做項(xiàng)目有沒(méi)有遇到什么坑

最近做的這些項(xiàng)目項(xiàng)目也沒(méi)有遇到什么大坑戏自，印象很深的是之前實(shí)習(xí)搭建EKL中央日志服務(wù)器的時(shí)候邦投，被一個(gè)時(shí)間問(wèn)題坑了一天，EKL收集的日志時(shí)間與服務(wù)器的時(shí)間（時(shí)區(qū)）不一致擅笔，導(dǎo)致收集不到日志

16志衣、你覺(jué)得搭建EKL有那些難點(diǎn)

相關(guān)服務(wù)器搭建倒是沒(méi)什么難點(diǎn)，我覺(jué)得使用EKL最麻煩的是寫(xiě)grok match正則剂娄，匹配不同的日志蠢涝，需要不同的正則，不過(guò)寫(xiě)到后面也習(xí)慣了阅懦，還OK

17和二、講講印象比較深的后端項(xiàng)目

之前實(shí)習(xí)時(shí)，做智能硬件項(xiàng)目耳胎，是一個(gè)寵物智能項(xiàng)圈惯吕，能記錄寵物的運(yùn)動(dòng)數(shù)據(jù)，硬件每隔一段時(shí)間會(huì)發(fā)送大量的陀螺儀與加速計(jì)數(shù)據(jù)到服務(wù)端怕午，通過(guò)swoole建立tcp废登，接受二進(jìn)制數(shù)據(jù)，然后將接受到的數(shù)據(jù)通過(guò)map reduce處理...

18郁惜、停一下堡距，你講到處理大數(shù)據(jù)用map reduce，那為什么不用redis之類(lèi)的

我個(gè)人覺(jué)得應(yīng)該是當(dāng)時(shí)團(tuán)隊(duì)比較小兆蕉，需要一個(gè)快速且簡(jiǎn)單的解決方案羽戒，所以map reduce正是我們所需要的，redis我也知道虎韵，可以使用zset易稠，求和很方便

19、說(shuō)說(shuō)mysql的事務(wù)

BEGIN包蓝、事務(wù)回滾ROLLBACK驶社、事務(wù)提交COMMIT

20、說(shuō)說(shuō)你最滿(mǎn)意的業(yè)務(wù)項(xiàng)目

說(shuō)了一個(gè)next.js的觸屏版同構(gòu)項(xiàng)目测萎，項(xiàng)目中使用到了prefech預(yù)先加載亡电，以及next的動(dòng)態(tài)加載，體驗(yàn)相當(dāng)?shù)目焐胣progress展示滾動(dòng)條逊抡，在next.js還沒(méi)有發(fā)布5.0版本/解決style-jsx中使用less、sass問(wèn)題的時(shí)候，自己用postcss解決了冒嫡，整個(gè)項(xiàng)目使用flexible + rem做響應(yīng)式拇勃，自己改寫(xiě)了video-react組件，兼容觸屏版孝凌，還有一些自認(rèn)為不錯(cuò)的業(yè)務(wù)思想不贅述...

21方咆、說(shuō)說(shuō)rem與em的區(qū)別

rem是根據(jù)根的font-size變化，em是根據(jù)父級(jí)的font-size變化

一面總結(jié)

一面面試的時(shí)候時(shí)不時(shí)順帶表現(xiàn)一下自己蟀架，根據(jù)面試官的問(wèn)題回答時(shí)順帶提了一下看過(guò)的開(kāi)源項(xiàng)目瓣赂，比如react(redner過(guò)程)、next(postcss解決style-jsx編寫(xiě)less片拍、isomorphic-fetch的使用等)煌集、ant pro(lodash-decorators的使用)等