蚂蚁金服和字节跳动の面经

Javascript CSS HTML Vue
笔试面试
Publish Date:   2020-04-01
Word Count:   1.3k

公司： 蚂蚁金服
部门： 数字金融部

蚂蚁测评

时间： 2020.03.19 14:00 - 15:20

内容： 行测 + 性格测试

蚂蚁一面

时间： 2020.03.22 10:10 - 11:24

第一次碰到女面试官，除了开心就是开心啊~ 希望是以后工作的前辈吧！面试时间是周末，但是面试官在家加班还很认真的问了我超级多的问题~

  1. Vue项目中自定义的组件？

  2. 如何实现组件在其他项目上的扩展使用？比如像npm的包给别的项目引用

  3. 小程序开发中的问题，机制?你主要负责的是什么部分，项目中你觉得有意思的点是什么？

  4. 对于Vue的问题，虚拟DOM的渲染，虚拟DOM对于普通DOM的提升在哪里？因为什么才优于普通DOM

  5. 对于Promise的原理，以及解析，有什么状态？状态之间可以逆转吗？方法，如何捕获异常，可不可以对Promise内部的错误进行try…catch，(不可以，那为什么？。。。)

  6. ES6，let和var的对比，为啥要变量提升?

场景题： console.log(i)
var i = 1

结果是什么？ Undefined，为什么？
只是声明的变量会提升，初始化不会提升

所以你觉得变量的提升是声明的提升还是赋值的提升？（声明的提升）

  1. 箭头函数的操作，跟普通函数比有什么区别，this指向哪里？可以修改不？

  2. 对于改变this指向，知道哪些函数？有什么区别（bind,call,apply）

  3. Vue的核心机制是什么？有什么特点？

  4. Vue和 React的区别?

  5. 响应事件的触发（只说了冒泡、其余不知道）

  6. Position有哪些值，属性相对参照的是什么？

  7. 盒子模型，如何控制盒子模型的位置

  8. 如何使用css画一个三角形

  9. 三列布局的实现方式？分别怎么实现（Float、Position、Flex逻辑有点混乱）

  10. Flex布局的默认对齐方式是什么（说错了）？如果一行装不下的话怎么去实现flex-wrap? 考虑子元素的换行方式

  11. 对同源策略有了解吗？跨域的实现方式都说一下？

  12. JSONP的原理，以及jsonp中的回调函数应该挂载到那里？

  13. CORS的实现原理？服务器端是实现接口还是配置？使用注意？

  14. 如何去判别Array的数据类型？（typeof不可以，instanceOf,object.prototype.toString().all()）

  15. CSS的选择器哪些？优先级是什么？

    场景题：div .ab{} 和 .ab div{}哪个效果更好一些？为什么？

  16. 关于数组的操作问了很多：map()和forEach()的对比

    1）如果只是遍历数组不修改用什么?（应该是使用forEach吧）

    foreach的用法（function(item,index){},this）, this默认undifined

    2）如何删除数组中的元素（splice(stratIndex,
    count , content…)}）每个参数的含义，如果第二个参数设为0什么意思？

    3）你刚才说的slice()是在原数组上操作吗？（不是，生成新的，返回一个新数组）

    那splice呢？是在原数组上面修改的吗？

  17. ES5中的什么属性可以清除掉?

编程题：

  1. 程序结果分析
for(let i = 0; i < 5 ;i++){
   let i = 3
}

会不会报错？为什么？（依旧是考察变量的提升）

  1. 升序数组，求和为num的两个元素。（双指针）

  2. 数组的去重，时间复杂度 O(n)(不能利用Set) 实现方式：indexOf、Object、Map

提问：

Q：目前主要使用的技术栈是什么？ 基于React的H5 和 小程序都有

Q：业务覆盖范围有哪些？理财啊，黄金啊之类的金融相关的内容

二面记错面试时间了，约的时候就以为是十点钟，在日历上标记了也是10:00，所以10:20的时候去问了HR以为是面试官迟到了，之后接到电话赶紧给面试官道歉！😢

蚂蚁二面

时间： 2020.03.25 10:30 - 11:06

1.有用过Canvas？和Svg的区别（绘制图片的格式，Svg是矢量图；事件处理器之类；适用范围不一样）

2.说一下项目吧？有什么难点和亮点

介绍了大概15min项目

3.了解Flex布局吗？主轴和交叉轴讲解下

  1. 三列布局讲解下(flex实现)

  2. webSocket和传统的axios轮询的区别？

  3. 跨域有什么了解？有没有实现跨域的方式？对比jsonp和Cors

  4. 如何实现深拷贝？为啥要深拷贝？

  5. 熟悉node吗？有用过吗？

  6. ES6中的新语法用过没？跟我讲下箭头函数吧？

  7. 浏览器从输入URL到加载页面发生了什么？

  8. cookie,sessionStorage、localStorage的区别

  9. 移动端你了解吧？那怎么办解决iphone的显示适配问题

  10. 事件的传递，监听

算法题：

使用js实现一个洗牌的函数



/*洗牌函数的封装*/

function getRandom(min,max){

    return Math.floor(Math.random() * (max - min +1) + min);

}
function shuffle(arr){
    //不修改原数组
    let _arr=arr.slice();
    for(let i=0;i<_arr.length;i++){
       let j=getRandom(0,i);
       let t=_arr[i];
       _arr[i]=_arr[j];
       _arr[j]=t;
    }
    return _arr;
}

提问:

Q：对实习生的管理？会有那种职位的集体培训之类吗？

A：是直接边干活边学习的~~~

Q：谈了下自己的缺点，React还不是很熟练

蚂蚁三面

时间： 2020.03.28 12:34-13:01

  1. 浏览器输入URL到解析的全过程

  2. 在这个过程中，我们前端可以从哪些方面进行优化？如何优化？

  3. 那CDN这种在里面担任什么角色，CDN的原理是什么？

  4. 首页白屏加载？

  5. 计网的ip是osi中的哪一层，tcp呢，是干嘛的

  6. 操作系统的内存管理方式

  7. 说一下项目的具体细节（讲了登录token验证之类）

  8. 你使用的是vue,那你觉得vue和react这些都有什么特点？

  9. 说一下你未来的工作规划

  10. 本科期间有什么项目吗？承担什么职责？选择前端？

公司： 字节跳动
部门： 头条研发
时间： 2020.03.25 14:30-16:39

字节一面

简单的自我介绍，项目中的技术之类，提到什么问什么

  1. 项目中的websocket具体实现，有没有测过触及率

  2. 事件传递的阶段（事件捕获,处于目标，事件冒泡）

  3. 手写addEventListener实现监听

  4. 什么时候使用onclick ？ 什么时候使用addEventListener？参数有几个？（x）

  5. 如果我们想捕获触发阶段的事件怎么办？ （我后来才明白面试官是在牵引我）

  6. v-if 和 v-show的区别

  7. 一个url里面有哪些成分？给出一个网址分析下

  8. DNS解析的原理（x）

  9. CSS的盒模型，如何实现的？

  10. 谈一下深拷贝？以及如何实现

  11. typeof [] 和 []instance of Object的结果

  12. 手写下你项目中的throttle函数？有没有什么可以改下？

  13. 问了我项目的代码量

  14. 观察程序的输出结果

for(var i = 0； i < 5; i++){
  setTimeout(function(){
    console.log(i)
  },5)
}

如何让输出结果变为01234

  1. 爬梯子的算法题（青蛙跳台阶），递归与非递归

面试官人很好，还帮我解答了上面的onClick和addEventListener，我之前说感觉没区别，然后面试官让我去查下addEventListenter的可选参数setCapture，瞬间就明白了~ 让我稍等下，联系二面的面试官

字节二面

  1. 紧接着一面面试官的问题，问程序的执行结果（把时间5ms改成了1000ms）
for(var i = 0； i < 5; i++){
  setTimeout(function(){
    console.log(i)
  },1000)
}

这个是怎样的输出？每个1s输出一个还是怎样？解释下为什么觉得这样

  1. 如何使用异步？说说你理解的异步

  2. 又给了一个程序看运行结果，解释下为什么这样

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
}, 1)
console.log('script end')

（考察Promise以及异步）

实际的场景发生了改变，结合了Promise()

  1. setTimeout(func(){},1)会执行吗？为什么？ 4ms

  2. 说一下跨域吧，以及跨域的实现方式

  3. 自己从代理跨域延伸到了webSocket，顺带就结合自己的项目谈了谈

  4. 你的项目中实现登陆功能？多角色的登录？

  5. 你们在项目中实现清除token或者判断token过期？

  6. 了解webpack的打包中如何分块打包

  7. Router的底层原理（x）？怎么去实现name、path这些的管理

  8. webpack里面的treeshaking和 code splitting(不了解，所以说了相关的webpack的机制)

  9. 结合项目谈Vuex的状态管理（mutation、action、state）

  10. 说一下Vue中的MVVM的模式

  11. 跨域中的JSONP有什么局限？CORS中怎么设置Http？服务端和前端？

题目1： 手写call

Function.prototype._call = function(ctx) {
}
fn.call()
fn._call()

题目2：

for (var i = 0; i < 5; i++) {   
   setTimeout(function () { console.log(i) },1000); 
}
console.log('script start')

let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})

setTimeout(function(){
    console.log('settimeout')
}, 1)

console.log('script end')

题目3：请写出一个可以生成整形随机数数组(内部元素不重复)的函数，并可以根据参数设置随机数生成的范围和数量，例如：函数madeRandomList(a, b, c)，可以生成 [a, b] 范围内，长度为 c 的随机数数组

题目4：DFS深度优先遍历DOM树[“div”, “span”, “a”, “div”, “a”, “span”, “p”]
DOM树

这个开始没思路，因为对DOM操作太不熟悉了，然后面试官跟我讲，说下树的深度优先遍历也可以，感觉面试官真的非常Nice啊！

灵活一些的问题：

  1. 和前端的接触以及交往过程
  2. 平时都是怎么去了解前沿资讯呢？最近有了解什么吗？
  3. 聊起了cookie的新特性，然后还聊了下前端组件的智能化
  4. 我看你有自己实现项目和博客
    （注意，在这个过程中我一直犯了一个很严重的问题就是，我看你们阿里的…balabala,55555555我要是面试官当场灭灯了，而且我面试完半天才想起来）

提问环节：

  1. 部门的主要业务
    多媒体，音视频流之类的处理
  2. 感觉Node是前端必备的，但我觉得我还很多需要学，请问师兄有没有什么好的学习建议？
    建议还是扎实的学习还有实际的操作，真正的上手在项目中做才能够学到东西，其实做技术的都是这样的，只是去背知识点是不行的，要深入学习，还有掘金社区之类的文章虽然有的确实不错，但你会发现是不够系统的，非常零散。学习知识还是要深入扎实的学习

字节三面

时间： 2020.03.30 11:30-12:30

  1. 说一下单点登录（我上来絮絮叨叨说了半天项目中登录逻辑的实现，直到面试官重新说了一遍）SSO

  2. ES6的新属性

  3. Promise以及Promise中的race方法

  4. 谈谈你对缓存的理解

  5. CSS中进入进出动画的实现

  6. AI看图作曲项目中负责的内容

  7. 小程序的生命周期（应用&页面）

  8. JS实现数组去重的多种方式

  9. 建议：对专业术语都不清楚，知识点的掌握有点囫囵吞枣，没有真正理解Set的概念，稳固扎实，简历的项目很简单

  10. 学习计划，学习前端的时间

  11. PC端的开放平台toB产品

字节HR面

时间： 2020.03.31 11:15-11:46
ZOOM视频面

  1. 几场面试下来，你的面试体验如何
  2. 本硕都是计算机专业，为何要跨校考研？
  3. 家在北方，为什么想去武汉读大学？
  4. 本科成绩优异，为什么没有保研？
  5. 考研之后的实习情况了解
  6. 你的简历是前端，对从事前端有什么看法吗？
  7. 平时学习前端的方式或者学习方式
  8. 实验室的方向，以及平时在实验室的工作
  9. 依次详细问了每个项目以及我承担的角色
  10. 如何看待10点下班这件事
  11. 目前有没有在聊其他的公司
  12. 入职时间，实习时长
  13. 秋招有什么打算
  14. 转正的流程介绍（希望实习长度要达到）

在这里必须说，我爱死了字节的效率！！！

.

Author: Casey Lu
Link: https://caseylu.gitee.io/2020/04/01/23-ma-yi-jin-fu-zi-jie-tiao-dong-qian-duan-mian-shi/
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Casey Lu !
Javascript CSS HTML Vue
赏
评论
 Previous
HTML5存储 HTML5存储
本文主要介绍三种HTML5的浏览器端存储方式，以及每种方式具体的实现原理，操作规范以及它们各自的优缺点和适用场景，同时也会介绍一些非主流的存储方式。 一、关于浏览器存储 在H5之前，有cookie 和 userdata 1） cookies
2020-04-03 前端基础
HTML
Next 
三月的笔下流水 三月的笔下流水
2020年3月份，我想这是我读研以来最辛苦的一个月份，习惯了接近二十年校园生活的襁褓，面对求职这个接下来人生的重要的转折阶段，二次逆风成长。 挫折乃成长良药 这个世界上一路顺畅通关打怪的人绝对不占据多数，除非实力超群或者幸运满分。之前遇到的
2020-03-31 人生杂谈
Life
  TOC