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

题外话:由于我本人在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括号匹配问题

(完)

 

Logo

前往低代码交流专区

更多推荐