2020三元同窗春招阿里淘系、阿里云、字节跳动面经 & 我的成长经验分享 | 掘金技术征文

本人今年 211 本科大三下，掘金六级博主，最近投实习，一共投了三家，阿里的淘系和阿里云，字节跳动的抖音，固然都是找人内推的，结果简述以下:

1. 淘系二面经过，但入系统只能选择一个，后来选择了阿里云；
2. 阿里云走完了五轮面试，如今等 offer ；
3. 字节跳动抖音三轮技术面+一轮HR，如今已经收到了前端架构组的 offer。

首先把面经分享给你们，因为技术水平和经历的不一样，我不敢保证个人面经问题对你有任何的参考性，但确实都是在真实的面试场景中遇到的，我所作的只是保证真实性和完整性。

字节跳动三轮技术+一轮HR

3月17日下午 抖音架构组前端实习生 一二三面 + HR 历时约 3.5 小时。

这份面经不只仅列几个题目就完事儿，中间掺杂了一些我的的一些表现以及和面试官的互动，让你们能更完整地感觉到整个过程。另外，大厂面试嘛，你懂的，面试官喜欢从一个点切入往深了问，因此在会有很是多嵌套的问题，我以为这才是真正的面试场景，而不是一条一条堆砌题目，跟作考试试卷同样。

抖音一面(45min）：

• 自我介绍一下

• VueRouter 的原理你能不能说一下呢？(两种路由方式说了一下)

  • 对于 History 路由而言，你以为在服务端是如何作路由分发的呢？(愣住，面试官接下来跟我解释了一波)

• 你说你看过 Vue 源码，能不能介绍一下 Vuex 的 Mutation 和 Action 的区别吗？(mutation作同步操做，action通常用于异步)

  • 为何要设计出 Mutation 和 Action 这两个东西？(我开始不是很清楚，扯到 Redux，和面试官交流后，一致赞成 Action 做为业务逻辑的封装更合适，提供了更大的自由度)

• 计算机网络看你写过文章，我就不问了。(我: 笑...)问你一点操做系统的哈，能不能说说磁盘寻道算法？(思考了一下，说了三种，FIFO，最短优先，电梯算法)

  • 那你能不能说一说最短寻道时间优先的缺点是什么？(愣住，面试官耐心给我解释其实会形成远处的任务饥饿问题)

• 进程和线程的区别(解释了一波，顺便把Chrome为何从单进程转成多进程架构说了一下)

  • 知道哪些进程间通讯(IPC)的方式？ (主从式、会话式、消息-邮箱机制、管道、共享内存、Unix Domain Socket，而后跟他讲我看过 Chromium IPC 的源码，内核里面把之前的 ChannelPosix 换成了 ChannelMojo，从而达到线程安全的目的，顺便解释了下线程安全，面试官表示很欣赏，说这个都看过，看来你学了很多)

• 能不能说说从输入 URL 到页面渲染经历了什么？(被问过不少次了，DNS 解析过程，HTML词法分析和语法分析，CSS解析， 合成图层、合成线程调用光栅化线程池，生成位图后浏览器进程间通讯过程，显卡缓存与显示器的关系，面试官说能够)

• 给你一道算法题，盛水最多的容器。直接给我最优解吧。

  图片标题

  我花了 15 分钟写完了，结果能跑通。给他解释了一下思路，他说这个算法核心的思路是什么？我说短板效应吧，他说实际上是贪心。没答上来，感受比较尴尬，我灵机一动，说可能贪心已经潜移默化到个人思想里面了吧，他大笑，说能够、很强，稍等一下子去叫二面面试官。一面就这样愉快地结束了。

抖音二面(1个小时)

这个面试官就比较高冷了，全程不露脸，说话语气特别凝重，可能沉默 5 秒钟而后问你一个很是严肃的问题。

• 简单的自我介绍

• ES5写一个数组去重(刚开始写了一个O(n^2)时间的)

  • 能不能优化？ (我问能不能用新空间，他说能够，而后写了一个O(n)时间的)

  • 能不能区别开数字和字符串？(想了想，最后仍是用indexOf方式，最优的没想出来，面完猛然想出来了，当时脑子有点乱)

• 讲一讲 HTTPS 加密(对称加密有AES + CHACHA20, 分组模式之前有 CBC、CTR，TLS1.3 中只剩下 GCM，非对称加密 RSA、ECDHE)

  • 怎么握手的呢？(讲了三个版本：传统 RSA、TLS1.二、TLS1.3, 后面也讲了 TLS1.3 的 Session ID、Session Ticket 以及 PSK)

    • HTTPS 如何保证数据是否被篡改？(说了下有签名的过程)

      • 签名是什么原理(私钥加密，公钥解密，比对哈希摘要)

        • 你知道哪些哈希摘要算法(Sha256, Sha384)

• 你能不能介绍一下你的项目(说了下项目遇到的挑战，说了这几点: 1. 怎么解决闭包陷阱。2. 经过 EventLoop 解决 transform 失效的问题)

  • 能不能说说你对 EventLoop 的理解(宏任务-微任务-UI渲染)

    • 若是要在UI渲染以前作一些事情你会怎么办？(我会启动微任务执行吧)

    • requestAnimationFrame 在 EventLoop 中是一个什么位置？(给他解释显示器和浏览器的 Vsync 信号，而后rAF首先执行，他貌似不满意，我请教了他一下，给我解释实际上rAF会在UI渲染以前)

      • 分离图层作动画有什么好处呢？(给他讲了分层的原理，经过设置 CSS 的 will-change 能够转换为一个图层，调用 GPU 加速)

        • 分离图层会发生重绘吗？(会)那既然重绘，它的好处在哪里？(不会影响其余的图层)

• 你以为你哪些技术比较厉害？(Vue 源码，浏览器，服务端渲染)

• 你说你看过 Vue 的源码，能不能说说 computed 属性为何可以在依赖改变的时候，本身发生变化？(我说 computed 和 watch 公用一个 Watcher 类，在 computed 的状况下有一个 dep 收集依赖，从而达到更新computed属性的效果，顺便跟他讲了computed Watcher如何跟渲染Watcher关联，以及 Vue 在二次收集依赖时用 cleanupDeps 卸载一些无用的 dep)

• 你以为你的优点是什么？(1.深度思考的能力 2.善于分享 3.社区影响力)

• 你对 webpack 了解多少？(我说了下 webpack 的一些优化手段，打包时间方面，预编译、缓存、缩小构建目标，说了大概十个插件，而后打包体积上，JS 和 CSS 的Tree-Shaking 怎么配置)

  • 你以为 CommonJS 为何不能作 Tree-Shaking ?

    • ESModule 既然是编译时加载，那它能够作到运行时加载吗，想过这个问题吗？(愣了一会，说webpack 有动态 import 的方式)

      • 写过 loader 和 plugin 吗？(实话实说，没有)那你知道二者有什么差别吗？(先loader后plugin)

• 你对将来的发展是如何规划的？(谈了谈我对五级工程师的见解，个人阶段目标是到达最低的第五级)

  • 你以为你在专业上的目标是怎样的？(成为领域前20%)

• 有什么想问个人？(问了下可能触及的技术栈，以及抖音在开源方面的打算)

抖音三面(1个小时)

这位小哥仍是比较和善的，聊的不少东西跟具体的技术细节就关系不大啦。

• 你是如何接触到前端的？为何要选择前端？为何不去搞 c++ 底层系统研发、后端、人工智能？(说了下个人见解，他表示承认)

• 对学校的课抱着什么样的心态？

• 作这个项目的初衷是什么？里面有用到专业上学到的知识吗？

• 若是每次要生成不同的 ID，你怎么来设计这个系统呢？(跟他聊了聊哈希冲突如何解决，他表示能够)

• 在学校应该学过 C 吧，你以为 C 语言在设计上有什么好或者很差的地方呢？(提了下虚基类，实在想不起来这玩意啥用了，顺带说了下多继承的问题)

  • 若是让你用 JS 来实现多继承的功能，你会怎么来作呢，或者用什么其余的方式？(说了下本身对于继承的见解，以及这个设计不太好的地方，而后更喜欢组合式的方式)

    • 好比说你是你妈妈的儿子，同时也是公司里的员工、学校里的学生，你怎么去设计出你这个实例呢？(将不一样的角色功能进行组合，而后实例化)

• 对前端的知识体系若是要分类的话，你怎么分类？(谈了谈将来前端发展的四个分支)

  • 若是基础知识要细分的话，你怎么来分？(说了下学习基础知识的三部曲，第一级应用，第二级原理，第三级建设社区和贡献代码，我以为我目前在第二级到第三级之间)

• 有想过去作一个开源的工具吗？(谈了谈本身对于开源的理解)

• 在学校有参加什么社团吗？(有，在学校的一个协会，带组内的人一块儿学习)

• 有什么想要问个人吗？(聊了聊面试官本身的技术经历，全程仍是蛮愉快的)

HR 面:(30min)

• 作项目的初衷在什么地方？

• 歌曲倍速播放的功能是怎么实现的？为何要想到这个？

• 公司的业务可能会压榨本身开源分享的时间，你会介意吗？

• 公司内的一些代码不能开源，和你本身的开源分享冲突了，你怎么办？

• 你为何不早点去实习？如今才开始找实习？

• 看了你的 GPA ，仍是蛮靠前的，你怎么平衡学校的学业和技术的学习的？

• 怎么看待别人在你博客下面发一些怼你的评论？

• 在学校有社团经历吗？

• 本身平时有什么兴趣爱好？

• 和室友关系咋样？

总体感觉

面试了一下午，前面三面连续说了过久，到 HR 面的时候声音已经嘶哑了，不过字节的面试体验仍是很是好的，效率至关高。自我感受还算不错，主要是由于两点:

1. 面试官问的问题都是引导性的，而不是死扣一个具体的知识点叫你填空，一般给一个很是宽泛的话题，让你去发挥，所以给了本身很是大的发挥空间，不过这也和本身前期充分的准备有关系。
2. 面试官尝试去问你一些更加深刻的问题，直到把你问住，这是好事情，由于他的水平通常在你之上，能问出深度来，说明他很重视你。

3 月 20 号，抖音 offer 如约而至。

淘宝两轮

淘宝一面

3月12日晚 淘宝一面(35min)

• 首先自我介绍，怎么学习前端的
• 能不能说说浏览器的缓存(灵魂之问，一时想不起来了，尴尬，寻求提示)
  • cache-control 有哪些字段？设置 max-age: 0 跟浏览器缓不缓存有关系吗？s-max-age 的做用？
  • 强缓存和协商缓存的顺序
• 能不能说说 Cookie 有哪些字段？(我说了 domain、path、httpOnly、sameSite的三种取值)
  • 还有吗？关于 https 的一个字段(擦，不知道，过吧)
• 说说箭头函数和普通函数的区别(说了写法，原型，this，还有呢？愣了一会，寻求提示)
  • 箭头函数的 this 是声明时肯定仍是运行时肯定？(运行时肯定吧)
    • 箭头函数能够 new 吗 ？ 说一说 new 的原理。
• TCP 三次握手
• 你应该对 React 原理很了解吗？(我打断了，React 原理不熟，问我 Vue 吧，后来问了一个 diff 就完事了)
• 从输入URL到页面展现发生了什么？(我说了大概 2 分钟 DNS 解析过程，被喊停，而后继续讲HTML解析，CSS解析，合成图层、合成线程调用光栅化线程池，生成位图后浏览器进程间通讯过程，显卡缓存与显示器的关系，大概说10-15分钟吧)
  • 重绘和回流了解吗？
    • 怎么进行优化？(说了一种批量操做，别的好像忘了，他提示我 DOM 离线操做也能够)
• 有没有了解过前端一些前沿的方向(说了flutter，dart，看过大家团队的 serverless 文章)
  • 了解过 WebAssembly 吗？(没有啊)
  • 了解过 PWA ?(我我的以为要凉，而后问我 PWA 原理是怎么样的呢？说了下大概Service Worker吧，不太熟)

最后，主管告诉我，基础仍是很是扎实的，经过的几率仍是很高，但愿能选择淘系团队。

淘宝二面

3月17号 (52min) 淘宝二面

• 介绍一下你的项目(我说了一下技术栈，遇到的挑战和解决方案)
• 你只学了一年半，就有这么多关注量了，你是怎么作到的？
• 你以为你基础怎么样？(JS 很扎实，Vue 翻完源码，React 略懂原理)
• 你以为 React 和 Vue 有什么共通之处？
• 说一下浏览器渲染过程(说的很详细，面试官说能够，细节把握的很professional)
• 说一下对于前端技术的发展过程(从刀耕火种的年代提及，到后来的jq，angular，react，vue 三大框架，gulp、grunt、rollup、webpack 打包工具，而后到将来的一些方向，好比 PWA, 跨端，serverless，微前端，webassemblely，加入了我本身的理解)
• 你以为前端除了完成页面交互稿以外，还能作其余的什么事情？(首先是性能优化，其次是处理数据，而后是工程化)
  • 你以为工程化的理解是怎样的？(从代码的角度，编译、压缩、规范，从人的角度，团队协做、统一产出标准)
• 你以为你选择阿里云或者淘宝，你选择的标准的什么？
• 还有什么想问个人吗？(问了一些转正和部门相关的事情)

整体而言，面试官基本没问什么基础，考察对前端的思考和我的的一些思考，跟我讲这方面的能力仍是不错的。

后来流程选择了阿里云，接下来咱们看阿里云的部分。

阿里云五轮

阿里云一面

3.10晚 阿里云一面：

• HTTPS 的握手过程讲一讲。(讲了好久很细，面试官知道我理解，喊停了)
  • HTTPS 和 HTTP 的缓存有什么区别？(懵了)
• DOM API 掌握怎么样？ (不是很熟)
  • Element 和 Node 的区别(伪装想了一会，不知道)
• XSS 攻击 Cookie相关的字段(HttpOnly, 解释了一下做用)
• CSRF 攻击，解释一下 Cookie 的 SameSite 字段 (说了下，以为能够，过)
  • chrome 最新的 xxx 特性是如何防范 CSRF 攻击 (这个真没据说过)
• fetch 和 xhr 有什么区别？(fetch 不熟)
  • 好，解释一下 xhr 的 cors 过程(简单请求，非简单请求两种状况，说了下)
• React 闭包陷阱有什么好的解决办法吗？(说实话，简历上写了，实际上理解不深，只说了一种)
  • useReducer 能够解决你知道吗？ (当时真的不清楚，主要忘了闭包陷阱的表单场景，尴尬)
• 看了你的小册子，能不能讲讲React.memo 和 JS 的 memorize 函数的区别(memorize函数当时不知道，觉得是什么高深的算法，后来才发现就是cache函数，换了个名字而已。反正当时说不会)
  • 特地考了一题对React.memo的理解(擦，仍是考React.memo, 三个场景，中间一个场景答错了，很是减分。这道题出的仍是颇有水平)
• WeakMap 和 Map 的性能有什么差异?(前者对 GC 更加友好，保持弱引用)
  • 若是是在当即执行函数中，二者的性能有区别吗？(楞了一会，说强弱引用仍是会有GC的区别，没影响)
    • 换个说法吧，若是这个当即执行函数中有递归函数，二者性能有区别吗？(没 GET 到面试官的点啊，过了吧这题)
• 能不能说说 AMD 和 ESModule 有什么区别？(AMD 不熟，说ESModule，介绍了import、export以及导出引用的特色)
  • 那么你能不能告诉我 ESModule 对于 Tree-Shaking 有什么优点呢？(会作一些编译阶段的优化吧)
• async await 通过编译后和 generator 有啥联系？(问了两遍，仍是不知道问的啥，直接说了async await 原理，他说你讲了太深，问的不是这个，过吧过吧)
• 有什么想要问我吗？

反问的问题:

1. React 闭包陷阱如何用 useReducer 解决？ (面试官又说了一遍)
2. 能不能说一说您正在作的业务中，遇到什么挑战，有什么解决思路？(说了不少，看的出来，阿里的大神都是特别有想法、有创意，最后也给我指引了一些将来的方向， 好比前端将来的容器化，对于中台页面的构建进行服务级别的调用，而不是去一个个组件去写，了解一下后端的安全容器概念，另外推荐我去看一看蚂蚁金服的微前端框架的实现。深深的佩服，开了眼界，收获很大!)

另外，一面并无发挥个人优点，问的问题跟我不太match，甚至有些问题都没有听懂，虽然看的出来面试官比较欣赏我，但我的以为状况很不乐观。挂了也就挂了吧，我以为挂了也正常。

后续: 3 月 11 号下午内推个人大佬来信，了解到昨天面个人是团队中公认技术最牛的专家，面试官给的评价是，虽然有一些问题，可是总体表现不错，在应届生里面已经能够了。好好等下轮。

阿里云二面

3.19 晚 阿里云二面(37min)

(ps：等的过久了，都没紧张的感受了)

二面主管问我先面试仍是先笔试，由于有两个流程。我说先面试吧。

• 首先自我介绍
• 为何要作你这个开源项目？后台数据哪来的？
• 有 nodejs 相关的开发经验吗？(果断说没有，避免给后面挖坑)
• HTTP 的 GET 和 POST 请求有什么区别？(我说了 4 个区别)
• 说一说 CSRF 和 XSS 攻击？(说了一堆，他说你讲的太细了，是否是最近看过之类的文章，我说没有)
• HTTP 缓存能不能说一下？(强缓存，协商缓存，中间扯到代理了，讲了一堆，他说能够了)
• 你知道 JS 的语言标准是如何制定的吗？(确实不熟，说下去本身查查)
  • 你用过哪些 ES 最新的语法，越新越好
• 你对 babel 了解吗？能不能说说几个 stage 表明什么意思？
• Vue 的响应式对数组是如何处理的？(重写数组方法，手动派发更新)
  • Object 为何能够自动派发更新？
• 假如我在一个for循环中改变当前组件依赖的数据，改变一万次，会有什么效果？(讲到批量更新和 nextTick 原理，他表示能够)
• 假如让你设计一个适配 PC、手机和平板的项目，你有哪些布局方案？(首先是vh、vw，而后用淘宝出品的 lib-flexible 库进行 rem 适配，还有一种 flex + px 的适配方式)
• CSS 当中以 @ 开头的属性有哪些？(我说了@media, @keyframes，后来提醒我还有@import，我补充这个是串行加载 CSS)
• 了解过前端当前的发展趋势吗，好比一些新的技术方向。(说了对PWA的见解，为何会凉，flutter、electron、微前端，serverless)
• 了解过云计算吗？能不能讲一讲云计算的发展方向和前景？(没了解过)
• 有什么兴趣爱好？
• 对本身的职业规划是怎样的？(说了一大堆，他笑了笑，说今天就到这里吧，明天笔试)

次日主管告诉我不须要笔试了，笔试取消，直通三面。

阿里云三面

3.20 阿里云三面(57min)

聊了狠多，可是聊的很轻松，没有编程题，并且和我的经历强相关，就不整理题目了。

阿里云四面

3.24 阿里云四面(40min)

让人自闭的一场交叉面。

• 自我介绍
• 为何选择前端？(说了不少，他叫我用一句话总结)
• 你的职业规划是怎样的？
• 项目中遇到了哪些挑战？
• 说说你对前端架构的认识，如何设计出一个架构方案(说实话，我顶不住，没研究过)
• 在一个大型项目中，如何定位发生内存泄露的代码？(没有实践过)
• Last-Modified 和 Etag 有什么区别？
  • Cache-Control 和 Last-Modified 的区别
• 后端语言对 nodejs 更熟仍是 Java 更熟？(Java)
  • 说说 String, StringBuilder 和 StringBuffer 的区别
• 跨域有哪些方案？
• React 受控组件和非受控组件的区别

阿里云五面

3.26 阿里云终面(50min)

• 自我介绍
• 你本身在社区作过什么具备推进性的事情？
• 你能不能说说本身比较擅长的数据结构有哪些?
• 在学校参加过竞赛吗？
• 你但愿公司的环境是怎么样的？
• 为何不投腾讯？(阿里面的已经很累了，秋招再投吧)
• 阿里云和抖音你更想去哪里？
• 你还有什么问题？

我的经验分享

面经就分享到这里了，多是由于在社区比较活跃，在面试以前很容易地拿到了内推资格，而且在一轮轮的面试凭借这部分经历获得了面试官的赏识，因此一路下来感受难度并不大，还算是很是顺利的，至少目前全部的面试中没有一轮挂掉。

在我微信公众号【前端三元同窗】的后台中也可以看到有些同窗的留言，很多人要我分享一下学习前端的一些方法和经验，之前我是很是抗拒的，由于我以为本身并无这个资格，但如今经历了这一轮轮面试的检验，我以为如今是时候回顾和分享一波了。主要分两个方面来说吧，一个是前端技术的学习，另外一个是面试当中须要注意的一些case。

学习经历及经验

我的经历

回想我大一的时候，读的是机电工程，后来在大一下的时候转到了学校的计算机专业，今后开始了科班生的生涯。接触前端也大概是在大一下学期，在一个叫万门大学的地方偶然发现了一套 JS 的视频，看着感受不错，想深刻这个领域，但后来发现越日后面学越须要一些计算机科班的专业基础，因而我当时果断转到了计算机。所以这一步选择算得上偶然，也是一个必然。

大二上学校的课程压力比较大，不温不火地学了一个学期，中途有过作全栈的想法，报了个 Python Web 培训班，可是学的很差，后来直接放弃了，决定仍是回过头来好好把前端搞扎实吧，从新学了一遍 JS，而后看了看 JQuery，研究了里面选择器实现的源码，而后去学 Vue，固然也跟着网上的教程作了一些项目，好比慕课网上黄轶老师的饿了么项目和炸鸡音乐Web App，还有 Dell Lee 的 Vue去哪儿网实战，一步步作完感受对本身实战能力的提高仍是很大的，起码能本身独立倒腾一个项目出来了。

大二下学期我开始接下了人生当中第一个外包项目，也参加了计算机设计大赛，赚来了三千多的第一桶金，也拿到了中南赛区二等奖的证书。这一切在外人看来实际上是至关不错的经历了，但对我而言，我一直可以感觉到一种强烈的危机，因为项目一直在赶时间，不少时候秉着能出来效果就行的心态来作，不少细节并无我想象中作的那么完美，并且框架里面偶尔会出一些问题，可是我并无时间去理解其中的原理。我以为这并非我要追求的东西。这种心态，说的好听点叫追求极致，难听点，就是强迫症。

在这种心态的驱使下，完成了外包和比赛后，我立刻了投入了更深一步的学习。《JavaScript高级程序设计》好好再翻一遍，ES6 从新好好学一遍，看了一遍珠峰周啸天的 JavaScript 视频，在 CSDN 上作了相关的笔记(我以为不算博客)，以及在慕课网上学习了webpack的课程，React的入门视频，一路狂奔，学了不少。

也正是大二下学期期末的时候，我开始了在掘金发表第一篇文章，标志着写博客的经历正式开始。让我惊喜的是，发表出来的第一篇博客就被掘金社区的公众号转载了，我喜出望外，感受特别惊喜，因而准备继续写下去，不断规划和输出新的内容。

很快，大二下结束后，暑假就到来了。在这个时间有些小伙伴已经出去找实习了，但我深知本身离 offer 还有一些差距，因而又感觉到了一丝危机。我曾经问过本身: 若是我要去找实习，会遇到哪些问题？

• 首先，项目本身以为深度不够，拿不出手。
• 其次，计算机基础并不扎实，数据结构和算法掌握的并很差，计算机网络也没基础。
• 最后，前端技术的一些原理知之甚少，更别说框架源码了。

所以，在大三前的暑假开始，我开始给个人将来实习布道。首当其冲的就是本身去作一个让本身满意的项目，这个项目必须足够的精致，同时不是为了应付任何人。这个项目采用 React 来作的，当时是统一用的 class 组件，后来想试用一下 hooks 特性，发现真香，直接用 hooks 重构了。这个项目也就是我那本掘金小册项目的前身。当我把代码放到 Github 上的时候，没几天的时间就收获了上百了个 star，让我感到特别意外，而不久以后就有同窗在 issue 区留言，以为是一个不错的练习项目，能不能弄个教程出来。接下来我尝试着这个项目更大的价值，事实上我也作到了，写成了小册放到社区，反响还不错。关于项目具体细节，详情请点这里查看。

关于计算机基础，我在大三上学期花了很多的精力学习数据结构和算法，首先学完了慕课网 bobo 老师的数据结构从入门到进阶、算法与数据结构综合提高以及玩转算法面试这三门课程，夯实了全部的基础以后，开始铺天盖地地刷 leetcode，一学期刷了 100 多道算法题。对于计算机网络，当时确实没有时间学了，就把这部分的计划放在了寒假。

最后是前端技术的深刻学习，分为 3 个方向精进，JS 基础、浏览器和框架。

一方面是JS的学习，对我而言，JS 明明学了不少遍了，可是实际上忘的也很快的，我打算重读一遍红宝书，而后从新创建完整的 JS 知识体系。紧接着我开始了《JS灵魂之问》系列博客的创做，尝试着去系统地整理 JS 的知识点，又必需要达到必定的深度，当时对我来讲实际上是一个至关大的挑战。在这个整理的过程中，我也逼着本身去参考了大量的资料和博客，说实话学到了很多，更让我意外的是，这个系列让我今后在掘金大火，帮助了许许多多在 JS 进阶路上的前端。

在浏览器这块，其实不少运行原理以前也是只知其一;不知其二，直到一个偶然的机会，发现了极客时间上一个口碑不错的专栏，专门讲浏览器的，耐下心来读完以后，感受收获仍是挺大的，推荐你们去好好看看，解开了以前不少关于浏览器原理的疑惑。

而后是前端框架，我后面逼本身去读完了 Vue 源码，缘由很简单，为了面试，但没想到的是，我目前遇到的面试对我源码方面问的并不深，只是很是常规的一些原理性的问题，但无疑的是，通读源码这个指标对面试的评估来说是至关加分的，而且可以让本身站在一个更高的高度去应对面试，遇到相关的面试问题会很是从容。更重要的是，阅读完源码，对我我的对于 JS 的理解和 SDK 设计以及设计模式的理解更加深刻了一步，这是我当时没有想到的，也是很长一段时间让我受益的财富。可能有人会问你是怎么就作到的，关于源码的阅读方法，话题有点大，后面再介绍吧。

大三上就准备了这么一些东西，顺带着整理了本身的博客，期末的时候已经上架小册、粉丝过万了。

紧接着到了寒假，我把数据结构和算法从新复习了一遍，TCP 和 HTTP 好好系统学了一遍，同时看了一些 chromium 的源码，复习了一波 Vue 源码，感受火候差很少了就开始投递简历了，因而投了阿里和字节跳动，便有上面的面经了。

亲身经验分享

目前的经历分享就这些，可能会有些记流水帐的感受，但正是这样我以为才足够真实，由于对前端而言，不可能照着一个系统的学习路径循序渐进，而后达到一个很高的水平，这种美化过的经历说出来连我本身都不信，谁的人生不是这么误打误撞过来的呢？那你可能就会问了，你凭什么可以把基础学的那么扎实，经过这些大厂的面试呢？

我以为有两点，一点是外在的因素，一点是内在的因素。

对外在的方面，我在输入一些信息的同时，会加入本身的思考和推敲，而后用本身的方式来输出，整理成博客，这使得我可以对知识体系自己有更加深入的理解，同时也能在忘记这部分知识点以后，从新回顾的时候可以很快捡起来，节省了很是多复习的时间。

对内在的方面，我以为自驱力是一个比较重要的因素，即本身驱动本身学习的能力。其实提及来容易，作起来是很是难的，由于外界的诱惑实在是太多，并且学习自己就是脱离温馨区的活动，是一种反人性的活动，自己就是让人不舒服的，所以不少人不肯意主动学习，这是彻底能够理解的。那我为何会有这种强烈的自驱力呢？

由于危机感，危机感随之带来了恐惧。

为何这么说？

之前听《获得》APP上的梁宁老师讲过，人性其实只有两大痛点: 一个是愉悦，一个是恐惧。 愉悦感可让人沉浸在一件事情当中干一万小时，成为高手，而恐惧带来的动力更加显著。对产品来讲，要么就让用户爆爽，要么就去帮助他抵御恐惧，不然就不是一个优秀的产品。那么对于我的的成长而言，你作一件事情，没有找到任何愉悦的感受，也没有产生过任何恐惧，那么他基本上在这个领域一事无成。

换句话说，若是一件事情让你很是疯狂地去作，要么这件事让你爆爽，要么它帮助你抵御恐惧。

对我来说，真正驱动个人是后者。危机意识让我挖掘出真正的痛点，发现本身的恐惧所在，从而带来强大的自驱力。若是说仅仅是学一些东西来炫耀一番，或者只是去迎合外界的指望，这种动力能够有，但仅仅只是暂时的。当你走出温馨区，面对外界无数诱惑的时候，真正能 carry 你继续学习的是你心里的痛点。

我以为明白这一点，比所谓的学习路径、学习方法重要得多。由于大多数时候咱们不是缺乏学习资料，或者没有掌握什么高效的学习方法，只是由于你动力不足、容易懈怠罢了。每一个人状况都各不相同，但我以为想要成长，挖掘本身真正的痛点是最重要的一件事情。

面试经验分享

准备阶段

在面试以前，可能不少人会跟我同样感到焦虑，以为本身还没准备好，想多复习一些东西，可越复习越感受本身不会的东西更多，从而迟迟不敢出去面试。这实际上是个悖论，缘由就在于技术自己就是学不完的，此时咱们须要好好调整一下本身的心态，作两手准备:

• 划清知识体系和边界
• 给本身安排一个截止日期(deadline)

准备时间是有限的，咱们须要作的就是利用有限的时间达到最大效益的产出，所以尽可能地作一些复习巩固和查漏补缺，发挥本身的优点，而不要去为了面试学新技术，或者深挖本身从未涉猎的领域。我根据本身目前的实际水平，制定了这样一份面试知识体系:

其实当时有些知识并无彻底掌握，可是又须要出去面试，因此给了本身一个截止日期，在 3 月 10 号以前，尽全力准备，到了 deadline，不管如何都要投简历出去。这样，后面的一系列面试就瓜熟蒂落了，没有拖得过久，同时准备的还不错。

另外，关于前端基础知识以及计算机基础，我已经在博客里面作了系统的梳理，下面给你们一些已经产出的内容，让你们能够完整地学习:

CSS篇:

剖析一些经典的CSS布局问题，为前端开发+面试保驾护航

趣味CSS3效果挑战小汇总

JS 篇：

(建议收藏)原生JS灵魂之问, 请问你能接得住几个？(上)

(建议精读)原生JS灵魂之问(中)，检验本身是否真的熟悉JavaScript？

(2.4w字)原生JS灵魂之问(下), 冲刺🚀进阶最后一千米(附我的成长经验分享)

浏览器篇:

(1.6w字)浏览器灵魂之问，请问你能接得住几个？

计算机网络篇:

(建议收藏)TCP协议灵魂之问，巩固你的网路底层基础

(建议精读)HTTP灵魂之问，巩固你的 HTTP 知识体系

数据结构和算法:

(1.8w字)负重前行，前端工程师如何系统练习数据结构和算法？

前端工程方案:

实现一个简单的webpack

styled-components:前端组件拆分新思路

从头开始，完全理解服务端渲染原理(8千字汇总长文)

前端项目实战:

掘金小册《React Hooks 与 Immutable 数据流实战》

以上均为原创，但愿对你有所帮助，至少我面试前反复看这些，效率仍是很高的。

接下来进入面试的阶段。

面试阶段

从上面的面经中能够看到不一样方向、不一样级别的面试官各自的偏好不同，所以对于不一样的面试官，采起的策略也应有所不一样。但我更想分享的是一些具备共性的地方，这些策略能够适用于绝大部分的面试场景，让本身得到更大的竞争优点。固然，所谓的面试策略，都是基于你前期充分的准备，否则都只是天方夜谭，毫无可行性。

策略一: 备好杀手锏

面试官一天可能要面5-6人，甚至十几人，那么你是否想过: 他凭什么对你印象更加深入？

心理学有一个效应叫峰终效应，就是人在一个有限的活动当中，对一件陌生事物的见解大体由两个时间点所决定: 一个是高潮点，一个是结尾的点。

对面试而言，我认为一样是适用，具体来说，和面试官的交流，其实也就是和一个陌生人的交流，如何来给他留下更深入的印象？须要在高潮点展示本身，在结尾点保护本身，在面试的过程当中适当给面试官一些和别人不同的回答和看法，使之感到惊艳，而在结尾的时候，你说的话其实更容易被面试官记住，这个时候因为面试已经接近尾声，你可能没有当时那么紧张，这个时候须要适当的谨慎一些，不要完全放松，避免不当心说出一些对本身处境不利的话。

其实，我更想强调的是前者，即如何将面试带上一个高潮点，而且让面试官感到惊艳。其实这并非什么简单的事情，毕竟能惊艳的只是少数，那么若是才能作到这一点呢？

在面试前，不妨准备好本身的杀手锏。什么是杀手锏？就是每当面试官问到相关的问题的时候，你可以有自信比 90% 的人理解得更深入，回答更出色。以我本身为例，我准备的杀手锏并很多，HTTPS 全部加密算法，chromium 进程 IPC 原理，斐波拉契第 n 数的 logn 解法，浏览器渲染过程，vue 编译器架构，vue 双向绑定，快排以及手写 V8 排序......

在其它基础知识都 OK 的前提下，这些杀手锏是你技术上的核心竞争力，这是你和其余人相比体现不可替代性的地方。固然，时间有限，不可能每一个角度都能研究很深刻，但若是你不许备，跟你们背同样的答案，很难从人群当中脱颖而出。

策略二: 适当暗示

面试的过程其实就是一个和面试官互相试探的过程，一方面是他对你提问，另外一方面你须要给他一些信号，引导他去挖掘你的闪光点。

其实有两个时机能够发一些暗示的信号，一个是自我介绍的环节，这个环节中能够向面试官展现出你以前深刻研究过哪一块的技术，指引他往那个方向问，另外一个是技术细节的提问，能够在回答的时候适当发挥，大部分面试官是愿意听你展开的。

最后

暂时先分享这么多吧，但愿你们都能在春招当中拿到本身满意的 offer。

ps: 我的博客汇总Github仓库

如想获取更多资料或者联系加群，能够关注个人微信公众号，以下: