一年前端,字节阿里面经&个人经验分享

27,921 阅读8分钟

前言

好久没总结文章啦,最近这段时间一直在准备面试,这篇文章也算是分享一下面经以及个人的一些经验及学习方式,给同样一年经验的同学参考一下,水平有限,大佬们看看就行!

字节跳动

字节当时是没有内推,直接BOSS上投的(反面教程),很快有HR联系约了面试

一面

  • 项目相关的问题(项目背景、担任角色、负责的任务、难点等等)
  • 手写Bind函数
  • 实现一个算法,字符串包含"[]" , "()" , "{}",判断是否正确闭合
  • 前端路由了解吗?有什么区别?( 提了下hash路由和history路由,以及一些差异,这块答得不是很全面)
  • ES6的语法用过哪些?letconst语法,然后Promise、箭头函数等等)
    • 用过symbol吗?有哪些用处?(提了下避免命名重复、实现私有变量、在callapply中就有用到)
  • 前端性能监控有了解吗?(这块主要问了错误的类型以及监控方式,类型没答全,监控方式说了try-catchPromise.catchwindow.onerror,因为不是很了解所以没法详细说说)
  • 说说白屏优化的方式有哪些?(同样不是很了解,只是简单的提了懒加载、预加载、预解析、按需加载、缓存、骨架屏这些方案)
  • 节流的作用?哪些场景下有用到?
  • 说说浏览器的消息循环机制
  • transition和animation的区别?
  • 说说requestAnimationFrame的作用,并实现获取每秒的帧数(当时这个获取每秒帧数的实现卡壳了,但思路对的所以让过了)

二面

  • 项目相关的问题
  • 你能说说babel是怎么解析语法的吗?
    • 词法分析和语法分析的作用?
      • a=1;会进行词法分析吗?
      • 怎么进行词法分析的?(关键字)
    • 词法和语法谁先执行?
    • 哪些算是词法哪些算是语法?
    • const const a=1;词法分析能通过吗?是到语法分析才报错吗?
  • 写个题目吧,给个树形节点,包括value和children,求所有节点的value和
    • 你觉得递归有什么缺点?(提了下爆栈和内存溢出)
    • 爆栈属于什么类型的错误?系统错误还是什么?(没答上来...)
    • 针对你说的问题怎么改进代码?(说了下尾递归和将递归换成迭代,想了大概五分钟用DFS实现了)
  • 浏览器的控制台是怎么渲染的?说说在浏览器控制台输出console到输出显示的过程?(直接蒙了,看我不会就问浏览器显示的过程,接下来这块基本全程蒙蔽)
    • DNS解析是去哪找的缓存?
    • 怎么找到DNS服务器?
    • DNS怎么解析出IP的?
    • 解析出ip地址后怎么找到对方?
    • 握手为什么要三次?万一第三次没有发出去呢?
  • 聊一个明信片问题吧,你有一个明信片,要寄给一个陌生人,有几个问题
    • 你怎么保证不被快递员知道内容?(包上信封,这里埋了个坑,没有联想到另一篇看过的鸽子通信里面,用箱子锁上更加可靠)
    • 快递员把信封拆掉呢?(在信的内容里添加线索,在信封外加上线索进行一个解密对应,当时没get到面试官针对上面的提示)
    • 信封被换掉了呢?(找权威的邮局加上印章)
    • 陌生人怎么知道哪些是权威的印章呢?(人手一份邮局的对照表)
      • 那印章发生了更新呢?(邮局通知或者自己去更新)

三面

  • 项目相关问题
  • 写个题目吧,复原Ip地址

总结

一面问题算是前端比较常见的知识点,虽然很多没用过但至少听过,所以都能说一些,好好准备应该就没问题。
二面基本围绕一个知识点不断追问,很多地方都没答好,包括最后明信片问题,因为前面没答好紧张了也答得比较混乱,我觉得自己是挂了,但面试官还是给了三面的机会。
三面问题问的不多,关键算法题没做出来(太菜了TAT),结束后特地学习了下回溯,把答案给补上了。最后综合起来还是没通过,被另一个部门捞起来重新开始面试。

字节跳动换部门面

一面

  • 项目相关的问题
  • css实现一个正三角形
  • this相关的几道题目
  • 原型链相关题目
  • 说说new的过程吧
  • 实现一个发布订阅模式
  • 说说header常见的字段有哪些?作用分别是什么?(讲了一些常见的)
    • Cookie有哪些字段?分别什么作用(讲了SameSiteHTTPOnly
    • Access-Control-Request-Method作用?
  • CSRF怎么防范?
  • 了解前端错误监控吗?(回答跟之前飞书差不多)
  • 知道单页和多页应用怎么通讯吗?(理解错了,以为问单页和多页的区别,被纠正后说不太了解就过了)
  • 说说HTTP和HTTPS的区别?(主要从HTTPS解决了什么问题出发分点描述)

二面

  • 项目相关问题
  • 让你来实现一个扫码支付的功能你会怎么实现?(粗略从前端和后端两个角度讲了下思路)
  • 如何防范iframe被钓鱼网站嵌套导致的安全问题?(没有思路。)
    • 面试官提示,iframe如何判断是否被嵌套?(想到可以通过top变量值是否等于window来判断)
  • 实现一个深拷贝你会考虑到哪些点?(基本参考之前看到的文章回答,原文:如何写出一个惊艳面试官的深拷贝?)

三面

  • 项目相关问题
  • 实现两个有序链表的合并(写的时候有点紧张第一次没跑通,面试官温和的让我debug一下,调了一会儿跑过了)

四面

  • 项目相关的问题
  • Redux的实现原理你了解吗?(没用过,提了下应该是发布订阅模式?面试官说核心更精妙一点、让我之后去看看)
  • 聊聊你知道的设计模式有哪些?(讲了单例、策略、装饰器、发布订阅、享元)
    • 适配器模式了解吗?(不了解。就过了)
  • 讲讲函数式编程的特点?(回答了复用性好、无状态、幂等、面试官说还有延时执行(比如柯里化))
  • 主流框架了解哪些?哪个比较熟悉?(Vue,看过部分源码)
    • 给你一段template,写出编译成render函数后的代码(有个插值三目表达式没写出来)
  • 说说Vue的依赖收集过程吧
    • 当数据发生变化后,依赖会重新收集吗?
  • 讲讲webpack的原理吧,你掌握到哪种程度?(熟悉优化插件、打包原理和热更新原理,看过核心源码)
    • loaderplugin实现过吗?知道原理吗?(讲了前者是函数,后者是类,两个编写形式的不同,同时在源码中的执行位置)
    • 说说modulechunkbundleasset的区别?
    • chunk一定是通过入口生成的吗?(不一定,import动态加载的模块也会作为一个chunk
    • css-loader的作用?(处理依赖关系)
    • css中的路径是如何解析的?(应该是通过file-loader解析(不太确定))
    • css-loader和file-loader如何一起工作的?(不太清楚了。)
  • 给一段代码,要求说出打印结果
setTimeout(function() {
    console.log('setTimeout1');    //8
    new Promise(function(resolve) {
        console.log('promise0');    //9
        resolve()
    }).then(function() {
        console.log('settimeout promise resolveed');    //10
    })
});
setTimeout(function() {
    console.log('setTimeout2');    //11
});
const P = new Promise(function(resolve) {
    console.log('promise'); //1
    for (var i = 0; i < 10000; i++) {
        if(i === 10) {
            console.log('for');    //2
        }
        if (i === 9999) {
            resolve('resolve');
        }
    }
}).then(function(val) {
    console.log('resolve1');    //5
}).then(function(val) {
    console.log('resolve2');    //7
});
new Promise(function(resolve) {
    console.log('promise2');    //3
    resolve('resolve');
}).then(function(val) {
    console.log('resolve3');    //6
})
console.log('console');    //4

总结

总体来说,面试的难度有但都是平时会使用到的知识点,而且面试不是一定要第一时间给出最佳答案,而是一个思考讨论的过程,这一点我觉得也非常重要。
另外面试官能看到之前的面试记录,所以问问题的时候基本会避免重复的问题,可能也考验你的知识广度吧。
比较幸运的是,走完一轮后还是通过啦。

阿里

一面

  • 五道笔试题,40分钟完成
    • 根据url字符串解析出参数
    • 手写setInterval
    • 翻转局部链表
    • 给一个字符串,筛选出所有的数字
    • 实现一个倒计时组件
  • 项目相关的问题
  • 说说vue的响应式原理?
  • 说说loader、plugin的原理?举几个例子(讲了两者区别,提了style-loaderhtml-webpack-plugin
  • 平时学习的渠道?
  • 说说https和http的区别?(频率挺高的,都背顺了hhh)
    • 了解证书颁发的流程吗?(知识盲区,不太了解)

二面

  • 项目相关问题
  • 你觉得有什么亮点能够分享的吗?(主要讲了项目中的内存管理)
  • 说说虚拟Domdiff原理吧
  • 对将来的一个职业规划

三面、四面

  • 项目相关问题、深入和拓展

总结

相对来说,阿里这边一面同样考察的是前端基础知识,但项目相关的问题、以及一些开放式的问题考察的会更多一些,发挥的空间也会更大一些。

个人经验分享

分享完了面经,接下来分享一下个人经验以及学习方式,当然因为水平有限,所以更多的是参考作用。主要从平时的准备以及面试的准备两方面进行分享:

平时的准备

平时的准备不外乎就是学习,但不同的方式方式带来的收益和效果也是完全不同的,我自己就总结了几个重要的点

有效学习

跟这个概念相对应的就是无效学习,意思就是花时间学了等于没学。我认为有效学习关键可以概述成这几点

1.学有用且经常用到的东西

比如我之前觉得Python有意思,花了一个月时间去学习;觉得Docker有意思,同样花时间去学了;主流框架热门,我都得学起来;还有很多类似的东西,学完之后很久没有用到后,很快的忘了,这样就不算有效学习了。

2. 对知识点做总结

好记性不如烂笔头,很多前端基础知识都偏理论,工作中不一定会频繁用到,可能当初花了很多时间学懂了,过一段时间又得重学一遍,那么学习时做的总结或者笔记就能帮你更快的重温知识点。

3. 建立知识体系

这一点我觉得是想要走的更远最重要的一点,我当初分享过一篇文章 来整理一份专属知识图谱吧 ,之前一直零散的学习,直到去年国庆我才跨出这一步,认真的梳理了下自己的知识体系。这样在学习的时候能够根据优先级规划时间,同时能够直观的看到学习的进度,迅速建立自信心,得到正反馈。

更多的时间和更高的效率

毫无疑问,大部分的人其实都不是天赋型选手,那么只能通过花更多的时间和提高效率来学习。

1.更多的时间

其实时间这块没什么捷径,要么利用好零散的时间,要么挤出更多连续的时候,像我个人就不太擅长利用碎片时间,所以我一般会利用好早上、晚上和周末的时间来学习。

2. 更高的效率

说到效率,其实是因为学习的时候很容易被干扰打断思路,这里也有一些常见的小技巧

  • 学习前看看鸡汤类视频、或者优秀的人的博客,带着动力去学习
  • 条件允许的话不要在家里学习,自习室、图书馆、咖啡馆都可以,更容易进入状态
  • 排除手机干扰,可以用番茄钟之类的软件,学习一段时间起来走动一下(我自己用的是Forest)

面试的准备

如果平时都有好好地积累的话,那么面试的时候只需要针对性做一些准备就行

简历

简历其实是非常重要的,虽然很多人强调过了,但是包括我在内的很多人其实还是没有重视起来。
我一开始觉得简历只要能让我通过筛选那关就行了,但实际上面试官的问题很多时候会围绕你的简历展开,你在斟酌后添加到简历上的内容很可能成为你的亮点或者巨坑,所以可以找人帮你好好修改一下。

面试相关的知识点

刚刚提到了面试的时候,面试官一般会围绕你的简历内容进行提问,那么写到简历里的掌握内容就需要好好斟酌了。
毫无疑问,把自己觉得有把握有亮点的技术栈写进去,掌握程度的把握网上有很多文章介绍我就不说了,同时围绕着写进去的内容进行复习巩固。这里有个需要注意的地方,千万不要为了强行把某个技术栈写进去而花大量时间去学。

举个例子,很多公司要求React技术栈,然后你为了对标这个要求,花大量的时间去准备并且写到了简历上。
一方面在面试冲刺阶段,你一定没有足够的时间去完全掌握一个新的知识点,另一个方面没有项目支撑,在面试阶段经不住提问,只会成为减分项。

项目经历及难点

这一块有啥说啥就行,可以自己自言自语的口述几遍,多说个几次就能比较顺利的表达了。
如果一开始不知道自己的项目有哪些难点或者亮点的话(我一开始就遇到这个问题),可以找一个比自己更资深的朋友,把自己的项目一点一滴的详细口述给他,让他从他的角度给你一些意见以及参考。

面试复盘

面试本身除了能够校验自身的知识水平,也是一个很好的学习过程,时间允许的话尽可能多尝试面几个公司,并针对没有回答好的问题去学习提高,查漏补缺。面试完以后反思一下不足的地方,在下一次面试遇到类似的问题就能更从容的应对。

总结

这篇文章主要还是分享面经和一些个人总结为主,没有涉及到很多知识点方面的分享,不过网上这类文章应该比较多且全面啦。希望这篇总结分享能够对一些年限不高,目前正在求职、或者在看机会的同学有所帮助~
之后应该会把这段时间复习的知识点总结成文章进行分享,感兴趣的同学可以关注一下后续~

写在最后

  1. 很感谢你能看到这里,不妨点个赞支持一下,万分感激~!
  2. 以后会更新更多文章和知识点,感兴趣的话可以关注一波~