# FE-Knowledge

**Repository Path**: null_862_1245/FE-Knowledge

## Basic Information

- **Project Name**: FE-Knowledge
- **Description**: 前端知识整理
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-12-06
- **Last Updated**: 2024-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 前端知识整理

## 一、数据结构与算法
### 常见数据结构
1. [字符串](./常考算法题/字符串)
2. [数组](./常考算法题/数组)
3. [链表](./常考算法题/链表)
4. [栈](./常考算法题/栈)
5. [队列](./常考算法题/队列)
6. [树](./常考算法题/树)
7. 图

### 算法
1. [排序算法](./常考算法题/排序)
2. [递归](./常考算法题/递归)
3. [回溯算法](./常考算法题/回溯算法)
4. [深度优先和广度优先搜索](./常考算法题/DFS+BFS)
5. [二分查找](./常考算法题/二分查找)
6. [动态规划](./常考算法题/动态规划)
7. [贪心算法](./常考算法题/贪心算法)

## 二、HTML、CSS
1. [介绍下重绘和回流](https://github.com/GGXXMM/FE-Knowledge/issues/62)
2. [盒子模型](https://github.com/GGXXMM/FE-Knowledge/issues/49)
3. [CSS选择器有哪些？哪些属性可继承？](https://github.com/GGXXMM/FE-Knowledge/issues/63)
4. [CSS定义的权重？优先级？](https://github.com/GGXXMM/FE-Knowledge/issues/64)
5. [简述伪类和伪元素](https://github.com/GGXXMM/FE-Knowledge/issues/65)
6. [CSS3新增的伪类有哪些？](https://github.com/GGXXMM/FE-Knowledge/issues/66)
7. [实现水平居中布局的方案](https://github.com/GGXXMM/FE-Knowledge/issues/50)
8. [实现垂直居中布局的方案](https://github.com/GGXXMM/FE-Knowledge/issues/51)
9. [实现水平垂直居中布局的方案](https://github.com/GGXXMM/FE-Knowledge/issues/52)
10. [两列/三列/多列布局实现的方案](https://github.com/GGXXMM/FE-Knowledge/issues/53)
11. [BFC及其应用](https://github.com/GGXXMM/FE-Knowledge/issues/54)
12. [清除浮动的方法](https://github.com/GGXXMM/FE-Knowledge/issues/55)
13. [常见的兼容性问题](https://github.com/GGXXMM/FE-Knowledge/issues/56)
14. [CSS绘制三角形、圆形、扇形、菱形](https://github.com/GGXXMM/FE-Knowledge/issues/57)
15. [CSS3动画](https://github.com/GGXXMM/FE-Knowledge/issues/58)
16. [简述Rem及其转换原理](https://github.com/GGXXMM/FE-Knowledge/issues/67)
17. [如何解决移动端Retina屏1px像素的问题？](https://github.com/GGXXMM/FE-Knowledge/issues/68)

## 三、JavaScript
1. [JavaScript类型判断](https://github.com/GGXXMM/FE-Knowledge/issues/106)
2. [JavaScript的类型转换（显示、隐式转换）](https://github.com/GGXXMM/FE-Knowledge/issues/105)
3. [JavaScript的原型与原型链](https://github.com/GGXXMM/FE-Knowledge/issues/1)
4. [JavaScript的执行上下文与执行上下文栈](https://github.com/GGXXMM/FE-Knowledge/issues/2)
5. [JavaScript的作用域与作用域链](https://github.com/GGXXMM/FE-Knowledge/issues/3)
6. [JavaScript的this](./JS/this指向/this.md)
7. [JavaScript的闭包](./JS/闭包/closure.md)
8. [JavaScript的垃圾回收机制和内存泄露](https://github.com/GGXXMM/FE-Knowledge/issues/6)
9. [JavaScript创建对象的多种方式及优缺点](https://github.com/GGXXMM/FE-Knowledge/issues/7)
10. [JavaScript实现继承的多种方式及优缺点](https://github.com/GGXXMM/FE-Knowledge/issues/8)
11. [JavaScript数组去重的多种方式及优缺点](https://github.com/GGXXMM/FE-Knowledge/issues/9)
12. [JavaScript数组扁平化](https://github.com/GGXXMM/FE-Knowledge/issues/89)
13. [JavaScript实现数组原型上的遍历方法forEach、map、filter、some、reduce](./JS/手写数组原型方法forEach+map+filter+some+every+reduce)
14. [JavaScript模拟实现new关键字](https://github.com/GGXXMM/FE-Knowledge/issues/10)
15. [JavaScript模拟实现Object.create](https://github.com/GGXXMM/FE-Knowledge/issues/99)
16. [JavaScript模拟实现Object.assign](https://github.com/GGXXMM/FE-Knowledge/issues/100)
17. [JavaScript模拟实现JSON.stringify](https://github.com/GGXXMM/FE-Knowledge/issues/11)
18. [JavaScript模拟实现JSON.parse](https://github.com/GGXXMM/FE-Knowledge/issues/12)
19. [JavaScript模拟实现instanceof](https://github.com/GGXXMM/FE-Knowledge/issues/13)
20. [JavaScript模拟实现call、apply、bind](https://github.com/GGXXMM/FE-Knowledge/issues/14)
21. [JavaScript模拟实现compose](./JS/手写compose/compose.js)
22. [JavaScript实现函数防抖和节流](https://github.com/GGXXMM/FE-Knowledge/issues/16)
23. [JavaScript实现函数柯里化和反柯里化](https://github.com/GGXXMM/FE-Knowledge/issues/15)
24. [JavaScript实现偏函数](https://github.com/GGXXMM/FE-Knowledge/issues/101)
25. [JavaScript实现浅拷贝和深拷贝](https://github.com/GGXXMM/FE-Knowledge/issues/17)
26. [JavaScript实现发布订阅模式](https://github.com/GGXXMM/FE-Knowledge/issues/90)
27. [JavaScript实现EventEmitter](https://github.com/GGXXMM/FE-Knowledge/issues/128)
27. [JavaScript实现图片懒加载](https://github.com/GGXXMM/FE-Knowledge/issues/102)
28. [JavaScript实现图片预加载](https://github.com/GGXXMM/FE-Knowledge/issues/104)
29. [js动画](https://github.com/GGXXMM/FE-Knowledge/issues/69)

## 四、ES6
1. [ES6 之 let 和 const](https://github.com/mqyqingfeng/Blog/issues/82)
2. [ES6 之 模板字符串](https://github.com/mqyqingfeng/Blog/issues/84)
3. [ES6 之 箭头函数](https://github.com/mqyqingfeng/Blog/issues/85)
4. [ES6 之 模拟实现 Symbol 类型](https://github.com/mqyqingfeng/Blog/issues/87)
5. [ES6 之 迭代器与 for of](https://github.com/mqyqingfeng/Blog/issues/90)
6. [ES6 之 模拟实现一个 Set 数据结构](https://github.com/mqyqingfeng/Blog/issues/91)
7. [ES6 之 WeakMap](https://github.com/mqyqingfeng/Blog/issues/92)
8. [ES6 之 Promise](https://github.com/mqyqingfeng/Blog/issues/98)
9. [ES6 之 Generator 的自动执行](https://github.com/mqyqingfeng/Blog/issues/99)
10. [ES6 之 Async/await](https://github.com/mqyqingfeng/Blog/issues/100)
11. [ES6 之异步处理实战](https://github.com/mqyqingfeng/Blog/issues/101)
12. [ES6 之 Babel 将 Generator 编译成了什么样子](https://github.com/mqyqingfeng/Blog/issues/102)
13. [ES6 之 Babel 将 Async 编译成了什么样子](https://github.com/mqyqingfeng/Blog/issues/103)
14. [ES6 之 Babel 是如何编译 Class 的(上)](https://github.com/mqyqingfeng/Blog/issues/105)
15. [ES6 之 Babel 是如何编译 Class 的(下)](https://github.com/mqyqingfeng/Blog/issues/106)
16. [ES6 之 defineProperty 与 proxy](https://github.com/mqyqingfeng/Blog/issues/107)
17. [ES6 之 模块加载方案](https://github.com/mqyqingfeng/Blog/issues/108)
18. [ES6 之 我们来聊聊装饰器](https://github.com/mqyqingfeng/Blog/issues/109)
19. [ES6 之 私有变量的实现](https://github.com/mqyqingfeng/Blog/issues/110)
20. [ES6 完全使用手册](https://github.com/mqyqingfeng/Blog/issues/111)
21. [手写E6字符串模板](https://github.com/GGXXMM/FE-Knowledge/issues/103)
22. [手写一个Promise](https://github.com/GGXXMM/FE-Knowledge/issues/61)
23. [手写async/await](https://github.com/GGXXMM/FE-Knowledge/issues/91)

## 五、TS
### 基础类型
1. [Typescript 和 JavaScript的区别](https://github.com/GGXXMM/FE-Knowledge/issues/133)
2. [TS中 any 和 unknown 类型区别](https://github.com/GGXXMM/FE-Knowledge/issues/134)
3. [TS中 never 和 void 的区别](https://github.com/GGXXMM/FE-Knowledge/issues/135)
4. [tsconfig.json 有什么作用？](https://github.com/GGXXMM/FE-Knowledge/issues/136)
### 高级类型
5. [TS中使用 Union Types 时有哪些注意事项？](https://github.com/GGXXMM/FE-Knowledge/issues/137)
6. [TS中 keyof、typeof 关键字的作用](https://github.com/GGXXMM/FE-Knowledge/issues/138)
7. [类型别名 type 和接口 interface 区别？](https://github.com/GGXXMM/FE-Knowledge/issues/139)
### 接口
9. [TS中 interface 可以给 Function/Array/Class(Indexable) 做声明吗？](https://github.com/GGXXMM/FE-Knowledge/issues/140)
10. [TS中同名的 interface 或者同名的 interface 和 class 会合并吗？](https://github.com/GGXXMM/FE-Knowledge/issues/141)

### 类
11. [TS中的类及其特性](https://github.com/GGXXMM/FE-Knowledge/issues/142)
12. [TS如何设计 Class 的声明？](https://github.com/GGXXMM/FE-Knowledge/issues/143)

### 函数
13. [TS中的 this 和JS中的 this 有什么区别？](https://github.com/GGXXMM/FE-Knowledge/issues/144)

### 泛型
14. [TS中的泛型的应用场景](https://github.com/GGXXMM/FE-Knowledge/issues/145)

### 原理
15. [逆变、协变、双向协变和不变的理解？](https://github.com/GGXXMM/FE-Knowledge/issues/146)
16. [编译TS用 tsc 还是 babel？](https://github.com/GGXXMM/FE-Knowledge/issues/147)

## 六、框架
### Vue 生态
1. [SPA、MPA的区别是什么？](https://github.com/GGXXMM/FE-Knowledge/issues/110)
2. [简述 Vue 的生命周期以及每个阶段做的事](https://github.com/GGXXMM/FE-Knowledge/issues/107)
3. [你对MVC、MVP和MVVM的理解](https://github.com/GGXXMM/FE-Knowledge/issues/78)
4. [对Vue设计理念的理解](https://github.com/GGXXMM/FE-Knowledge/issues/75)
5. [对Vue组件化的理解](https://github.com/GGXXMM/FE-Knowledge/issues/74)
5. [你对v-model双向绑定原理的理解？](https://github.com/GGXXMM/FE-Knowledge/issues/108)
6. [Virtual DOM？它是如何提升性能的？](https://github.com/GGXXMM/FE-Knowledge/issues/35)
7. [你对vue响应式原理的理解？](https://github.com/GGXXMM/FE-Knowledge/issues/81)
8. [手写vue的数据响应式](https://github.com/GGXXMM/FE-Knowledge/issues/92)
9. [你对vue编译原理的理解？从template到render的处理过程](https://github.com/GGXXMM/FE-Knowledge/issues/111)
10. [Vue实例挂载的过程中发生了什么？](https://github.com/GGXXMM/FE-Knowledge/issues/122)
11. [Vue的 diff 时间复杂度如何从O(n^3)优化到 O(n)？vue2和vue3 diff 有什么差异？](https://github.com/GGXXMM/FE-Knowledge/issues/36)
12. [Vue中的 key 作用？为什么建议不用index作为key？](https://github.com/GGXXMM/FE-Knowledge/issues/73)
13. [Vue要做权限管理该怎么做?控制到按钮级别的权限怎么做?](https://github.com/GGXXMM/FE-Knowledge/issues/118)
14. [你是怎么处理vue项目中的错误？](https://github.com/GGXXMM/FE-Knowledge/issues/121)
15. [了解哪些vue性能优化的方法](https://github.com/GGXXMM/FE-Knowledge/issues/76)
16. [vue渲染大量数据时应该怎么优化？](https://github.com/GGXXMM/FE-Knowledge/issues/109)
17. [实际工作中，总结的vue最佳实践有哪些?](https://github.com/GGXXMM/FE-Knowledge/issues/120)
18. [从0到1构架一个vue项目，说说有哪些步骤、哪些重要 插件、目录结构你会怎么组织?](https://github.com/GGXXMM/FE-Knowledge/issues/119)

#### Vue2
19. [Vue v-if/v-for 哪个优先级更高？](https://github.com/GGXXMM/FE-Knowledge/issues/70)
20. [Vue v-show 和 v-if 的区别](https://github.com/GGXXMM/FE-Knowledge/issues/129)
21. [v-once 的使用场景有哪些？](https://github.com/GGXXMM/FE-Knowledge/issues/114)
22. [自定义指令及其使用场景有哪些？](https://github.com/GGXXMM/FE-Knowledge/issues/116)
23. [computed、methods、watch 的区别?](https://github.com/GGXXMM/FE-Knowledge/issues/130)
24. [Vue的父组件和子组件生命周期钩子执行顺序是什么？](https://github.com/GGXXMM/FE-Knowledge/issues/39)
25. [Vue组件间的通信方式（9种）](https://github.com/GGXXMM/FE-Knowledge/issues/37)
26. [Vue中，子组件为何不可以修改父组件传递的Props？](https://github.com/GGXXMM/FE-Knowledge/issues/38)
27. [Vue如何扩展一个组件？](https://github.com/GGXXMM/FE-Knowledge/issues/117)
28. [Vue中什么是递归组件？举例说明下](https://github.com/GGXXMM/FE-Knowledge/issues/115)
29. [Vue中什么是异步组件？举例说明下](https://github.com/GGXXMM/FE-Knowledge/issues/113)
30. [Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？](https://github.com/GGXXMM/FE-Knowledge/issues/72)
31. [nextTick是干什么的？实现原理是什么？](https://github.com/GGXXMM/FE-Knowledge/issues/80)
32. [keep-alive缓存的机制](https://github.com/GGXXMM/FE-Knowledge/issues/94)
33. [vue插槽是如何运作的?](https://github.com/GGXXMM/FE-Knowledge/issues/82)
34. [Vue2.0响应式原理中Object.defineProperty有什么缺陷？为什么在Vue3.0采用了Proxy？](https://github.com/GGXXMM/FE-Knowledge/issues/34)
35. [介绍Object.defineProperty()](https://github.com/GGXXMM/FE-Knowledge/issues/60)
36. [手写实现EventBus](https://github.com/GGXXMM/FE-Knowledge/tree/master/Vue/%E6%89%8B%E5%86%99EventBus)

#### Vue3
37. [Vue3 的设计目标是什么？具体如何实现的？](https://github.com/GGXXMM/FE-Knowledge/issues/77)
38. [如何看待Vue3的 Composition API？](https://github.com/GGXXMM/FE-Knowledge/issues/131)
39. [Vue3 性能提升表现在哪几方面？](https://github.com/GGXXMM/FE-Knowledge/issues/126)

#### Vuex
42. [Vuex的设计思想](https://github.com/GGXXMM/FE-Knowledge/issues/40)
43. [Vuex中的getters和state的区别？](https://github.com/GGXXMM/FE-Knowledge/issues/41)
44. [Vuex中actions和mutations有什么区别？](https://github.com/GGXXMM/FE-Knowledge/issues/123)
46. [为什么Vuex的mutation中不能做异步操作？](https://github.com/GGXXMM/FE-Knowledge/issues/42)
47. [页面刷新后Vuex的state数据丢失怎么解决？](https://github.com/GGXXMM/FE-Knowledge/issues/124)
48. [手写vuex（实现思路）](https://github.com/GGXXMM/FE-Knowledge/issues/125)
#### vue-router
49. [vue-router中如何保护指定路由的安全？](https://github.com/GGXXMM/FE-Knowledge/issues/79)
50. [手写vue-router路由](https://github.com/GGXXMM/FE-Knowledge/issues/112)
#### axios
51. [手写axios](https://github.com/GGXXMM/FE-Knowledge/issues/93)

## 七、工具
### webpack
1. [为什么需要构建工具？为什么选择webpack？](https://github.com/GGXXMM/FE-Knowledge/issues/83)
2. [webpack基本配置？](https://github.com/GGXXMM/FE-Knowledge/issues/84)
3. [webpack的热更新使用及原理分析（是如何做到在不刷新浏览器的前提下更新页面的）](https://github.com/GGXXMM/FE-Knowledge/issues/85)
4. [webpack的性能优化](https://github.com/GGXXMM/FE-Knowledge/issues/86)
5. [webpack构建原理](https://github.com/GGXXMM/FE-Knowledge/issues/87)

### Rollup
1. [Rollup基础配置？及其构建原理？](https://github.com/GGXXMM/fe-knowledge/issues/151)

### Vite
1. [vite为什么比webpack快？vite工作原理？](https://github.com/GGXXMM/FE-Knowledge/issues/132)

### babel
1. [Babel的原理是什么？](https://github.com/GGXXMM/FE-Knowledge/issues/95)

### git
1. [git的工作流程](https://github.com/GGXXMM/FE-Knowledge/issues/96)
2. [git reset、git revert 和 git checkout的区别？](https://github.com/GGXXMM/FE-Knowledge/issues/97)

## 八、性能优化
1. [性能优化（概要篇）](https://juejin.cn/post/7306800304250437644)

## 九、网络
1. [浏览器输入url到页面展示的全过程(综合)](https://github.com/GGXXMM/FE-Knowledge/issues/18)
2. [什么是DNS？DNS查询方式？DNS解析的详细过程？](https://github.com/GGXXMM/FE-Knowledge/issues/19)
3. [TCP三次握手和四次挥手](https://github.com/GGXXMM/FE-Knowledge/issues/20)
4. [HTTP协议？HTTP报文组成（请求报文、响应报文）](https://github.com/GGXXMM/FE-Knowledge/issues/21)
5. [HTTP1.0、HTTP1.1、HTTP2.0的区别？](https://github.com/GGXXMM/FE-Knowledge/issues/22)
6. [HTTP2的头部压缩算法是怎样的？](https://github.com/GGXXMM/FE-Knowledge/issues/148)
7. [HTTP3是什么？](https://github.com/GGXXMM/FE-Knowledge/issues/149)
8. [HTTP常见状态码](https://github.com/GGXXMM/FE-Knowledge/issues/23)
9. [HTTP请求方式（9种），get和post请求区别？](https://github.com/GGXXMM/FE-Knowledge/issues/24)
10. [HTTP和HTTPS的区别？](https://github.com/GGXXMM/FE-Knowledge/issues/150)
11. [HTTPS通信过程](https://github.com/GGXXMM/FE-Knowledge/issues/25)

## 十、安全
1. [XSS攻击？如何防御？](https://github.com/GGXXMM/FE-Knowledge/issues/26)
2. [CSRF攻击？如何防御？](https://github.com/GGXXMM/FE-Knowledge/issues/27)
3. [SQL注入？如何防御？](https://github.com/GGXXMM/FE-Knowledge/issues/28)
4. [命令行注入？如何防御？](https://github.com/GGXXMM/FE-Knowledge/issues/29)
5. [服务器漏洞？如何防御？](https://github.com/GGXXMM/FE-Knowledge/issues/30)
6. [流量劫持（DNS劫持、HTTP劫持）？如何防御？](https://github.com/GGXXMM/FE-Knowledge/issues/31)
7. [HTTPS中间人攻击？如何防御？](https://github.com/GGXXMM/FE-Knowledge/issues/32)