阿里巴巴前端工程师的笔试题竟然是这样！
我们都知道阿里的待遇是一流的，前端工程师也是各行各业的大神，那么你们知道阿里的前端工程师的笔试题长啥样吗？河南中公教育小编给大家整理了部分笔试题目，大家参考下：
没有过硬的技术，是达不到阿里的要求的，现在就有一个机会，IT就业促进计划让你成为IT工程师，详情查看：
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
8月31日前报名，最高优惠2000元
2017河南省考网校直播课程99元，大咖带你畅谈上岸之道。
今日搜狐热点阿里巴巴前端开发面试题及面试流程爆料之旅
原创微信公众号：面试题技巧（ID:mianshiti666）十年HR人力资源沉淀，最新最全面试资讯和资源共享，招聘、求职、面试。广大网友共享的，众多求职者需求的，最权威最全面的面试题库，最真实最新的笔试答案，各大公司独家内幕面试流程，面试经验技巧分享。
应网友留言请求，来一发大公司的前端面试之旅，走你！
阿里巴巴前端实习春招面试详情：
一面：问了下个人情况，学的什么，研究方向，实习时间，怎么接触到前端的，学了多久，提取字符串的api，在线编程（class字符串增删查、解析url保存在字典中），html5新标签及作用，有没有了解过ES6，ES6有哪些特性，箭头函数有哪些特性，Array的map和reduce，想给字符串增加功能怎么做，session在后台是怎么保存的，文本压缩算法，Java安全访问DOM，说说mvvm以及还有其他什么mv*，react和angular的区别
二面：怎么接触到前端的，学了多久，怎么学的，angular脏检测的原理，会出现死循环吗，angular是怎么处理死循环的情况的，如果让你来处理死循环应该怎么处理，最近在关注哪些新技术
三面：一面和二面中觉得自己有哪些问题回答得不好（所以面试完马上就记录问了哪些问题，哪些没答好很重要，面试完马上补）？一面和二面面试官应该简历上的东西都问的差不多了，那你还觉得有什么你比较擅长的东西没有问到的呢（因为之前准备了“简单介绍一下你的项目，在项目中有没有哪些地方印象比较深的，有没有遇到什么问题花了很多时间去解决的”等一系列问题，总要用到对吧，一二面没有问那么这时候就该主动把它拖出来）？问了些简单的数据结构和算法（Java实现栈、队列、树，树的遍历）你有没有什么问题要问我？
hr面：介绍一下你现在的学习情况，为什么不从事本来的专业而转学前端，围绕项目谈了一些性能优化的东西，今后的打算
面试题目范围很广 考察了很多细节
共计面了4轮，3轮技术加1轮hr。第一轮技术面，半小时，问了java数组去重，需要提供至少3种方法，并比较它们到优劣，java中的nodelist是哪个公司发明的。之后问到一些简历上的项目经历，以及对各种前端框架的看法，dom性能优化。第二轮技术面，半小时，详细问了一些html，js，的dom操作方法及原理，效率，比如怎么实现getelementbytagname的，跨域方面比如xss攻击，怎么修改domain等。第三轮技术面，一小时，前两轮的综合。详细询问了一些dom操作的原理，以及哪些公司开发的这些方法。tcp/ip相关问题，html在网络中怎么传输过来的，有哪些方式能提高效率。第四轮hr面，15分钟，介绍一个最有挑战性的项目，自己最满意的项目，自己的优缺点。
社招自投简历四天过：
我是自己投的简历，然后差不多3天左右就收到了面试电话，技术一面面的是一些比较具体的细节，用过什么框架啊，底层的原理是什么啊，浏览器模型啊，设计模式什么的大概40分钟的样子，然后第二天就是技术二面，问的差不多，第三天就是技术三面，问了很多网络和服务器的问题，据说是交叉面试，然后第四天hr就打电话了，问了些常规问题，然后不久就让我去体检什么的，因为我还在职，所以我一开始就说了，能不能不去公司面试，比较远也比较麻烦，所以之后真的都根本没去过公司，问怎么设计一个组件，答首先要设计一个base层，然后要有一个初始化的机制以及数据源和事件绑定的机制，然后要有一个业务层。差不多吧好像是这么回答的。
积极留言，发表意见！
责任编辑：
声明：本文由入驻搜狐号的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
每日更新最新车祸GIF动图，车祸视频！
每日更新最新车祸GIF动图，车祸视频！用真实的车祸动图及视频让你了解车祸原因！
今日搜狐热点2016年7月 扩充话题大版内专家分月排行榜第三2016年1月 扩充话题大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。&&20048 阅读
2014年阿里的前端线上笔试题目区分度十分的高，感觉十分有意义。所以在这里做一些分析，也希望能丰富一下自己。这里已经有一个，但是因为其中作者有一部分也没有解释，而且文章的版式比较混乱，所以决定自己动手再分析一下。
下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。
已知HTML结构是：
&div class=&box&&
&div class=&item&&column 1&/div&
&div class=&item&&column 2&/div&
&div class=&item&&column 3&/div&
的指正。回去仔细查了一下，发现本题一开始的解答有误。回头查了查原帖，发现原帖正确的使用 box-flex 的属性，而我的解答并不规范。更新解答如下：
background-color: #619B99;
display: -webkit-
height: 40
padding: 10
padding-right: 0
width: 100%;
.box&div {
height: 40
background-color: #EEEEEE;
margin-right: 10
-webkit-box-flex: 1;
.box div:first-of-type {
width: 200
-webkit-box-flex: 0;
这里其实 box-flex 的含义在于规定框是否具有可伸缩尺寸。我个人总结的规则如下：
当box-flex: 0时，框的空间固定而不伸缩；
当 box-flex: n时，框的空间大约会按照剩余宽度的 n/m 伸缩，m为所有设定了box-flex值的和。
当给有flex的box设定了大小时，该box将拥有设定的空间与flex分配的空间之和。
例如父元素有500的空间，其中五个元素设定flex为1，则五个元素的宽度均为100；一个设置为flex:0、宽度180，则剩下的元素均分320的宽度，也即每个80；一个设置flex:6，则该元素分的6/10的宽度即300，剩余的元素各分1/10的宽度即50；一个元素设定为flex:1，同时设定宽度100，则该元素分得100+(500-100)/5=180的宽度，剩余的元素分的(500-100)/5=80的宽度。
（实测发现这里并不是很准确，准确的说当设置了flex的元素内部没有其他元素时，框的宽度会按照box-flex设置的那样按比例填充，但如果有元素和边距等情况，这个比例就仅仅是个大约的值了。）
实际上box-flex是个特别有用的工具，其一劳永逸的解决了当一个box中有元素有固定值，而又要求剩下的元素按比例浮动的情况。像这种问题之前都是使用绝对定位，将固定的元素采取 absolute 定位的方式，然后剩下的元素使用margin留出浮动元素留下的位子。但是当固定的元素过多且混杂出现时，使用绝对定位的方法将不能优雅的解决这个问题，那么flex模型就能展现它的力量了。
有两个盒子 A、B，B 在 A 盒子中，它们的 CSS 是这么定义的：
width: 500
height: 500
background-color:
max-width: 300
max-height: 300
background-color:
如何实现 B 在 A 中水平方向和垂直方向居中？
作者在原文里表示可以使用CSS3的 box-align 和 box-pack 的方法（W3C链接如下，），但是在实际测试中发现，如果B的定位不是 absolute （而是 relative 或者 static）那么如下追加的代码是有效的：
display: -webkit-
-webkit-box-align:
-webkit-box-pack:
但是当B的定位是绝对定位时，使用CSS3的box进行定位就起不到应有的效果。这里我们可以简单的看以下CSS的四种定位的原理（可参见mdn的解释： 以及quicksmode的这篇博文：）。
static ：默认定位，不可使用 top right bottom left 四种属性（以下简称TRBL）；
relative ：相对定位，指的是针对默认定位的位置而产生偏移，可以使用TRBL调整定位的偏移量，但是元素本身还在文档流中占据位置；
absolute ：绝对定位，指针对上一级非默认定位的位置（即上一级非 static 定位的父元素的位置）而产生的偏移，可用TRBL调整偏移量，与相对定位不同的是，元素本身漂出文档流，不再占据位置；
fix ：固定定位，锚定浏览器窗口的一种定位方式，可用TRBL调整偏移量。
这里B元素使用了绝对定位，也就是其偏移是针对A元素而计算的，可以使用TRBL进行调整。所以说莫非这里出题人是想让我们采用原始的div居中方法？
在CSS2的时代，要将div水平垂直居中也算是个挺让人头疼的问题，其大致的方法有如下几种：
外层元素宽度不固定，内层元素宽度固定：使用自动外边距或负值外边距两种方式；
自动外边距，这里要求内层元素不能采取绝对定位：
width: 100
负值外边距，用到了TRBL属性，要求内层元素采取绝对定位：
width: 200
left: 50%;
margin-left: -100
外层元素宽度固定，内层元素宽度不固定，采用表格法，要求内部元素不能采取绝对定位：
display: table-
vertical-margin:
增添HTML元素、使用Hack、使用JS等，不详述之。
然而观察上面的方法，题目中的限定条件是：外部元素宽度固定、内部元素宽度变动且绝对定位，这样就导致上述的方法没有一个可以满足所需要求的。我认为如果不改变题目中的限定，可以使用负值外边距的方法，用JS设置内层元素的margin值；或者直接在后面的CSS中修改内层元素的定位（设置为非绝对定位），然后使用CSS3的 box-align 和 box-pack 来实现，而这也是目前我认为实现效果最好，实现代码最为简洁的实现方式。
其中如果附加JS，代码如下：
var b = document.getElementsByClassName('B')[0]
l = b.offsetWidth
h = b.offsetHeight
b.style.marginLeft = -l/2 + 'px';
b.style.marginTop = -h/2 + 'px';
现有代码如下：
var foo = 1;
function main(){
console.log(foo);
var foo = 2;
console.log(this.foo)
this.foo = 3;
请给出以下两种方式调用函数时，输出的结果，并说明原因。
var m1 = main();
var m2 = new main();
如果想要 var m1 = main() 产生的m1和前面的m2完全一致,又该如何改造main函数?
看到全局变量与函数内局部变量重名时，一定要先想到
（变量声明提升规则）！
在第一种调用方式里，函数内部声明了局部变量 foo ，因此其声明被提升至最前。因此该段代码等价于：
function main(){
console.log(foo);
console.log(this.foo)
this.foo = 3;
在调用的时候，第一次输出为undefined，因为局部变量 foo 还没有被赋值，第二次输出为1，因为此时在非严格模式下 this 指代 window 对象。this.foo 即为全局变量的 foo 。
在第二种调用方式里，使用了原型链继承的方法，可以参见我的这篇文章：，其中 new 运算符的作用等价于如下函数：
function New (f) {
var n = { '__proto__': f.prototype };
return function () {
f.apply(n, arguments);
则在进行 new 运算时，函数中的 this 实际上指代的是运算符后面所跟的构造函数的原型链。因为在 new 运算的时候，实际上执行构造函数的是这一步： f.apply(n, arguments); 也就是说在构造函数中的 this 实际上指向的是变量 n ，而 n 是一个除了原形链指向 f 的原形链之外一无所有的空对象，所以这里的 this 实际上是指向了构造函数 f 的原形链。
所以这里的输出也就不难理解：因为构造函数 main() 本身的原形链为空，所以输出 this.foo 的结果为 undefined。
然后是第二问：使m1与m2的结果完全一致。我们知道m2所得到的是类 main 的一个实例化对象，这里要使得达到题目中的要求，就只能手工编写原形链继承，使 main 函数的返回结果为一个继承自其本身的对象。这里可以参考上面代码中 new 运算符的具体实现，编写 main 函数如下：
function main(){
console.log(foo);
var foo = 2;
console.log(this.foo)
this.foo = 3;
//返回一个main的实例化对象
var n = {'__proto__': main.prototype};
//main.apply(n, arguments);
n.foo = 3;
这里因为在 main 函数里有 this.foo = 3 这一项，为原型添加了成员变量，但如果在这里使用 apply 的方式为n添加这一属性的话，将进行无限递归导致栈溢出。而采取其他的方式都不可避免的会带来一些问题，所以直接给返回值n的属性foo进行了赋值，也起到了同样的效果。
我已经输入了个人简介……