前言
本人双非学校大三计科专业，不打算考研选择了找工作，于是就想在这个假期尝试一下简历投递，通过内推开始了字节跳动一面，从内推到一面大概过了一周的时间，清楚的记得一面是2019.12.15下午五点。一面开始前紧张的不得了各种抓耳挠腮，好不容易熬到了面试开始还极其紧张，讲话都秃噜好几次了，一面基础面没有一点项目具体题目我就不说了，面完了的时候整个人都是虚脱的😱觉得自己大概率是无了，但是令人惊喜的是在第二天准备出去散心的时候接到了hr二面通知，整个人兴奋的飞起，时间约在了2019.12.17中午十一点，又好不容易熬到了面试开始，二面项目加手撕代码十分酸爽，问项目的时候还能乱七八糟的扯一扯，手撕代码的时候十分尴尬像挤牙膏一样面试官提示一点我写一点，经过了一个小时终于结束了，内心OS:完蛋。但令人窒息的是，隔了不到十分钟面试又来了，我简直就是黑人问号，我都跟小伙伴约好去哪里散心了(小伙伴得知我三面的时候暴打我欺骗感情)，三面项目加系统设计有惊无险顺利度过到hr面，跟hr谈了十几分钟，hr跟我说最迟两天就可以发offer了，如今已经入职字节3个月了。
一面
- git 缓存区工作区
- 虚拟DOM diff 发散一下思维???
- 回流 重绘
- rem em
- React新特性 新钩子 HOOKS HOC
- SSL握手过程 对称加密非对称加密
- 深拷贝
- 箭头函数的this
- node 事件循环
- 数据库索引
- fs读取文件转buffer
- 性能优化 多种方案
- http缓存
- 打包的性能优化 将业务和依赖分开打包，依赖部分做缓存
- 容器高度是宽度的两倍 多种写法
- 自适应 多种办法
- React的优秀之处 源码 发散一下思维???
其实在一面的问题里边大部分问题是相当基础的要不是自己多嘴也不会去问我源码相关的东西的，就是感觉问数据库索引和数据库索引的数据结构这些有一点点难受，因为并没有深入了解过，还有一个点就是面试官十分看中node部分，深挖了一下node的事件循环和各种包的实现。
二面
我主要有四个项目，一个是next搞的比赛系统(类似于OJ)，一个是自己实现了一个cli（npm install sacc-cli -g），一个是专利搜索系统，最后一个是社团主页
面试官主要针对的是我的cli这个项目
Q:我怎么去实现的
A:通过自己定义模板放到git上通过执行git clone来实现，因为我放了很多个模版所以在写脚本的时候会让用户先做一个选择然后根据用户的配置去clone相应的仓库。
Q:遇到的难点，怎么解决的
A:无法判断操作系统而准确的执行相应的shell命令，解决方法是通过让用户选择自己的操作系统，并不能自己判断（面试官建议我去看看vue-cli 3的源码 后面问了一下vue-cli 2的源码）还有一个就是包版本更新麻烦需要自己手动更新而且仓库也不少成本比较大，通过自定义依赖配置和文件夹配置然后根据配置去新建项目，降低更新成本和修改成本，这种方法就不通过clone来实现完全是通过脚本来实现。
Q:打开我的git看了我的代码提出问题（有一个记不得了）
-----------------------------------------
async (err, projectName, tplName) => {
spinner1.stop();
console.log('√文件目录生成成功')
if (err) {
tip.fail('文件名称重复!');
process.exit();
}
spinner2.start();
}
-----------------------------------------
//以上是我的代码 error-first callback
abc('close', cb)
完成一个 convert 函数
目标：将 error-first style cb 转成 Promise 调用的方式。
const abd = convert(abc);
try {
const param = await abd('close');
}
catch (err) {
// handle err
}
function convert() {
//...
}
A:写的过程曲折离奇，面试官提示了好多次才写出来的，感觉整个人都懵了
function convert(fn){
if(!fn){return }
return function(str){
return new Promise((resolve,reject)=>{
fn(str,(err,arg)=>{
if(err){
reject(err)
}else{
resolve(arg)
}
})
})
}
}
Q:有没有什么想问的
A:没有了
总结下来，二面的时候前半段面试官还是对我比较欣赏的，开始写代码以后就没有什么特别亮眼的表现了，把自己前面的加分给扣完了，万幸还是过了。
三面
三面主要也是针对我的项目，首先让我介绍了一下我做过的东西，挑简历上有的介绍没有的就随便提一下。
Q:看你简历上写着做过数据可视化，讲讲你是怎么去做的
A:主要还是通过现有的解决方案，比较复杂的部分是去设计可视化部分怎么去展示以及数据的转换，把复杂的业务场景拆解得粒度更小
Q:数据转换具体说一下
A:说的比较简单就是说了一下操作数组对象转换成相应的数据格式（拍平、序列化等等）以及通过官方文档里给的transform
Q:当量级变大肯定会变慢，怎么去解决
A:首先量级变大肯定是数据量变大了，这个可以去做本地缓存（比如存localstorage），更新频率高的交给http缓存。渲染怎么去优化我没打上来就是简单说了一下为什么会变慢（触发回流什么的）以及怎么去解决减少触发回流
Q:你之前提到浏览器的渲染机制详细展开说一说
A:简单的讲了一下从url到页面渲染经历了什么，网络协议那部分简单略过重点在渲染流程，以及重绘和回流是怎么去判断的
Q:为什么会去做cli
A:曾使用过create-react-app和vue-cli发现都有一个通病就是装了太多我不需要的东西，我自己制作出来的cli相对于会比较纯净只拥有一些基础的依赖，还有有时候我们并不需要最新版的依赖而是特定版本的依赖
Q:设计一个input组件类似于百度输入框
A:零碎的说了几点
- 默认热词（网页生成时拿到）
- 类下拉的一个提示框，当聚焦input的时候可以根据方向键使用，上下的时候分别聚焦选中部分
- 对用户搜索词做一些浏览器缓存（感觉没啥用
- 节流（提示词部分
- 还有一些公式化的设计标准等等 Q:为什么会选择前端 Q:职业规划
总结三面虽然面试官看起来像是没有感情的杀手但是人还是挺好的，给了我很多解决问题的思路引导我提出解决方案。
总结
准备好自己的项目
我觉得项目很关键，对于我这次面试来说良好的基础只是一个简单的敲门砖，更加重要的是去如何选择放到简历上的几个项目，在选择项目的时候最好选择不同质的项目，对于一个入门不久的前端来说很容易形成一个误区就是我的项目都是基于某某框架，以至于造成了
- React + React-Router + Redux 某主页
- React + React-Router + Redux 某后台管理系统
- Vue + Vuex + elementUI 某H5
这对于面试官来说无异于是同一个项目，本质上都是一样的，三个项目列在这只能看出你用React多一点同时也会一点Vue而这一个点对于所有参与面试的前端基本都具备的，那么就需要一些抓人眼球的项目来吸引面试官的注意了，如果不这样做那么可以再深入的去了解一些React源码相关的东西以此来突出你的核心竞争力。
扎实的基础很重要
基础很重要我觉得都不需要我再去重复了，因为很多同学都是挂在了基础这一块上面，对于前端来说要学习的东西太多太多那么在面试的时候我们学到什么程度才能算是基础不错呢，在这里我觉得大家可以去拜读一下三元大佬的文章，我就不多说了。
运气
这东西玄之又玄，万一你面了一个根本不缺人的部门也没办法。所以面试前一定要了解你要面试的部门和面试的情况～
讲讲我
我其实没什么面试经历，因为我一共就面了一家公司，那就是字节，然后一个星期不到我就拿到了offer所以也就没有再面试了...其实投字节也是一个意外，当时在复习期末考啥也没准备没刷题没回顾项目只准备了下周考毛概，但是在字节的学长突然跟我说打算招人了，我就打算试试，没想到就过了...有时候吧，敢于去拼也是很重要的，期末考和面试并行真的是让人很难受，索性结果是好的，在这里也希望大家旗开得胜～
