自我概述

大家好，我是来自成都青城山下某大学的专科毕业生，今年22岁。我毕业于软件测试专业，已拥有接近三年的工作经验。我在实习期间就开始接触后端PHP开发，并在此后的工作中不断积累技术经验。从去年六月开始，我对前端产生了浓厚的兴趣，并开始了我的前端学习之路。虽然我的前端经验只有半年多，但我一直保持热爱和持续学习的心态。

职业经历与求职过程

近期，由于种种原因，我计划寻找新的工作机会。由于忙碌的工作节奏，我没有足够的时间去精心准备简历和复习基础知识，导致很多我掌握的技能未能充分展示在简历上。尽管如此，我在Boss直聘上挂了一个简版的简历，并计划在年后更全面地筹备求职事宜。

出乎意料的是，短短一周内，我收到了八条来自阿里的面试邀请。在了解阿里三个月内只能应聘一次的规定后，我精心选择了两个心仪的部门进行申请。其中一个部门进行了内推，但似乎因为我的学历问题未能通过。

阿里面试经历

第一轮：电话面试

在自我介绍环节，虽然我已准备好内容，但久违的面试经历让我显得有些紧张。我分享了我的教育背景、工作经验以及转向前端的经历。面试官随后展开了一系列的技术提问。

技术问题回顾

1. ES6与解构赋值：我通过实例解释了解构赋值的用法，如`const { a, b, c } = { a: 'aa', b: 'bb', c: 'cc' }`。

2. React生命周期：我详细阐述了React的生命周期方法，从实例化到销毁的整个过程。

3. 事件处理方法中的this调用：解释了如何使用`bind(this)`来确保事件处理方法中的`this`指向正确的对象。

4. 不使用bind(this)的方法：介绍了箭头函数、lodash-decorators中的Bind装饰器作为替代方案。

5. 装饰器的原理：解释了装饰器是语法糖，通过调用`Object.defineProperty`来添加或修改对象属性。

6. 闭包中的this作用域：指出内部函数的`this`指向外部包裹它的作用域。

7. React的render过程：简要概述了React的首次渲染与更新过程，并提到了在shouldComponentUpdate时使用redux-saga所做的优化及我的开源项目。

8. XSS与CSRF攻击及防御措施：解释了XSS（跨站脚本攻击）和CSRF（跨站请求伪造）的概念及如何进行有效的防御。

面试过程中，我不仅展示了我在前端的技术能力，还分享了我的后端经验和对技术的热情。期待未来能有更多的机会继续展示我的技术实力和潜力。 Ajax与网络请求

理解Ajax的原理与日常网络请求方式

Ajax，即Asynchronous JavaScript and XML，是一种在不刷新页面的情况下与服务器交换数据并更新部分网页的技术。通过XMLHttpRequest对象或ActiveXObject（针对旧版IE浏览器）来发起请求。关键步骤如下：

使用`onreadystatechange`事件注册回调函数来处理服务器响应。

使用`open`方法设置请求方法和URL。

使用`setRequestHeader`设置请求头（如果需要）。

调用`send`方法发送请求。

日常发送网络请求时，根据不同的应用场景，会选择不同的库或工具。例如，在同构应用中使用isomorphic-fetch，而在纯客户端环境中则可能使用axios。

布局与元素宽度调整

对于三个元素，要使中间元素的宽度随浏览器宽度的变化而变化，同时保证第一个和第三个元素的宽度固定为100px，可以使用CSS的Flex布局来实现。具体样式如下：

```css

.main {

display: flex;

justify-content: space-between; / 确保三个元素之间有间隔 /

}

.div-1, .div-3 {

width: 100px; / 固定宽度 /

}

.div-2 {

flex-grow: 1; / 使中间元素占用剩余空间 /

}

```

Box-sizing的理解

Box-sizing属性决定了元素如何计算其总尺寸。在标准模式下，元素的宽度和高度仅包括内容区域，不包括padding、border和margin。而在怪异模式下（IE盒模型），元素的宽度和高度则包括内容、padding和border。这一属性对于精确布局非常重要。

项目中的挑战与难点

在项目中，确实会遇到各种挑战。例如，在搭建EKL中央日志服务器时，由于日志时间与服务器时间（时区）不一致导致的问题。解决这类问题通常需要仔细核对时间设置、调整时区信息或确保时间同步。写grok match正则来匹配不同日志也是一项挑战，需要熟悉正则表达式的使用并不断实践。

后端项目经验

曾参与一个智能硬件项目，如宠物智能项圈，该项目涉及接收大量运动数据并进行处理。通过Swoole建立TCP连接，接收二进制数据，并使用MapReduce处理这些数据。选择MapReduce是因为它提供了一个快速且简单的解决方案来处理大规模数据。

MySQL事务管理

MySQL事务管理主要包括开始事务（BEGIN）、回滚（ROLLBACK）和提交（COMMIT）。这些命令确保了数据库操作的原子性、一致性和隔离性。

业务项目经验分享

rem与em的区别

rem是根据根元素的字体大小（font-size）来决定的单位，而em则是根据当前元素的字体大小来计算。简单说，rem是相对于根元素的单位，而em是相对于当前元素的父元素的单位。

面试总结与笔试答案

回忆过往，我认为在那次三面中，我的表现本该是最出色的。面试时，我自信满满，因为所谈内容皆为我所熟知，任何提问皆能娓娓道来，一谈数分钟。结局却出乎意料，我并未获得面试成功。反思之后，我明白了过多的讲述并不总是好事，简洁明了、直击要点有时更为重要。

作为一名专科生，能够以短短半年的前端经验获得阿里的面试机会，实属难得。虽然最终未能如愿以偿，但并非技术层面的问题，内心深感欣慰。阿里的面试官们都非常友善，面试过程中给予了我充分的思考时间，让我紧张的情绪得以缓解。即便结果未能如愿，他们也给了我宝贵的建议和鼓励。这次经历让我更加明白，在丰富技术的我们也不能忽视自身的表达能力。最后的建议，给所有程序员的看官们：在不断提升技术能力的也要注重锻炼自己的表达能力。

作者：Gavin1995

（原文来自：XXX网站）

作者通过个人的面试经历告诉我们：在展现自身技术实力的也要注重简洁明了的表达能力。过多的讲述并不总是好事，有时候需要直击重点。他也分享了在阿里面试过程中的感受，让我们了解到面试官的友善和专业，以及他们在面试过程中给予的建议和鼓励。对于正在或即将步入职场的朋友们来说，这是一篇非常有启示意义的文章。