从零开始准备的前端春招实习(已拿头条阿里腾讯提前批offer)

背景

和很多人一样，我也是半路转的前端。自己一开始是做服务端开发的，也在美团日常实习过一段时间。 在实习期间，主要就是设计数据库表、Java/SpringBoot的CURD、提供RESTFul接口以及部署服务器的一些工作。因为日常工作会与前端工程师们打交道，在那个时候发觉前端很酷，自己对服务端的开发确实不是很感兴趣，以及到后面对JS的喜爱，让我坚决的走上了前端的道路。

计算机基础

万丈高楼平地起，作为校招生，计算机基础绝对是面试中的重中之重。
希望大家可以夯实基础，不要抱有侥幸的心理。

数据结构与算法

代码来自于LeetCode

基本的数据结构

• 数组
• 链表

这两个数据比较的简单，数组可以结合JS的 Array 来学习。 而链表的结构如下

function ListNode(val) {
    this.val = val;
    this.next = null;
}
复制代码

树

树的话要掌握以下几种结构

• 二叉树
• 哈夫曼树
• 二叉搜索树
• AVL树
• 2-3树
• 红黑树

树的结构如下

function TreeNode(val) {
    this.val = val;
    this.left = this.right = null;
}
复制代码

树涉及的算法

• 前序遍历、中序遍历、后序遍历、层次遍历
• 每种树查找某个结点的时间复杂度
• 每种树增加或删除结点的需要的步骤

图

图的表示法

• 邻接表
• 邻接矩阵

图涉及的算法

• 最小生成树
• 最短路径
• 并查集

查找算法

• 遍历
• 二分查找

排序算法

• 插入排序(近乎有序的情况下效率很高)
• 选择排序
• 冒泡排序
• 归并排序
• 快速排序

面试前端不会有什么太高深的算法，掌握基础就好了

书籍推荐:

算法(第4版) [Algorithms Fourth Edition] 人民邮电出版社

计算机网络

计算机网络的知识点比较多，但是针对面试的话，考察的点主要有如下几个

• OSI7层模型
• 应用层协议，HTTP与HTTPS，DNS
• 传输层协议，TCP与UDP
• 网络层协议，IP

协议的话，主要考察这些方面

• HTTP具体的内容、请求类型，HTTP与HTTPS的区别
• DNS的具体流程
• TCP与UDP的异同，两个协议的具体内容，TCP连接建立与断开的流程、TCP拥塞控制

计算机网络部分只要了解常用的知识，自己能对网络有个感性的认识即可。有条件的话，可以看一下推荐的这本书，是自己当时的教材，讲得非常生动，翻译得也很好。

书籍推荐:

计算机网络：自顶向下方法(原书第7版) 机械工业出版社

操作系统

每天都在操作系统上工作，如果不了解程序是怎么在系统上跑起来的，也说不过去吧？理解了操作系统的知识，虽然说没有什么直接的用处，但是我们在写程序的时候，会通透很多。

进程与线程

进程是对运行时程序的封装

• 进程和线程以及它们的区别
• 进程间的通信的几种方式
• 线程同步的方式
• 什么是死锁？死锁产生的条件
• 死锁的处理
• 进程有哪几种状态
• 操作系统中进程调度策略有哪几种

内存管理

程序是要装进内存，才能运行起来的

• 分页和分段有什么区别
• 什么是虚拟内存
• 页面置换算法

操作系统还有不少的知识，但是就面试来说，考察的东西就以上的几个知识点，有兴趣可以看书慢慢补全

推荐书籍:

计算机操作系统(汤小丹) 西安电子科技大学出版社

计算机基础这一块主要的部分其实差不多了，还有像《编译原理》《计算机组成原理》这两门课，考察的点比较少，例如 词法分析 、有限状态机以及原码/补码/反码、浮点数表示法 、进制转换等等，遇到了再进行针对性的复习即可。

前端基础

HTML

说实话，这部分考察的东西不是很多，主要以下几点

• HTML的解析过程
• HTML5提供的新API，语义化，WebStorage等等

CSS

CSS基础

• 块状元素与行内元素
• 盒子模型
• 浮动与定位
• 浏览器是怎样解析CSS选择器

复杂一点的

• BFC
• Flex布局
• Grid布局
• n行自适应
• 垂直居中的多种方式
• 重排和重绘

CSS3新功能

• background
• 动画

个人的看法是，对于CSS的学习，不要太钻牛角尖，因为CSS是一门有魅力但是又很复杂的语言。能够把上面的几个知识点理解透彻，融会贯通，相信面试官也不会在CSS方面刁难你了。

JavaScript

说实话，相对于HTML和CSS，JS才是前端面试的重点

JS基础

• 基本的语法与特性
• 基本类型
• 引用类型
• 变量
• 方法
• 立即执行函数表达式
• 作用域
• 闭包
• 原型
• Ajax与跨域
• DOM
• BOM

以上几点，都是JavaScript的重中之重。别再看网上JS的入门教程了，强烈给大家推荐这本书，非常适合入门者

JavaScript高级程序设计（第3版）

JS进阶

JS的进阶主要关注的部分是：作用域、闭包、原型以及一些常见方法的实现

• 词法作用域的含义
• 执行上下文
• 作用域链
• this 的指向
• 变量对象
• 原型链深入
• call、apply、bind的实现

推荐书籍：

你不知道的JavaScript

ES6

现在ES6已经非常普及了，作为不过时的前端，还是需要了解

ES6基础

• let / const
• 模块化语法
• 对象扩展
• Class 与 继承
• 函数扩展
• 箭头函数
• Set和Map

ES6新对象

• Promise
• Iterator
• Generator
• Decorator
• Proxy

以及一些新标准的语法

• async/await

ES6的基本语法，面试会考察一些常用的，如果不了解也不用太纠结，毕竟只是API。

推荐书籍：

ES6标准入门(阮一峰)

前端工具

框架

这里我把常用的前端框架 React 和 Vue 也算在工具里面了，因为本人毕竟熟悉 React，所以下面会针对 React 来展开，其它框架的考察的知识点也类似

React

• React的基本用法与常见API
• JSX语法
• 组件、数据流、生命周期
• React获取真实DOM
• React事件系统
• 受控/非受控组件
• 样式处理
• 高阶组件
• 性能优化方法
• setState与diff算法源码

Redux

• 具体流程
• 实现原理
• react-redux的用法

Vue

其实 Vue 全家桶我只会一些常用的API以及双向绑定的实现原理，就不展开了。

面试官一般不会专门去问你框架的知识，除非你自己的项目里面使用过，要考察一下你了解到什么成都。如果不了解一点框架源码的知识，只提API，是没有什么亮点的，因为大家都会。

前端路由

前端路由基本的思想就是根据路径去匹配对应的组件，然后用组件里面的内容去替换页面里面需要路由的内容

• Hash模式
• History模式

打包工具

对打包工具不会有太多的考察，一般来说使用过webpack(功能强大)就够了

• 配置文件的写法
• 常用loader
• 常用plugins
• webpack-dev-server

Node.js

前端工具，其实都是建立在Node.js的基础上的，所以这一块也要了解

• CommandJS规范
• npm 脚本
• Node.js 常用的模块
• 服务端框架(有了解过会比较好)

Babel

JS的转译工具，会用即可

• 转译ES6
• 转译JSX
• 自己定义的一些转译规则等等

其它修炼方式

1. 看源码

很多前端同学觉得，前端没必要刷题，因为工作足够简单。确实，引用 闰土小叔 的一句话

Vuecli一把梭真的爽的一笔，再引个elementui，只要搜索引擎玩的6，写代码根本不需要智力

但是，我们有想过这些问题嘛

• 如何从零开始搭建一个脚手架呢？
• 如何实现一个类似React的视图层框架呢？
• 如何提高diff算法的效率？

这些工具都是世界上最优秀的JS大师耗费多年心血写出来的，直接开源给你看都不想看嘛？
看不懂，直接看网上的博客呗。

2. LeetCode

直接说刷题的好处

• 让你对JS更加熟悉，不再是读读背背
• 深入理解数据结构与算法
• 锻炼和保持编码能力
• 面试要考
• AC的快感

刷LeetCode，对编码能力提升真的有很大帮助。从零开始刷满50题，写起JS来绝对是不一样的体验。入门的话，可以看一下推荐的这本书

剑指offer

《剑指offer》加上 LeetCode ,题量可以保持200道的话，已经很不错了。当然，面试出重复题目的概论不高，最主要是提供一点思路。

后续...

篇幅关系，后面会再更新一些基础知识之外的常见考点，如果有什么错误或者遗漏，欢迎指正。

转载于:https://juejin.im/post/5c9d8798e51d451a40044cd4