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

前言

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

字节跳动

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

一面

项目相关的问题（项目背景、担任角色、负责的任务、难点等等）
手写Bind函数
实现一个算法,字符串包含"[]" , "()" , "{}",判断是否正确闭合
前端路由了解吗？有什么区别？（提了下hash路由和history路由，以及一些差异，这块答得不是很全面）
ES6的语法用过哪些？（let、const语法，然后Promise、箭头函数等等）
- 用过symbol吗？有哪些用处？（提了下避免命名重复、实现私有变量、在call和apply中就有用到）
前端性能监控有了解吗？（这块主要问了错误的类型以及监控方式,类型没答全，监控方式说了try-catch、Promise.catch和window.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有哪些字段？分别什么作用（讲了SameSite、HTTPOnly）
- Access-Control-Request-Method作用？
CSRF怎么防范？
了解前端错误监控吗？（回答跟之前飞书差不多）
知道单页和多页应用怎么通讯吗？（理解错了，以为问单页和多页的区别，被纠正后说不太了解就过了）
说说HTTP和HTTPS的区别？（主要从HTTPS解决了什么问题出发分点描述）

二面

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

三面

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

四面

项目相关的问题
Redux的实现原理你了解吗？（没用过，提了下应该是发布订阅模式？面试官说核心更精妙一点、让我之后去看看）
聊聊你知道的设计模式有哪些？（讲了单例、策略、装饰器、发布订阅、享元）
- 适配器模式了解吗？（不了解。就过了）
讲讲函数式编程的特点？（回答了复用性好、无状态、幂等、面试官说还有延时执行（比如柯里化））
主流框架了解哪些？哪个比较熟悉？（Vue，看过部分源码）
- 给你一段template，写出编译成render函数后的代码（有个插值三目表达式没写出来）
说说Vue的依赖收集过程吧
- 当数据发生变化后，依赖会重新收集吗？
讲讲webpack的原理吧，你掌握到哪种程度？（熟悉优化插件、打包原理和热更新原理，看过核心源码）
- loader和plugin实现过吗？知道原理吗？（讲了前者是函数，后者是类，两个编写形式的不同，同时在源码中的执行位置）
- 说说module、chunk、bundle、asset的区别？
- 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-loader和html-webpack-plugin）
平时学习的渠道？
说说https和http的区别？（频率挺高的，都背顺了hhh）
- 了解证书颁发的流程吗？（知识盲区，不太了解）

二面

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

三面、四面

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

总结

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

个人经验分享

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

平时的准备

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

有效学习

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

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

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

2. 对知识点做总结

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

3. 建立知识体系

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

面试的准备

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

简历

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

面试相关的知识点

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

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

项目经历及难点

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

面试复盘

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

总结

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

写在最后

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