招聘网站上偶然间看到了一个阿里巴巴的前端招聘信息，要求半年到一年的工作经验，看起来要求不是很高，于是就抱着试试的心态投了简历，没想到第二天惊喜的收到了电话面试预约，然后顺利的进行了电话面试，面试后我把面试过程中问到的问题都大概的记录了下啦，拿出来供大家一起学习，希望对一些准备阿里前端面试的同学有帮助。

题外话：由于我本人在vue缓存机制和跨域安全方面了解不深，故回答得不是很好，再加上自己的数据结构基础也不是很扎实，所以没有进入第二轮的面试。虽然很遗憾但也很有收获，这次面试让我发现了自己在很多方面的不足，需要快速去弥补；在电话面试完之后，面试官很nice地给我上了一节职业规划的课程，在专业学习和职业规划上给了我很多建议，让我受益匪浅；此外，面试官还给我介绍了阿里的用人原则：诚信、踏实、积极、乐观等等，阿里对于应届生要求其实很简单，基础一定要很扎实，自学能力强，具有专研技术的精神，计算机基础方面 数据结构和算法是重点，以及要理解计算机网络的工作原理... 这些都是我需要去弥补的方面，加油吧，少年。

面试题：

1、flex布局

详细介绍：Flex布局教程 --- 语法篇

 

2、js有哪些遍历数组的方法

注：array为需要遍历的数组

ES5方法： 

1）for循环；

      通过下标遍历数组的每一项；

2）array.forEach((item, index, array)=>{  //得到每一项的值item，下标index，数组array  }) 

      类似于for；

3）array.map((item, index, array)=>{ return //格式化数组 })

     用于格式化数组，返回格式化后的一个数组；如无return，则返回由length个undefined组成的数组；

4）array.filter(((item, index, array)=>{ return //判断条件 }))

     根据条件过滤元素，返回符合条件的元素组成的一个数组；

5）array.every(((item, index, array)=>{ return //判断条件 }))

     如果每个元素都符合条件，则返回true，否则返回false；

6）array.some(((item, index, array)=>{ return //判断条件 }))

     只要有一个元素符合条件，就返回true，否则返回false；

7）array.reduce((prev,cur,index,array)=>{})

     从左到右遍历数组，并返回回调函数的值（应用于求和，求幂等）；prev为上一轮函数执行结果（previousResult），cur为当前值(currentValue)

8）array.reduceRight((prev,cur,index,array)=>{})

     从右到左遍历数组，并返回回调函数的值；

ES6方法：

1）for(let item of array){  //等到每个元素  }

     for(let index of array.keys()) {   //keys()返回数组的键（index）  }

     for(let keyAndValue of array.entries()){   //entries()返回数组的键值对（index:element）  }

2）array.find((value, index, array)=>{ return //条件 }

     返回第一个符合条件的元素，如果没找到返回undefined（找到第一个符合条件的元素，则停止遍历）

3）array.findIndex((value, index, array)=>{ return //条件 }

     返回第一个符合条件的元素下标，如果没找到则返回-1（找到第一个符合条件的元素，则停止遍历）

 

3、箭头函数的特性

1）箭头函数是匿名函数，自身没有this和arguments，它的this从上下文捕捉而来；

2）箭头函数不能作为构造函数，和 new 一起用就会抛出错误；

3）箭头函数没有原型属性（prototype）；

4）箭头函数不能当做Generator函数,不能使用yield关键字；

 

4、项目背景

介绍你做过了哪些项目，这些项目都使用了哪些技术；重点介绍自己实现了哪些模块，有哪些优秀部分，自己有什么收获。

 

5、MVVM模式介绍

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

 

6、Vue生命周期

beforeCreate() 创建组件

created() 创建完成

beforeMounte() 组件被挂载前

mounted() 组件挂载完成

beforeUpdate() 组件更新前

updated() 组件更新后

beforeDestory() 组件摧毁前

destoryed() 组件摧毁后

详细介绍：详解vue生命周期

 

7、Vue数据双向绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式实现数据双向绑定，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调，从而更新视图层的数据。

详细介绍：剖析Vue原理&实现双向绑定MVVM

 

8、web项目性能优化

减少页面体积，提升网络加载：

1）静态资源压缩合并，如js代码合并，css代码合并，压缩图片等；

2）静态资源缓存；

3）使用 CDN 让资源加载更快；

优化页面渲染：

1）减少HTTP请求；

2）减少DOM操作，多个操作尽量合并在一起执行（DocumentFragment）；

3）懒加载（图片懒加载、下拉加载更多）；

4）使用 SSR 后端渲染，数据直接输出到 HTML 中，减少浏览器使用 JS 模板渲染页面 HTML 的时间（smarty、Vue SSR）；

 

9、web缓存

http请求头缓存

1）强制缓存：

第一次请求即把数据缓存起来，在缓存数据未失效的情况下，之后的请求都直接使用缓存数据。

缓存规则(header里配置) Cache-Control，参数：private（客户端可以缓存），public（客户端和代理服务器都可缓存），max-age=xxx 缓存时长（s），no-cache使用缓存前，再向服务器发送验证请求，no-store禁止缓存。

2）协商缓存：

第一次请求时拿到缓存数据和缓存标识，再次请求时向服务器发送缓存标识，服务器判断缓存是否有效，若有效则返回304状态码，请求数据从缓存读取，若无效则返回202，需要重新发送http请求数据。

缓存数据的修改时间(header里配置) Last-Modified（第一次请求） 数据最后修改时间，If-Modified-Since（再次请求）上次请求时的最后修改时间。

缓存标识(header里配置)：Etag（第一次请求）由服务器生成的唯一标识，If-None-Match（再次请求）第一次请求获取的唯一标识。

常用浏览器缓存

1）Cookie主要用于用户信息的存储，Cookie的内容可以自动在请求的时候被传递给服务器；

2）LocalStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止；

3）SessionStorage的其他属性同LocalStorage，只不过它的生命周期同标签页的生命周期，当标签页被关闭时，SessionStorage也会被清除；

4）IndexDB主要用在前端有大容量存储需求的页面上，例如，在线编辑浏览器或者网页邮箱。

参考：一篇文章理解Web缓存

 

10、web跨域方式

同源策略：协议，域名，端口三者中有一个不同就算跨域。

跨域方式：

1）JSONP，通过<script>标签的异步加载来实现的跨域；

2）CORS “跨域资源共享”（Cross-origin resource sharing），它允许浏览器向跨源服务器，发出XMLHttpRequest请求。分为简单请求和非简单请求；（浏览器自动完成）

3）WebSocket（网络通信协议），不受同源的限制，可在客户端和服务器端之间双向通信；（客户端可以向服务器发送请求，服务器也可以向客户端发送请求，而http只能由客户端向服务器发送请求，不能反过来）

4）postMessage()，H5新增的跨域通信方法。应用场景：窗口 A (http:A.com)向跨域的窗口 B (http:B.com)互通信息；

5）Hash，原理：Hash的改变，页面不会刷新。应用场景：A 通过iframe或frame嵌入了跨域的页面 B，A与B间可以通过hash通信。（A和B的domain相同）；

参考：前端跨域通信的几种方式

 

12、大数的加减乘除

1）使用插件：如bignumber.js、bigInteger.js

2）原生js实现：javascript 大数值数据运算

 

13、找出两个链表的第一个交点

解题思想：如果两个单链表有共同的节点，那么从第一个共同节点开始，后面的节点都会重叠，直到链表结束。 
因为两个链表中有一个共同节点，则这个节点里的指针域指向的下一个节点地址一样，所以下一个节点也会相交，依次类推。所以，若相交，则两个链表呈“Y”字形。如下图

参考：判断两个单链表是否相交及找到第一个交点

 

14、一串有很多括号、中括号、花括号组成的字符串，判断它是否为匹配字符串，即左右能匹配。

参考：JS括号匹配问题

（完）