学习过程

其实也没有太过特意去准备面试，其实都是靠平时积累的，在 2019 年开始我就制定了自己的学习计划了，并且每天都坚持学习。可参考 lien的每日学习

以下会分为：

  1. 计算机基础
  2. 前端专业知识
  3. 学习心得

顺序有优先度之分，之所以把计算机基础放在第一位，是因为经过这些面试发现计算机基础考察还有比前端还要多，甚至有些公司面试都不怎么问我前端了。

计算机基础

tip：里面涉及很多都是极客时间的课程，然而我并没有打广告。推荐是因为我看完后真心觉得讲的好，当然好是指容易让初学者了解和上手，深度还是去看专门的权威书做普通吧。

数据结构和算法

学习办法不是一开始就刷题，要先学点入门。

  1. 入门方式有很多种看书看视频，边看边敲。
  2. 然后就可以上网看别人面经和一些 leetcode 大神总结的经典题目，按照分类开始刷了。
  3. 每道题至少做 3 次，第一次时候遇到不会就不要想很久，8 分钟没有思路就看答案。因为大家一开始都是没啥思路，只有做多多总结才会慢慢有思路。做完后一周后再做第二次。准备跳槽时候再做第三次。
  4. 算题顺序为算法面试通关 40 讲、剑指 offer、字节跳动专栏、自己总结的高频题。

我刷的题目也不多，就 100 来道，和别人比起就差远了。

但是我做的题目范围比较广，而且都是自己总结高频再去做，命中的几率比较大。

基本数据结构

  • 数组
  • 队列和栈
  • 链表
  • 二叉树
  • hash
  • 堆

常见的算法

  • DFS
  • BFS
  • 滑动窗口（双指针）
  • 回溯
  • 动态规划
  • 贪心（其实动态规划可以解决）
  • 排序
  • 二分查找

参考资料：

  • JavaScript版 数据结构与算法，这个适合新人学习，入门基本。
  • 极客时间- 数据结构与算法之美 在有基础上看这个会更好，里面github有js实现方式，自己动手敲一遍
  • 极客时间- 算法面试通关 40 讲这门课真的是好，里面都是高频经典的题目。
  • leetcode 字节跳动专栏
  • leetcode 剑指 offer

blog:

  • awesome-coding-js用 JavaScript 实现的算法和数据结构
  • labuladong这个动态规范讲得真的好
  • YaxeZhang/Just-Code针对面试训练算法题， 目前包括字节跳动面试题、 LeetCode 和剑指 offer

网络

网络是前端重要中的重要，也是面试高频的范围。很多人都是一开始就去看计算机网络、TCP/IP 协议、这些书入门，也不是说不好，但是对于新手入门门槛可能太高，还没看几页就放弃了。可以一开始看点视频跟着作者一起来抓包，慢慢熟悉。

观看顺序：

  • 极客时间-透视 HTTP 协议HTTP 作为前端最经常接触而且相对独立，可以先学习这个，再学期其他层。
  • 极客时间-趣谈网络协议作者生动用例子解释网络各层的作用和他们之间的关系，在此形成一个整体的架空，方便后面细节的学习
  • 极客时间 - Web 协议详解与抓包实战。这门课从高层到底层，讲解每一层的细节，由于里面讲解很详细也有很多理论知识，如 RSA 算法、基于椭圆曲线的 ECDH 算法等等可以考虑跳过

最后补充的书籍

  • 图解 http 协议
  • 图解 tcp 协议
  • TCP/IP 详解（第一卷）

tips：

对于前端来说，http，http2，https 的握手是高频题，要主要复习。

其他

本来想聊聊计算机组成原理、操作系统和编译原理，但是一个我学得不精，第二面试也没有怎么问，操作系统就问 linux 的一些简单指令和写一下 Jenkins 的脚本而已。或者后端对这方面会问得比较多。

前端专业知识

前端基础-JS

以下必须要十分熟悉：

  • 类型，涉及以下：
  • 类型种类
  • 判断
  • 转换
  • 深度拷贝
  • 闭包，涉及以下：
  • 作用域
  • v8 垃圾回收
  • 变量提升
  • 异步，涉及以下：
  • Promsie 的历史，用法，简单手写 Promsie 实现
  • async await 原理，generator
  • 宏任务与微任务区别
  • 原型链，涉及以下
  • prototype和 __proto__
  • 继承
  • oop 编程思想
  • 模块化
  • CommonJS 和 ES6 module
  • AMD 与 CMD 区别（比较旧可以忽略）
  • ES6 特性
  • let const
  • 箭头函数
  • Set、Map、WeakSet 和 WeakMap
  • 之前提及的 Promsie，async，Class，Es6 module

参考资料：

先做一份自我检测，一名【合格】前端工程师的自检清单。然后根据自己薄弱点去看相关资料。

书籍：

入门

  • 《JavaScript高级程序(第三版)》
  • 《你不知道的JavaScript(上)》
  • 《JavaScript 忍者秘籍》（一定要买第二版）
  • 《阮一峰 ES6入门》

BLOG:

  • 前端进阶之道
  • 前端面试与进阶指南
  • ConardLi 的 blog
  • 木易杨前端进阶
  • FE-Interview
  • 冴羽的博客

掘金好文章：

  • (1.6w字)浏览器与前端性能灵魂之问，请问你能接得住几个？（上）
  • (建议收藏)原生JS灵魂之问, 请问你能接得住几个？(上)
  • (建议精读)原生JS灵魂之问(中)，检验自己是否真的熟悉JavaScript？
  • (2.4w字,建议收藏)😇原生JS灵魂之问(下), 冲刺🚀进阶最后一公里(附个人成长经验分享)
  • 中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂(上)
  • (中篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂
  • (下篇)中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂

付费好东西：

对知识付费其实是好事情，站在巨人的肩膀上看东西才会远。

  • 前端面试之道|比较基础的前端知识，适合新人
  • 前端开发核心知识进阶| 从基础出发，由浅入深，还有关于很多工程方面的文章，十分推荐。

前端基础-浏览器

有以下比较经典的问题：

  • 缓存策略：协商缓存和强缓存
  • 页面的渲染过程
  • 页面性能优化

参考资料：

  • 浏览器工作原理与实践。这个也是个人十分推荐，因为本人看过《webkit技术揭秘》，发现书上很多东西都是讲浏览器一些实现方式，一堆 C++ 十分难受，但是这个专栏却用十分简单生动的方式来讲述浏览器本质，个人收获很多。
  • 《webkit技术揭秘》

前端基础-css

  • css 选择器优先度
  • rem、em、vh、vw 和 px 的关系，以及移动端适配方式
  • 清除浮动
  • 盒子模型
  • flex
  • 层级上下文
  • 各种布局

前端框架-vue

  1. 第一个层次：使用
  • provide / inject
  • pros emit
  • 学习过程 - 图1listen
  • event bus
  • 自行实现 dispatch 和 broadcast 方法
  • vue 的生命周期
  • vue 全家桶使用，vuex，vue-router
  • data，computer，watcher使用
  • 组件通信
  1. 第二层：原理
  • 如何简单实现一个mvvm模型
  • new vue 时候发生什么，每个生命周期对应的源码做了什么
  • data，watcher，computer的源码实现
  • nextTick 的原理
  • 指令的本质
  • vue 的性能优化
  • Diff 本质
  1. 第三层：组件的实现

参考资料：

  1. 基础使用：
  • jspang的vue教程
  • Vue2.0开发企业级移动端音乐Web App
  • 前端成长必经之路 组件化思维与技巧
  1. 源码：
  • Vue.js源码全方位深入解析做补充。电子书：《Vue.js 源码揭秘》对于router，vuex，slot，keep-alive有详细解释。
  • 尤雨溪教你写vue 高级vue教程 源码分析!!!!这个我特意去fronted master冲了几百元，没想到居然有搬运。
  • 最后看完就做一下题目，看看自己能达到那种水平吧。12道vue高频原理面试题,你能答出几道?
  • 《深入浅出Vue.js》， 这本书真的好，作者每单介绍一个部分的时候，都会由最简单抽象的一个demo，一步一步变成框架实际的样子，最后拿你写的demo和框架实际的对比，分析双方优缺点。
  • 要先看剖析 Vue.js 内部运行机制把手教你如何写一个最小mvvm模式，mvvm是最核心的思想。当你能懂下面的图时候,那么可以进入下一步了
  1. 组件
  • vant
  • View
  • 先看一下别人的写组件的经验 Vue.js 组件精讲。看完之后就开始动手自己模仿别人的组件了。

前端框架-react

使用：- Class 的生命周期 - Hooc 高阶组件 - Hook 的使用 - react-router 的使用 - Context - redux（包括mobx或saga)

参考资料：

  • jspang的react教程
  • Hooks 重构旅游电商网站火车票
  • React.js 小书先来简单实现一个mvc模型的react吧。

然后 react 最难就是 fiber，fiber 的代码实现十分复杂，这时候无需太过关注代码，只需要知道，fiber 是解决什么问题而诞生，以及相关的概念就好。

推荐按以下顺序阅读文章

  1. 这可能是最通俗的 React Fiber(时间分片) 打开方式这文章如标题，真是最通俗易懂。
  2. Deep In React之浅谈 React Fiber 架构 target=)
  3. Fiber 内部: 深入理解 React 的新 reconciliation 算法
  4. 如何以及为什么 React Fiber 使用链表遍历组件树

有能力者，可以直接科学上网看原文吧

  1. Lin Clark - A Cartoon Intro to Fiber - React Conf 2017
  2. Inside Fiber: in-depth overview of the new reconciliation algorithm in React
  3. In-depth explanation of state and props update in React
  4. The how and why on React’s usage of linked list in Fiber to walk the component’s tree
  5. Practical application of reverse-engineering guidelines and principles

以下按自己喜欢挑选吧：

  • react 的事件机制
  1. 【React深入】React事件机制
  2. 谈谈React事件机制和未来(react-events)
  • react 调度机制
  1. 【React深入】setState的执行机制
  2. 再谈react setState-setState如何处理更新？
  • Hook
  1. react hooks的诞生
  2. react hooks进阶与原理
  • yck 系列
  1. 剖析 React 源码：先热个身
  2. 剖析 React 源码：render 流程（一）
  3. 剖析 React 源码：render 流程（二）
  4. 剖析 React 源码：调度原理
  5. 剖析 React 源码：组件更新流程（一）

热身做完，直接上战场吧：

视频：React源码深度解析 高级前端工程师必备技能

电子书：React 源码解析

惭愧，我到现在还没看完。

看得差不多就做点题目吧：

  • 中高级前端大厂面试秘籍，寒冬中为您保驾护航，直通大厂
  • 你要的 React 面试知识点，都在这了

组件设计：

准备看 ant.design的源码

前端工程化-webpack

  1. 使用和基本概念
  • 了解 loader、plugin，并且掌握一些基本常用的
  • 了解 babel

参考资料：玩转webpack

  1. 学会优化
  • 体积优化：tree shaking、按需引入，代码切割
  • 打包速度优化：缓存、多线程打包、优化打包路径

参考资料：

  • 那些花儿，从零构建Vue工程
  • Webpack 4 配置最佳实践
  • webpack4 的30个步骤打造优化到极致的 react 开发环境
  1. 原理
  • webpack构建步骤
  • 细说 webpack 之流程篇
  • Webpack HMR 原理解析
  • 从零实现webpack热更新HMR
  • 干货！撸一个webpack插件(内含tapable详解+webpack流程)
  • 手把手教你撸一个 Webpack Loader
  1. 项目参考

其实 webpack 配置都是靠抄。。。。

  • le-cli
  • fe-workflow这是我参考最多的项目，涉及了初始化项目、打包、测试、联调、质量把控、上线、回滚、线上监控（性能监控、异常监控）等等

学习心得

其实学习心得并没改变，只不过坚持做两年而已

刻意练习

这个之前 2018 年时候写过，就不重复了~

链接：刻意练习

时间管理