超全前端知识点汇总！！

年初时，我开始构建了前端一站式学习网站（https://fe-journey.cn），目标是希望大家能够在网站上完成前端的学习与入门，拿到适合自己的offer。

到今天网站已经上线几个月，差不多已经有800多个小伙伴了！今天把网站里面收集的知识点一次性列出来，欢迎收藏，去网站里查看答案，也欢迎进Group一起学习进步，产品持续迭代中~

JavaScript/TypeScript篇

JavaScript

1. 事件循环机制

2. 宏任务与微任务

3. setTimeout产生误差原因

4. 如何判断数据类型

5. Array常见的方法

6. String常见的方法

7. Object常见的方法

8. map和reduce方法

9. 浏览器输入URL过程

10. Array.sort实现原理

11. 深拷贝和浅拷贝的区别

12. JS的垃圾回收机制

13. 作用域和作用域链、执行期上下文

14. 防抖和节流

15. 原型和原型链

16. 回流（Reflow）和重绘（Repaints）

17. “==”和“===”的区别

18. 继承的实现方式及差异

19. 闭包及其作用

20. JS的arguments

21. new一个类的原理

22. DOM常见的操作方式

23. addEventListener和onClick的区别

24. Ajax请求的过程

25. bind/call/apply的区别

26. 原始值和引用值的区别

27. 如何正确判断this指向

28. new和Object.create的区别

29. BOM属性对象方法

30. 函数柯里化及其通用封装

31. prototype和__proto__的区别

32. DOM的location对象

33. 类数组与数组的区别与转换

ES6

1. 变量的结构赋值

2. 箭头函数与this指向

3. Promise概念

4. Promise的API

5. 几种异步方式的比较

6. CommonJS和ESModule区别

7. Iterator的实现

8. class基本语法与继承

9. 循环的比较和使用场景

10. let/const和var的区别

11. 变量提升和暂时性死区

12. Set和Map的区别

13. async函数概念

14. Proxy的概念与使用

15. Symbol的概念与使用

16. Generator的概念与使用

17. Reflect的概念与使用

TypeScript

1. TypeScript与JavaScript 的主要区别是什么

2. TypeScript的类型系统

3. TypeScript中的泛型有什么用途

4. TypeScript中的装饰器是什么

5. TypeScript中的枚举是什么

6. 如何在TypeScript中实现封装

7. TypeScript的编译过程

8. TypeScript中的类和构造函数

9. 如何集成 TS 到现有的 JS 项目中

10. TypeScript 中的接口和类型别名有什么区别？

11. TypeScript支持哪些高级类型操作

12. 如何在TypeScript中处理异步编程

13. TypeScript 中的模块和命名空间

HTML&CSS篇

HTML

1. H5语义化标签及其作用

2. HTML5的新特性

3. <a></a>标签的作用有哪些

4. HTML元素种类的划分

5. SEO概念及实现

CSS

1. 未知宽高的元素水平垂直居中

2. CSS权重机制

3. CSS引入方式

4. Less、Sass和CSS的区别

5. 如何实现响应式布局

6. CSS定位方式及其区别

7. CSS定位属性

8. 常见CSS3及动画

9. px/em/rem的区别

10. vh与vw的使用

11. display及其相关属性

12. 圣杯布局的实现

13. 双飞翼布局的实现

14. IFC与BFC

15. 盒模型概念

16. flex布局的应用

17. 浮动模型及清除浮动的方法

18. margin塌陷及合并问题

19. 用CSS画一个三角形

计算机网络篇

HTTP协议

1. HTTP与HTTPS之间的区别？

2. HTTP的报文结构是什么？

3. HTTP的状态码有哪些？

4. HTTP常见响应状态码？

5. HTTP通用首部字段有哪些？

6. GET和POST请求的区别？

7. HTTP协议1.0、1.1和2.0有哪些特点？

8. HTTP长连接、短连接和持久连接的区别和应用场景？

9. Cookie和Session的区别？

10. HTTPS连接建立的过程？

11. 永久性重定向和暂时性重定向的区别？

12. HTTP报文首部有哪些？

13. HTTP请求首部字段、响应首部字段、实体首部字段有哪些？

14. 什么是对称加密算法？

15. 什么是非对称加密算法？

16. 重定向和转发的区别？

17. Cookie相关首部字段？

18. 基于HTTP的功能追加协议有哪些？

19. 网络如何保证不丢包？

TCP/IP协议

1. TCP/IP协议分层结构？

2. TCP三次握手过程？

3. TCP为什么是三次握手，为什么两次不行？

4. TCP四次挥手过程

5. TCP与UDP的区别与场景？

6. 常见的网络服务分层？

7. TCP如何做到滑动窗口和拥塞控制？

8. TCP粘包的原因和解决办法？

9. TCP的报文格式？

10. UDP的报文格式？

11. OSI和TCP/IP模型是什么？

12. TIME-WAIT和CLOSE_WAIT是什么？

13. TIME-WAIT过多出现原因和解决方法？

14. 视频传输是用TCP还是UDP，丢包如何解决？

网络安全

1. 常见的Web攻击分类

2. XSS攻击及防御

3. CSRF攻击及防御

其他

1. 浏览器输入URL过程

2. LocalStorage、SessionStorage和Cookie的区别

3. Web服务器及其组成

4. DNS解析时有什么算法和方式减少重复操作?

前端框架篇

React

1. React生命周期

2. React Hooks的作用及原理

3. useCallback和useMemo性能优化

4. React的Diff算法

5. Virtual DOM

6. Flux的架构模式

7. Redux设计思路

8. 高阶组件的定义

9. React Fiber架构

10. Pure Component与shouldComponentUpdate关系

11. 受控组件与非受控组件

12. React和Vue的异同

13. React有哪些特点

Vue

1. Vue的核心概念有哪些

2. Vue的响应式系统如何实现

3. Vue的生命周期Hooks并举例说明

4. 如何优化Vue应用的性能

5. Vue Router是如何与Vue.js集成的

6. Vuex的概念与作用

7. Vue的计算属性和侦听器

8. Vue的v-model如何实现双向数据绑定

数据结构与算法篇

算法

1. 数据结构-数组

2. 数据结构-字符串

3. 数据结构-树

4. 二分查找

5. 哈希表的应用

6. 动态规划

7. 递归与分治

前端纵向领域篇

工程化

1. 前端工程化流程

2. Webpack概念与配置

3. SSR实现及优缺点

4. SPA及其优缺点

5. 基础设计模式

6. 如何在Webpack实现优化

7. loader与plugin原理与实现

组件体系

1. 如何确保组件的复用性

2. 如何实现组件的状态管理

3. 如何实现组件间的通信

4. 如何设计一个高度封装的组件

5. 前端组件性能优化如何实现

数据可视化

1. Canvas和SVG的区别

2. 设计可视化图表时，Canvas和SVG如何取舍

3. 常见可视化组件库

4. ECharts的设计思路

5. 如何将可视化组件库与前端框架结合

Node

1. NodeJS基本概念与特点

2. Node的内存控制

3. Node的进程

4. CommonJS规范、核心模块

5. Node如何构建网络服务

6. Node的异步I/O机制

AIGC

1. 如何集成大模型到前端应用

2. 如何调用GPT的OpenAPI

3. 大模型和前端有哪些结合场景