靠着这份280页《前端校招面试真题解析大全》，我拿到了阿里的offer

柔情只为你懂 2022-11-05 08:42 24阅读 0赞

![46cd9c8b4ba41e5a1d10b231576e7f49.png][]

楼主前端方向，是在去年参加的春招，从牛客网上收获了很多经验贴和面经，在春招准备和面试过程中，收获了不少同学的帮助和鼓励。

最终运气比较好，拿到阿里、美团、OPPO、360和有赞的意向书，拿到阿里意向书以后便没有参加其他公司的面试了，现在把之前总结的春招经验分享出来，希望能够帮助到其他朋友～

# 前端知识点汇总 #

前端知识点是我在准备春招过程中，看书和经验贴中总结到的一些知识点，不仅面试中经常问到，同时对于自己未来的工作和学习也很重要，也欢迎大家一起补充～

### 一、JavaScript ###

1.  原始值和引用值类型及区别
2.  判断数据类型typeof、instanceof、Object.prototype.toString.call()、constructor
3.  类数组与数组的区别与转换
4.  数组的常见API
5.  bind、call、apply的区别
6.  new的原理
7.  如何正确判断this？
8.  闭包及其作用
9.  原型和原型链
10. prototype与\_\_proto\_\_的关系与区别
11. 继承的实现方式及比较
12. 深拷贝与浅拷贝
13. 防抖和节流
14. 作用域和作用域链、执行期上下文
15. DOM常见的操作方式
16. Array.sort()方法与实现机制
17. Ajax的请求过程
18. JS的垃圾回收机制
19. JS中的String、Array和Math方法
20. addEventListener和onClick()的区别
21. new和Object.create的区别
22. DOM的location对象
23. 浏览器从输入URL到页面渲染的整个流程（涉及到计算机网络数据传输过程、浏览器解析渲染过程）
24. 跨域、同源策略及跨域实现方式和原理
25. 浏览器的回流（Reflow）和重绘（Repaints）
26. JavaScript中的arguments
27. EventLoop事件循环
28. 宏任务与微任务
29. BOM属性对象方法
30. 函数柯里化及其通用封装
31. JS的map()和reduce()方法
32. “”和“=”的区别
33. setTimeout用作倒计时为何会产生误差？

### 二、ES6 ###

1. let、const和var的概念与区别  
2. 变量提升与暂时性死区  
3. 变量的结构赋值  
4. 箭头函数及其this问题  
5. Symbol概念及其作用  
6. Set和Map数据结构  
7. Proxy  
8. Reflect对象  
9. Promise（手撕Promise A+规范、Promise.all、Promise相关API和方法）  
10. Iterator和for…of（Iterator遍历器的实现）  
11. 循环语法比较及使用场景（for、forEach、for…in、for…of）  
12. Generator及其异步方面的应用  
13. async函数  
14. 几种异步方式的比较（回调、setTimeout、Promise、Generator、async）  
15. class基本语法及继承  
16. 模块加载方案比较（CommonJS和ES6的Module）  
17. ES6模块加载与CommonJS加载的原理

### 三、HTML/CSS ###

1. CSS权重及其引入方式  
2. 标签全部作用  
3. 用CSS画三角形  
4. 未知宽高元素水平垂直居中（方案及比较）  
5. 元素种类的划分  
6. 盒子模型及其理解  
7. 定位方式及其区别（文档流）  
8. margin塌陷及合并问题  
9. 浮动模型及清除浮动的方法  
10. CSS定位属性  
11. display及相关属性  
12. IFC与BFC  
13. 圣杯布局和双飞翼布局的实现  
14. Flex布局  
15. px、em、rem的区别  
16. Less预处理语言  
17. 媒体查询  
18. vh与vw  
19. H5的语义化作用及语义化标签  
20. Web Worker和Web Socket  
21. CSS3及相关动画  
22. 如何实现响应式布局  
23. SEO的概念及实现  
24. HTML5的新特性  
25. Less和Sass使用

### 四、HTTP与计算机网络 ###

1. TCP/IP协议分层管理  
2. 三次握手四次挥手机制及原因  
3. HTTP方法  
4. GET和POST的区别  
5. HTTP建立持久连接的意义  
6. HTTP报文的结构  
7. HTTP状态码  
8. Web服务器及其组成  
9. HTTP报文首部  
10. HTTP通用首部字段  
11. HTTP请求首部字段、响应首部字段、实体首部字段  
12. Cookie相关首部字段  
13. HTTPS与HTTP区别及实现方式  
14. Cookie与Session  
15. 基于HTTP的功能追加协议（SPY、WebSocket、HTTP）  
16. 常见的Web攻击分类  
17. TCP与UDP区别  
18. 存储机制localStorage、sessionStorage与Cookie存储技术  
19. XSS攻击及防御  
20. CSRF攻击及防御

### 五、前端工程化 ###

1. 前端工程化的流程（架构选型、业务开发、测试、打包构建、部署上线、项目监控）  
2. Webpack基本概念与配置  
3. loader与plugin原理与实现  
4. Webpack的模块热替换及实现  
5. Webpack的优化问题  
6. SPA及其优缺点  
7. SSR实现及优缺点  
8. 设计模式（工厂模式、单例模式、原型模式、\*\*\*模式、适配器模式、观察者模式等…）

### 六、React ###

1. React自身特点及选型时考虑  
2. React与VUE的异同  
3. Virtual DOM  
4. React生命周期  
5. Diff算法  
6. 受控组件与非受控组件  
7. 高阶组件  
8. Flux架构模式（涉及MVC/MVVM、Flux）  
9. Redux设计概念、设计原则、方法、redux实现异步流的库  
10. 纯组件（Pure Component）与shouldComponentUpdate关系  
11. Redux中的组件与connect函数  
12. React Fiber架构  
13. React Hooks的作用及原理

### 七、NodeJS ###

1. NodeJS基本概念与特点  
2. CommonJS规范、核心模块  
3. Node的异步I/O  
4. Node的内存控制  
5. Node构建网络服务（TCP、HTTP、Web Socket服务等）  
6. Node的进程

### 八、需要会手撕的代码部分 ###

1. Promise（A+规范）、then、all方法  
2. Iterator遍历器实现  
3. Thunk函数实现（结合Generator实现异步）  
4. async实现原理（spawn函数）  
5. class的继承  
6. 防抖和节流  
7. Ajax原生实现  
8. 深拷贝的几种方法与比较  
9. 继承的几种实现与比较  
10. 未知宽高的元素水平垂直居中  
11. 三栏布局的实现  
12. 两栏布局的实现  
13. React高阶组件  
14. 数组去重  
15. 几种排序算法的实现及其复杂度比较  
16. 前序后序遍历二叉树（非递归）  
17. 二叉树深度遍历（分析时间复杂度）  
18. 跨域的实现（JSONP、CORS）

### 九、数据可视化 ###

1. Canvas和SVG的区别  
2. 在考虑设计可视化图表时，结合Canvas和SVG特性会怎么取舍  
3. 常见的可视化组件库  
4. 可视化组件库如Echarts的设计思路  
5. 一些偏向底层的可视化组件库和前端框架结合方面需要考虑哪些问题  
6. 可视化组件如何做到数据驱动？

### 十、计算机基础 ###

1. 计算机系统  
2. 线程与进程  
3. 常见的git指令  
4. Linux相关指令  
5. 其他类型的编程语言（如Java）  
6. 数据库

## 前端面试题汇总 ##

前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。我做了一个整理，并且在技术博客找到了专业的解答，大家可以参考下：

![4a5419a1c90ddbb21a2fdcf130577364.png][]  
![0432b8e539325b94948089383d0bfa8c.png][]  
![9749ea39072fc4b7b27af6f3a4db5ab1.png][]

#### **由于篇幅有限，只能分享部分面试题，完整版面试题及答案可以[【点击我】][Link 1]阅读下载哦~无偿分享给大家** ####

## 感悟 ##

春招面试的后期，运气和实力都很重要，自己也是运气比较好，为了回馈粉丝朋友们（毕竟自己也玩了这么久哈哈哈），整理个人感悟和总结以上。最后祝愿大家能够收获理想offer！！

[46cd9c8b4ba41e5a1d10b231576e7f49.png]: /images/20221023/1c432e923cdb478ea9b121c460a9b922.png
[4a5419a1c90ddbb21a2fdcf130577364.png]: /images/20221023/423aeb66e7ad4f1aade6d34ace9766ec.png
[0432b8e539325b94948089383d0bfa8c.png]: /images/20221023/5d749066359f4514b7bca699baa79524.png
[9749ea39072fc4b7b27af6f3a4db5ab1.png]: /images/20221023/146a5d21bd6b4f7b93dc4689714bae7c.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=SBb7oFqq