65天时间，洒热血复习，我成功“挤进”了字节跳动（面试指南+学习笔记+复习大纲+算法刷题全都有）

工作2年了，我一直在拼命去学，越发的很难突破瓶颈，到达前端中高级的水平，更重要的是感觉毫无方向。经历了入门的阶段，想着去进阶，不得不说，迷茫了，夯实基础，深入理解JS ，还是扩大广度，去接触后端和前沿的框架技术，时时刻刻感觉着时间的流逝自己毫无寸进，危机感也是铺面而来。相信这也是很多一两年经验的前端工程师所遇到共同问题，由于我也是从一个菜鸟过来的，所以我会结合我的个人经历以及我对前端学习过程的认识来写这篇文章，这会让这篇文章更加真实，而并非纸上谈兵。

职场分析

当你发现从事前端工作两年后，你已经掌握了前端的基础技能，也参与了大量的项目，代码量飞速增长，这个时候，你应该开始追求质量，而非数量。

你可能经常听见工程化、组件化、自动化、工具化、模块化等等词语，也可能被问到性能优化、网络通信、阅读源码等等问题。

如何从一个初级前端，往中高级前端前进？

本篇文章面对的人群是开发经验1到3年的初中级前端工程师，希望能和你们交个心。

已经晋升的同学，欢迎你在评论区留下你的心得，补充我的一些缺失和不足。

下文内容涉及到：面试题（含答案）+学习笔记+电子书籍+白嫖视频，需要这些PDF文档的，可以直接 戳此免费获取​

前端深入学习路线，希望可以对大家的学习起到借鉴作用。

JavaScript（ES6+） 的知识点

类型转换、this、作用域（作用域链）、原型链以及继承、闭包的理解、动态作用域和词法作用域

JavaScript 执行机制、promise & async……

2023了还不会TypeScript有点说不过去：自从 Vue3 横空出世以来，TypeScript 好像突然就火了。这是一件好事，推动前端去学习强类型语言，开发更加严谨。并且第三方包的 ts 类型支持的加入，让我们甚至很多时候都不再需要打开文档对着 api 撸了。

前端框架的学习

框架其实就是一些利用html+css+js开发出来的一些简化项目开发工作的工具，也是目前前端的主流开发手段，常用的框架有vue，react，angular，以及小程序，app混合开发，echarts.js和D3.js图表等等已经成熟的框架体系。 学习这些框架，能大大缩短我们项目的开发周期，减少开发难度，是前端人员必不可少的技能。

• 学习框架周边的生态，社区总结出来的优秀组件，以及各种好用的工具库。
• 造一些自己的轮子，使用框架搭建自己的开源项目
• 带着问题去阅读框架源码，学习性能优化
• 养成良好的编程习惯
• ……

前后端交互

Node.js是让前端工程师能够触及后端逻辑的一个利器，但是这里的Node.js并不是单独的指后端逻辑的开发。现在的前端工程化体系中，扮演重要角色的webpack，parcel，vue-cli等等，或者是现在让JavaScript能够开发PC桌面程序的Electron，都和Node.js密不可分

在这里给大家举几个例子，可以尝试一下从这几个点来进阶：

• 与浏览器端的JavaScript不同，Node.js后端是直面服务器的，如何定位和分析内存泄漏问题。
• 尝试写一些webpack插件。

性能优化和免费获赠算法

提起性能优化，大家最先想到的是什么？我最先想到的是一道面试题：

从输入 URL 到页面加载完成的具体过程

因为从直观层面来看，我们前端需要优化的步骤基本都在这个加载工程当中。

性能优化现在对于前端来说已经是必不可少的技能了，当然现在有些所谓的性能优化的技巧现在都成为了一种需要遵从的规范。

我们需要关注两个方向的性能优化：

• 运行时的优化
• 开发时的优化

前端综合

HTTP协议、跨域通信、安全问题、浏览器渲染机制、异步和单线程、页面性能优化、防抖动和节流阀、虚拟DOM等。

项目实战

• 电子商城APP
• Vue+ElementUI进阶综合实战

这版前端学习路线，我搞来了！ 里面讲的东西很清晰，我就是参考他的内容规划我的前端技术栈。我之前的技术栈感觉太宽泛了，只是简单分类，各部分联系有断层的感觉，突出不了主体。

字节跳动面试题还原

这次字节跳动的整个过程我就不去还原了，只将面试题分享出来吧，面试题以技术面为主，Hr面基本上大同小异我就省略掉了，可以做个参考看下今年字节跳动会问一些什么样的问题，热乎乎的新鲜面试题，希望能够给你带来一些帮助吧。

1.HTML部分

• html 语义化
• canvas 相关
• svg和canvas的区别？
• html5有哪些新特性？
• 如何处理HTML5新标签的浏览器兼容问题？
• 说说 title 和 alt 属性
• HTML全局属性(global attribute)有哪些

2.CSS部分

• 让一个元素水平垂直居中，到底有多少种方案？
• 浮动布局的优点？有什么缺点？清除浮动有哪些方式？
• 使用display:inline-block会产生什么问题？解决方法？
• 布局题：div垂直居中，左右10px，高度始终为宽度一半
• 盒模型
• CSS如何进行品字布局？
• CSS如何进行圣杯布局
• CSS如何实现双飞翼布局？
• 什么是BFC？
• 什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
• 描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你 了解他们的不同之处？
• CSS 中 link 和@import 的区别是？
• 为什么要初始化样式？

…

3.JavaScript部分

• 0.1+0.2为什么不等于0.3？
• 什么是BigInt?
• 为什么需要BigInt?
• 什么是闭包？
• 闭包产生的原因?
• 闭包有哪些表现形式?
• 原型对象和构造函数有何关系？
• 能不能描述一下原型链？
• JS如何实现继承？
• null是对象吗？为什么？
• call 和 apply 的区别
• 描述一下 V8 执行一段JS代码的过程？
• 关于JS中一些重要的api实现
• == 和 ===有什么区别？
• 如何让if(a == 1 && a == 2)条件成立？

…

4.Vue部分

• Vue 双向绑定原理
• 描述下 vue 从初始化页面--修改数据--刷新页面 UI 的过程？
• 你是如何理解 Vue 的响应式系统的?
• 组件中写 name 选项有什么作用？
• vue 中怎么重置 data?
• vue 首屏加载优化
• vuex是什么？怎么使用？哪种功能场景使用它？
• vuex有哪几种属性？
• 虚拟 DOM 实现原理
• Vue 中 key 值的作用？
• 什么是MVVM？
• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

5.React部分

• React有什么特点？
• 列出React的一些主要优点。
• React有哪些限制？
• 什么是JSX？
• 你了解 Virtual DOM 吗？解释一下它的工作原理。
• 与 ES5 相比，React 的 ES6 语法有何不同？
• 解释 React 中 render() 的目的。
• React中的状态是什么？它是如何使用的？
• 如何更新组件的状态？
• 如何模块化 React 中的代码？
• React中的事件是什么？
• 如何在React中创建一个事件？
• 你对 React 的 refs 有什么了解？
• 列出一些应该使用 Refs 的情况。
• 如何在 React 中创建表单
• 什么是高阶组件（HOC）？
• MVC框架的主要问题是什么？
• Redux与Flux有何不同？
• 数据如何通过 Redux 流动？
• 什么是React 路由？
• 为什么React Router v4中使用 switch 关键字 ？

…

6.计算机网络

• HTTP 缓存
• HTTP 常用的状态码及使用场景？
• HTTP 常用的请求方式，区别和用途？
• 你对计算机网络的认识怎么样
• HTTPS 是什么？具体流程
• WebSocket与Ajax的区别
• TCP 如何保证有效传输及拥塞控制原理。
• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

7.算法和手写题

• 防抖节流；
• 手写 Promise 及相关 api 实现；
• 实现 bind、apply、call；
• request cache；
• 实现模版字符串；
• es6 class 转成 es5 ；
• 实现 Array flat 等相关 API；
• 实现一个版本比较函数；
• 反转链表
• 合并两个有序链表
• 优先队列
• 前 K 个高频元素
• 滑动窗口最大值
• 栈实现队列
• 前序遍历
• 中序遍历
• 后序遍历
• 最大深度
• 最小深度
• 【面试真题】最长回文子串【双指针】
• 无重复字符的最长子串【双指针】
• 最长连续序列 【哈希表】

…

8.一些开放性题目

1)说说最近最流行的一些东西吧？常去哪些网站？

2)自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。

3)项目介绍

4)前端开发的职业现状和前景是什么？

5)平时是如何学习前端开发的？

6)1-3年工作经验，你有信心顺利跳槽到BATJ等一线互联网大公司吗？

7)你觉得哪个框架比较好,好在哪里

8)你觉得最难得技术难点是什么

9)前端的项目如何进行优化，移动端呢

字节面试题答案：

如何实现质的飞跃？

1、技术沉淀（学习+积累）

对于技术新人来说，无论是在大厂小厂，还是在外包公司，基本上都是做得简单的CRUD工作。很多人认为，重复简单的工作对自己的技术是没有提升的，但实际上也有人能从中杀出一条血路，所以关键是你自己是否花了心思，付出了努力。

当然，我个人也有自己的一套学习方式和习惯，平时喜欢利用碎片时间来看点什么东西，比如一些技术性的书籍或文档，还有一些视频讲解等，经常会让我有一种恍然大悟的感觉，对我的工作也起到了很大的帮助。

• 阅读书籍文档

• 看视频学习

• 面试刷题
• 

2.确立正确的技术方向

PC前端：偏向于要求 jQuery，Angular/React/Vue 等技术，并通常要求会Java或PHP

移动前端：偏向于要求 HTML5、CSS3、Native App、Hybrid App 等

技术Node工程师：偏向于要求 Node.js 异步编程、V8性能优化、Koa/Express框架、工程化等技术另外，也有一些偏向数据方向或图形方向的，而且PC前端也可分为偏向CSS和偏向JS。

有一条好的学习路线是不可缺少的，只有方向对了，努力才有效。

3.学习如何阅读别人的代码（笔记）

不知道为啥，很多开发人员总有一股“迷之自信”，抱着“除了我，其他每个人写的代码都是垃圾”这种想法，用杨笠的观念：为什么你明明很普通，却又那么自信？

实际上，能够在别人的代码之上继续工作是一项有多重好处的伟大技能。因为不论以前的代码是多么混乱或者考虑不周，你都需要去扩展它。

由此，它会对你两方面都带来益处：

• 能够阅读他人的代码是一个了解什么是糟糕设计的好机会。
• 能够阅读别人乱七八糟的代码的话，也使得在需要更新的时候变得容易。

我个人会阅读一些大佬的技术笔记，其中就包括了一些开发技巧和源码（篇幅有限，附上我在这个阶段学一些东西的笔记。）

4.培养自己的场景化思维

在工作的两年里，我一直都在培养自己的场景化思维，这种思维是很难在大学学习中复制到的。何为场景化思维？也就是会主动去思考最终用户可能会如何错误地使用你的软件。

由于大部分编程都是维护性的，因此它通常意味着更改与其他代码高度耦合的代码。即使是简单的更改也需要跟踪对象、方法和 API的每一个可能存在引用的地方。否则，很容易意外地打破你没有意识到的模块连接。即使您只是更改了数据库中的数据类型。它还包括在进入开发之前通过边缘案例和整体化的高级设计进行思考。

对于开发新模块或者微服务的场景就更加复杂，花时间去考虑所构建的操作场景非常重要。想想未来的用户可能需要如何使用您的新模块，他们可能会如何不正确地使用它，可能需要什么参数，以及未来的程序员是否会以不同的方式需要您的代码。

简单的编码和编程只是问题的一部分。创建一个在你的电脑上运行良好的软件是很容易的。但是部署代码可能出错的方式就会有很多。一旦进入生产环境，就很难说代码将如何使用，以及哪些其他代码将附加到原始代码中。五年后，未来的程序员可能会对你的代码局限性感到沮丧。

5、社区讨论

作为一个合格的前端工程师，一定要积极的深入社区去了解最新的动向，比如在twitter上关注你喜欢的技术开发人员，如 Dan、尤雨溪。

另外 Github 上的很多 issue 也是宝藏讨论，我就以最近我对于 Vue3 的学习简单的举几个例子。

• 为什么 Vue3 不需要时间切片？
• Vue3 的composition-api到底好在哪？
• Vue3composition-api的第一手文档

总结

所谓技术能力其实就是解决问题的能力和学习能力，所以无论你在哪个阶段，甚至是更高的阶段，不断提升这两个能力都是你应该一直要做的事情。

上文中分享的面试题库（含答案+解析）、学习笔记和脑图等等，大家若需要这些资料的帮助，我当然很乐意提供， 戳此免费获取​