阿里前端校招面试指北，各路英雄来相会！

为什么80%的码农都做不了架构师？>>>   

阿里是提前批，找人内推了菜鸟网络，面了六轮，面的我怀疑人生了，中途四面本来已经挂了，后面三面面试官又捞起来给我加面了一轮，不过最后还是挂在了hr。

一面

1. css选择器，怎么选择相同的类

id、class、标签、伪类、通配符等。可以用getElementsByClassName（）选择相同的类。

2. css3有哪些伪类，伪类选择器有哪些

这里要区分一下伪类和伪元素的概念。根本区别在于它们是否创造了新的元素(抽象)。

• 伪类：用于向某些选择器添加特殊的效果。例如，a标签的:link, :visited, :hover, :active; 以及 :first-child, :last-child。
• 伪元素：是html中不存在的元素，用于将特殊的效果添加到某些选择器。例如:before,:after, :first-letter, :first-line。css3只新增了一个伪元素 ::selection（改变用户所选取部分的样式）。

3. OSI七层网络模型

OSI七层模型	作用	对应协议	对应设备
应用层	它是计算机用户，以及各种应用程序和网络之间的接口	HTTP, FTP, SMTP, POP3	计算机设备
表示层	信息的语法语义以及它们的关系，如加密解密、转换翻译、压缩解压缩	IPX, LPP, XDP
会话层	建立、维护、管理应用程序之间的会话	SSL, TLS, DAP, LDAP
传输层	服务点编址，分段与重组、连接控制、流量控制、差错控制	TCP, UDP	防火墙
网络层	为网络设备提供逻辑地址，进行路由选择、分组转发	IP ARP RARP ICMP IGMP	路由器
数据链路层	物理寻址，同时将原始比特流转变为逻辑传输路线	PPTP, ARP, RARP	交换机
物理层	机械、电子、定时接口通道信道上的原始比特流传输	IEEE 802.2, Ethernet v.2, Internetwork	网卡

参考： 一张非常强大的OSI七层模型图解

4. MVC和MVVM的区别

• Model用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法；
• View作为视图层，主要负责数据的展示；
• Controller定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变。

MVC将响应机制封装在controller对象中，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

MVVM把View和Model的同步逻辑自动化了。以前Controller负责的View和Model同步不再手动地进行操作，而是交给框架所提供的数据绑定功能进行负责，只需要告诉它View显示的数据对应的是Model哪一部分即可。也就是双向数据绑定，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

参考： 浅析前端开发中的 MVC/MVP/MVVM 模式

5. 用过哪些设计模式

（1）单例模式

定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。

实现方法：先判断实例存在与否，如果存在则直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

适用场景：一个单一对象。比如：弹窗，无论点击多少次，弹窗只应该被创建一次。

（2）发布/订阅模式 定义：又叫观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。

场景：订阅感兴趣的专栏和公众号。

（3）策略模式 定义：将一个个算法（解决方案）封装在一个个策略类中。

优点：

• 策略模式可以避免代码中的多重判断条件。
• 策略模式很好的体现了开放-封闭原则，将一个个算法（解决方案）封装在一个个策略类中。便于切换，理解，扩展。
• 策略中的各种算法可以重复利用在系统的各个地方，避免复制粘贴。
• 策略模式在程序中或多或少的增加了策略类。但比堆砌在业务逻辑中要清晰明了。
• 违反最少知识原则，必须要了解各种策略类，才能更好的在业务中应用。

应用场景：根据不同的员工绩效计算不同的奖金；表单验证中的多种校验规则。

（4）代理模式

定义：为一个对象提供一个代用品或占位符，以便控制对它的访问。

应用场景：图片懒加载（先通过一张loading图占位，然后通过异步的方式加载图片，等图片加载好了再把完成的图片加载到img标签里面。）

（5）中介者模式

定义：通过一个中介者对象，其他所有相关对象都通过该中介者对象来通信，而不是互相引用，当其中的一个对象发生改变时，只要通知中介者对象就可以。可以解除对象与对象之间的紧耦合关系。

应用场景： 例如购物车需求，存在商品选择表单、颜色选择表单、购买数量表单等等，都会触发change事件，那么可以通过中介者来转发处理这些事件，实现各个事件间的解耦，仅仅维护中介者对象即可。

（6）装饰者模式

定义：在不改变对象自身的基础上，在程序运行期间给对象动态的添加方法。

应用场景： 有方法维持不变，在原有方法上再挂载其他方法来满足现有需求；函数的解耦，将函数拆分成多个可复用的函数，再将拆分出来的函数挂载到某个函数上，实现相同的效果但增强了复用性。

参考： JavaScript设计模式

6. Http状态码

7. https怎么加密

参考： HTTP协议知识点总结

8. es6相比es5有哪些优点

大概说一下：let、const，模板字符串，箭头函数，做异步处理的promise、generator、async await，es6模块等。

参考： 阮一峰 —— ECMAScript 6 入门

9. ajax请求过程

不多说，上面有。

10. 有哪些性能优化

参考：

• 嗨，送你一张Web性能优化地图
• 前端优化不完全指南

11. 懒加载怎么实现

场景：一个页面中很多图片，但是首屏只出现几张，这时如果一次性把图片都加载出来会影响性能。这时可以使用懒加载，页面滚动到可视区在加载。优化首屏加载。

实现：img标签src属性为空，给一个data-xx属性，里面存放图片真实地址，当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-xx的值赋给src。

优点：页面加载速度快，减轻服务器压力、节约流量，用户体验好。

12. 项目中写过什么组件，组件有哪些功能

主要介绍了下实习项目写过的组件，说了下如何实现的。

二面

1. react框架有哪些设计的好的地方

主要介绍了以下几个部分：

• JSX语法
• 组件化
• react单项数据流
• 虚拟DOM
• react生命周期

2. react是怎么工作的，怎么提高性能

主要还是说了下react的生命周期，还有shouldComponentUpdate这个函数，以及diff算法。

3. redux有哪些需要改进，你觉得你用的不怎么舒服的地方？

我当时说的是redux的subscribe方法有点麻烦，每次更新数据都要手动的subscribe一下，所以觉得react-redux的api封装的更好，用起来比较简单。

参考：

• 这段时间研究了下Redux，写写自己对它的感觉
• Redux数据流管理架构有什么致命缺陷,未来会如何改进?

4. 怎么设计一个类似于antd 的 react 组件库

这个问题把我给问懵了额，我是按照软件工程的生命周期流程来答的。

5. 你做的最自豪的一个项目

这个略过...言之有理即可

6. mysql 的左关联和右关联

左关联：保留左表中所有的元组，右表中没有的属性填充NULL。

右关联：保留右表中所有的元组，左表中没有的属性填充NULL。

7. 有没有折腾过后端

直接说了没有，之前学了点PHP，不过都快忘得差不多了额。

8. 学习方法和未来的学习路线

言之有理即可。

9. 浏览器页面渲染机制

• 解析html建立dom树
• 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）
• 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
• 绘制render树（paint），绘制页面像素信息
• 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

参考： 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

10. XSS和CSRF防范措施

（1）XSS：跨站脚本攻击

攻击方式：在URL或者页面输入框中插入JavaScript代码。

防范：

• 设置httpOnly，禁止用document.cookie操作；
• 输入检查：在用户输入的时候进行格式检查；
• 对输出转义。

（2）CSRF：跨站点伪造请求

攻击方式：攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经认证过的网站并执行一些操作（如发邮件，发消息，甚至财产操作如转账和购买商品）。主要是拿到了用户的登录态。

防范：

• 检查 Referer 字段：这个字段用以标明请求来源于哪个地址。在处理敏感数据请求时，通常来说，Referer 字段应和请求的地址位于同一域名下。
• 添加校验 Token：这种数据通常是表单中的一个数据项。服务器生成token并附加在表单中，其内容是一个伪乱数。当客户端通过表单提交请求时，这个伪乱数也一并提交上去以供校验。正常的访问时，客户端浏览器能够正确得到并传回这个伪乱数，而通过 CSRF 传来的欺骗性攻击中，攻击者无从事先得知这个伪乱数的值，服务器端就会因为校验 Token 的值为空或者错误，拒绝这个可疑请求。
• 通过输入验证码来校验合法请求。

三面

这一面基本问的是个人知识沉淀了，如实回答就可以了。

1. 在项目中的难点，怎么解决的
2. 你的优势是什么
3. redux 源码学到了什么，怎么看源码的
4. 了解哪些前端的前沿技术
5. 平时看什么书，兴趣爱好是什么
6. 异步有哪些方法
7. 博客写了什么
8. 除了实习经历，还做过哪些项目

四面

这一面是在杭州菜鸟现场面的，尴尬的是通知我的小姐姐一直强调是hr面，我天真的以为是hr面了，然鹅问了很多技术，当时候想的是阿里的hr都这么厉害了，都能直接问技术了。临走之前，特意问了面试官是hr面么，他说是技术，然后我......大概就知道自己凉了。

1. mysql的索引用的什么，介绍一下b树，b+树，红黑树这些

mysql的索引用的是B+树。

参考： 数据结构中常见的树（BST二叉搜索树、AVL平衡二叉树、RBT红黑树、B-树、B+树、B*树）

2. Mysql的基本写法

参考： 一千行 MySQL 学习笔记

3. 估算下杭州上空现在有多少架飞机

这个题目，也真的是为难我了额。在网上搜到了个答案，可以参考下：高盛的面试题

4. 两组数据，都存储五亿条url，内存有4G，如何找出相同的两条url

参考： 面试- 阿里-. 大数据题目- 给定a、b两个文件，各存放50亿个url，每个url各占64字节，内存限制是4G，让你找出a、b文件共同的url?

5. 如何找到一个字符串中最长的两个字符串

解法：后缀数组。首先生成字符串的所有后缀数组，在进行排序，找出相邻两个最长的公共子串（从第一位开始相同的）

例如：abcdeabc

生成后缀数组：【abcdeabc，bcdeabc，cdeabc，deabc，eabc，abc，bc，c】

再排序：【abcdeabc，abc，bcdeabc，bc，cdeabc，c，deabc，eabc】

找出相邻的最长公共子串：【abc，bc，c】

因此，最长的串是abc。

6. 在白板上画出这个项目的整个架构

画了下项目的功能架构什么的。

7. XSS, CSRF,token 怎么来的，sql 注入知道么

sql注入：

攻击方式：服务器上的数据库运行非法的 SQL 语句，主要通过拼接字符串的形式来完成，改变sql语句本身的语义。通过sql语句实现无账号登陆，甚至篡改数据库。

防御：

• 使用参数化查询：使用预编译语句，预先编译的 SQL 语句，并且传入适当参数多次执行。由于没有拼接的过程，因此可以防止 SQL 注入的发生。 使用preparedStatement的参数化sql，通过先确定语义，再传入参数，就不会因为传入的参数改变sql的语义。（通过setInt，setString，setBoolean传入参数）
• 单引号转换：将传入的参数中的单引号转换为连续两个单引号，PHP 中的 Magic quote 可以完成这个功能。
• 检查变量数据类型和格式。
• 使用正则表达式过滤传入的参数，对特殊符号过滤或者转义处理。

8. 怎么设计一个ant的组件

9. 你觉得你实习做的项目有什么改进的地方

10. 你做过印象最深刻的项目

11. 算法了解过吗

就知道一些基本的排序额...

12. Setstate 会发生什么

setState会引发一次组件的更新过程，从而引发页面的重新绘制。主要会涉及以下几个生命周期函数：

• shouldComponentUpdate（被调用时this.state没有更新；如果返回了false，生命周期被中断，虽然不调用之后的函数了，但是state仍然会被更新）
• componentWillUpdate（被调用时this.state没有更新）
• render（被调用时this.state得到更新）
• componentDidUpdate

13. 平时处理过什么兼容性

参考： web前端兼容性问题总结

14. 了解分布式和负载均衡么

然鹅我并不了解呃。

参考： 服务器负载均衡的基本功能和实现原理

五面

第四面确实是挂了，没面hr就让我走了，后面过了两天之后，三面面试官又把我捞起来了，说我计算机基础还有数据库基础不怎么好，然后说问我几个简单的，之后给了我机会面了hr，感谢三面面试官让我体验了阿里的整个面试流程，很满足了。

1. 进程和线程的区别

• 根本区别：进程是操作系统资源分配的基本单位，而线程是任务调度和执行的基本单位。
• 在开销方面：每个进程都有独立的代码和数据空间（程序上下文），程序之间的切换会有较大的开销；线程可以看做轻量级的进程，同一类线程共享代码和数据空间，每个线程都有自己独立的运行栈和程序计数器（PC），线程之间切换的开销小。
• 所处环境：在操作系统中能同时运行多个进程（程序）；而在同一个进程（程序）中有多个线程同时执行（通过CPU调度，在每个时间片中只有一个线程执行）。
• 内存分配方面：系统在运行的时候会为每个进程分配不同的内存空间；而对线程而言，除了CPU外，系统不会为线程分配内存（线程所使用的资源来自其所属进程的资源），线程组之间只能共享资源。
• 包含关系：没有线程的进程可以看做是单线程的，如果一个进程内有多个线程，则执行过程不是一条线的，而是多条线（线程）共同完成的；线程是进程的一部分，所以线程也被称为轻权进程或者轻量级进程。

2. 冒泡排序和快速排序的区别

简述了下冒泡和快排的思想，以及冒泡和快排的时间复杂度。

3. OSI七层模型以及作用

上面有写噢，不知道的往上翻。

4. 你有哪些优势，或者打动他的

呃，最怕这种自夸的问题额，然后就是夸了一顿，手动捂脸。

5. 面向对象和非面向对象有什么区别

面向对象三大特性：封装,继承,多态。

面向对象的好处：

• 将对象进行分类，分别封装它们的数据和可以调用的方法，方便了函数、变量、数据的管理，方便方法的调用（减少重复参数等），尤其是在编写大型程序时更有帮助。
• 用面向对象的编程可以把变量当成对象进行操作，让编程思路更加清晰简洁，而且减少了很多冗余变量的出现

参考： 面向对象（一）|面向对象概念及优点

6. 设计模式有哪些，说下装饰者模式和代理模式

前面有总结，往前翻。

7. 重载和重写有什么区别

方法重写(overriding)：

• 也叫子类的方法覆盖父类的方法，要求返回值、方法名和参数都相同。
• 子类抛出的异常不能超过父类相应方法抛出的异常。(子类异常不能超出父类异常)
• 子类方法的的访问级别不能低于父类相应方法的访问级别(子类访问级别不能低于父类访问级别)。

方法重载(overloading):

重载是在同一个类中的两个或两个以上的方法，拥有相同的方法名，但是参数却不相同，方法体也不相同，最常见的重载的例子就是类的构造函数。

参考： 方法重载和重写的区别

hr面

1. 为什么选择前端开发
2. 什么事情让你最有成就感
3. 什么让你最有挫败感
4. 为什么选择阿里
5. 平时是怎么学习的
6. 职业发展

大概就是这样吧，在即将到来的三四月份黄金时间里，希望所有的前端党们都能找到自己心仪的工作，意向阿里的童鞋希望本篇文章对你有帮助。

有句话叫做“方法不对，努力白费”所有的前端大神都有自己的学习方法，而学web前端的学习也基本一致，而对于一个什么都不懂的初学者，根本不会知道该怎么学，这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期，找不到方向。可以加入我们的前端学习交流qun： 731771211 。有任何不明白的东西随时来问我。

点击：加入

转载于:https://my.oschina.net/zybc/blog/2990228