fe-knowledge

前端知识整理

一、数据结构与算法

常见数据结构

  1. 字符串
  2. 数组
  3. 链表
  4. 栈
  5. 队列
  6. 树
  7. 图

算法

  1. 排序算法
  2. 递归
  3. 回溯算法
  4. 深度优先和广度优先搜索
  5. 二分查找
  6. 动态规划
  7. 贪心算法

二、HTML、CSS

  1. 介绍下重绘和回流
  2. 盒子模型
  3. CSS选择器有哪些？哪些属性可继承？
  4. CSS定义的权重？优先级？
  5. 简述伪类和伪元素
  6. CSS3新增的伪类有哪些？
  7. 实现水平居中布局的方案
  8. 实现垂直居中布局的方案
  9. 实现水平垂直居中布局的方案
  10. 两列/三列/多列布局实现的方案
  11. BFC及其应用
  12. 清除浮动的方法
  13. 常见的兼容性问题
  14. CSS绘制三角形、圆形、扇形、菱形
  15. CSS3动画
  16. 简述Rem及其转换原理
  17. 如何解决移动端Retina屏1px像素的问题？

三、JavaScript

  1. JavaScript类型判断
  2. JavaScript的类型转换（显示、隐式转换）
  3. JavaScript的原型与原型链
  4. JavaScript的执行上下文与执行上下文栈
  5. JavaScript的作用域与作用域链
  6. JavaScript的this
  7. JavaScript的闭包
  8. JavaScript的垃圾回收机制和内存泄露
  9. JavaScript创建对象的多种方式及优缺点
  10. JavaScript实现继承的多种方式及优缺点
  11. JavaScript数组去重的多种方式及优缺点
  12. JavaScript数组扁平化
  13. JavaScript实现数组原型上的遍历方法forEach、map、filter、some、reduce
  14. JavaScript模拟实现new关键字
  15. JavaScript模拟实现Object.create
  16. JavaScript模拟实现Object.assign
  17. JavaScript模拟实现JSON.stringify
  18. JavaScript模拟实现JSON.parse
  19. JavaScript模拟实现instanceof
  20. JavaScript模拟实现call、apply、bind
  21. JavaScript模拟实现compose
  22. JavaScript实现函数防抖和节流
  23. JavaScript实现函数柯里化和反柯里化
  24. JavaScript实现偏函数
  25. JavaScript实现浅拷贝和深拷贝
  26. JavaScript实现发布订阅模式
  27. JavaScript实现EventEmitter
  28. JavaScript实现图片懒加载
  29. JavaScript实现图片预加载
  30. js动画

四、ES6

  1. ES6 之 let 和 const
  2. ES6 之 模板字符串
  3. ES6 之 箭头函数
  4. ES6 之 模拟实现 Symbol 类型
  5. ES6 之 迭代器与 for of
  6. ES6 之 模拟实现一个 Set 数据结构
  7. ES6 之 WeakMap
  8. ES6 之 Promise
  9. ES6 之 Generator 的自动执行
  10. ES6 之 Async/await
  11. ES6 之异步处理实战
  12. ES6 之 Babel 将 Generator 编译成了什么样子
  13. ES6 之 Babel 将 Async 编译成了什么样子
  14. ES6 之 Babel 是如何编译 Class 的(上)
  15. ES6 之 Babel 是如何编译 Class 的(下)
  16. ES6 之 defineProperty 与 proxy
  17. ES6 之 模块加载方案
  18. ES6 之 我们来聊聊装饰器
  19. ES6 之 私有变量的实现
  20. ES6 完全使用手册
  21. 手写E6字符串模板
  22. 手写一个Promise
  23. 手写async/await

五、TS

基础类型

  1. Typescript 和 JavaScript的区别
  2. TS中 any 和 unknown 类型区别
  3. TS中 never 和 void 的区别
  4. tsconfig.json 有什么作用？

    高级类型

  5. TS中使用 Union Types 时有哪些注意事项？
  6. TS中 keyof、typeof 关键字的作用
  7. 类型别名 type 和接口 interface 区别？

    接口

  8. TS中 interface 可以给 Function/Array/Class(Indexable) 做声明吗？
  9. TS中同名的 interface 或者同名的 interface 和 class 会合并吗？

类

  1. TS中的类及其特性
  2. TS如何设计 Class 的声明？

函数

  1. TS中的 this 和JS中的 this 有什么区别？

泛型

  1. TS中的泛型的应用场景

原理

  1. 逆变、协变、双向协变和不变的理解？
  2. 编译TS用 tsc 还是 babel？

六、框架

Vue 生态

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

Vue2

  1. Vue v-if/v-for 哪个优先级更高？
  2. Vue v-show 和 v-if 的区别
  3. v-once 的使用场景有哪些？
  4. 自定义指令及其使用场景有哪些？
  5. computed、methods、watch 的区别?
  6. Vue的父组件和子组件生命周期钩子执行顺序是什么？
  7. Vue组件间的通信方式（9种）
  8. Vue中，子组件为何不可以修改父组件传递的Props？
  9. Vue如何扩展一个组件？
  10. Vue中什么是递归组件？举例说明下
  11. Vue中什么是异步组件？举例说明下
  12. Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？
  13. nextTick是干什么的？实现原理是什么？
  14. keep-alive缓存的机制
  15. vue插槽是如何运作的?
  16. Vue2.0响应式原理中Object.defineProperty有什么缺陷？为什么在Vue3.0采用了Proxy？
  17. 介绍Object.defineProperty()
  18. 手写实现EventBus

Vue3

  1. Vue3 的设计目标是什么？具体如何实现的？
  2. 如何看待Vue3的 Composition API？
  3. Vue3 性能提升表现在哪几方面？

Vuex

  1. Vuex的设计思想
  2. Vuex中的getters和state的区别？
  3. Vuex中actions和mutations有什么区别？
  4. 为什么Vuex的mutation中不能做异步操作？
  5. 页面刷新后Vuex的state数据丢失怎么解决？
  6. 手写vuex（实现思路）

    vue-router

  7. vue-router中如何保护指定路由的安全？
  8. 手写vue-router路由

    axios

  9. 手写axios

七、工具

webpack

  1. 为什么需要构建工具？为什么选择webpack？
  2. webpack基本配置？
  3. webpack的热更新使用及原理分析（是如何做到在不刷新浏览器的前提下更新页面的）
  4. webpack的性能优化
  5. webpack构建原理

Rollup

  1. Rollup基础配置？及其构建原理？

Vite

  1. vite为什么比webpack快？vite工作原理？

babel

  1. Babel的原理是什么？

git

  1. git的工作流程
  2. git reset、git revert 和 git checkout的区别？

八、性能优化

  1. 性能优化（概要篇）

九、网络

  1. 浏览器输入url到页面展示的全过程(综合)
  2. 什么是DNS？DNS查询方式？DNS解析的详细过程？
  3. TCP三次握手和四次挥手
  4. HTTP协议？HTTP报文组成（请求报文、响应报文）
  5. HTTP1.0、HTTP1.1、HTTP2.0的区别？
  6. HTTP2的头部压缩算法是怎样的？
  7. HTTP3是什么？
  8. HTTP常见状态码
  9. HTTP请求方式（9种），get和post请求区别？
  10. HTTP和HTTPS的区别？
  11. HTTPS通信过程

十、安全

  1. XSS攻击？如何防御？
  2. CSRF攻击？如何防御？
  3. SQL注入？如何防御？
  4. 命令行注入？如何防御？
  5. 服务器漏洞？如何防御？
  6. 流量劫持（DNS劫持、HTTP劫持）？如何防御？
  7. HTTPS中间人攻击？如何防御？