前端系统知识整理

一、 编程基础

理解互联网产品开发流程、Web应用各部分的逻辑关系、命令行基础、Git代码管理

二、 HTML与CSS核心知识

1、掌握HTML4（5）常见标签的用法、表单的用法
2、理解CSS2（3）选择器权重、优先级、匹配顺序、继承、单位
3、两种盒模型
4、理解块、行的特性、理解边距折叠的概念
5、理解浮动的特性，会用几种方式清除浮动
6、理解BFC与各种FC的概念
7、掌握定位的用法
8、理解层叠上写文的概念
9、会使用flex布局做页面，理解flex-basis、flex-grow、flex-shrink的计算方法
10、会使用Grid布局做页面
11、 垂直水平居中的几种实现
12、会浏览器兼容处理
13、会使用页面响应式
14、会使用字体图标、svg图标
15、能灵活使用CSS3常见特效如圆角、阴影、渐变、过渡、动画

三、 浏览器的渲染原理

1、理解从url输入到用户展现发生了什么
2、了解浏览器的组成、页面渲染流程
3、理解script和css的加载阻塞解析和阻塞渲染
4、理解异步加载async和defer
5、理解白屏、无样式内容闪烁的原因

四、 JavaScript核心知识

1、掌握ES5/ES6基础语法
2、熟悉DOM操作API、熟练操作DOM
3、理解事件流机制，理解事件代理机制，能将原理熟练运用于实际效果
4、会Mock数据、会封装Ajax实现前后端交互、理解各种跨域技巧
5、理解闭包，会运用到 合适场景
6、理解JavaScript各个场景下的this
7、理解Prototype、原型链、继承的用法，会用到class封装组件
8、异步、Promise、async/await

五、 打包工具的原理、应用、简易实现

1、原生ESM实现模块化
2、会用Parcel构建项目
3、会用Webpack构建项目
4、Webpack插件、Loader的实现
5、手写简易Webpack

六、 React的应用、原理、实现

1、JSX、set State同步与异步更新、this
2、生命周期
3、列表、受控与非受控组件、Context、数据传递、错误便捷
4、Class组件和函数组件
5、React Hooks的用法、原理和简易实现
6、React中使用样式的几种方法
7、CRA搭建React全家桶项目
8、Mobx与Redux
9、ReactRouter
10、在React项目中使用TypeScript
11、React Diff原理
12、Diff算法和时间复杂度
13、实现一个简易的React

七、 Vu2（3）的应用、原理、实现

1、组件实例、生命周期
2、data、methods、computed、watch
3、Vue2和Vue3的响应式原理，手写reactive实现track trigger
4、条件、列表、事件、组件、双向绑定、单向数据流
5、Vue3组件注册、Props、Attribute、自定义事件
6、插槽、具名插槽、作用域插槽
7、爷孙数据传递Provide&Inject
8、动态组件与keep-alive
9、过渡与动画
10、使用VueCLI4搭建Vue项目
11、Vite的原理、使用
12、组合式API重构项目
13、VueRouter的原理和使用
14、Vuex的原理和使用
15、虚拟DOM与Diff算法
16、TypeScript基础
17、在Vue3项目中使用TypeScript
18、Vue2和Vue3区别

八、 HTTP与安全

1、三次握手与四次挥手
2、HTTP状态码、请求/响应有哪些字段
3、缓存的机制（重要）
4、Keep-alive与多路复用
5、Cookie与Session
6、网站鉴权机制（登录/注册）
7、HTTP2.0是什么
8、HTTPS的原理
9、CSRF攻击
10、XSS攻击

必备的拓展：

JavaScript进阶

1、常见特效如循环轮播、懒加载、瀑布流、木桶布局的原理和实现
2、ES6新特性
3、EventLoop、宏任务、微任务
4、垃圾回收机制
5、前端性能优化方案
6、虚拟长列表的原理和实现
7、二进制浮点数运算过程

设计模式

1、单例模式
2、观察者模式
3、适配器模式
4、装饰者模式

手写代码

1、手写数组去重、深浅拷贝、数组拍平
2、手写柯里化
3、实现new、bind、call、apply
4、裴波那切数列优化
5、手写防抖和节流
6、手写EventHub
7、数据响应式
8、实现缓存函数

移动端

1、物理像素、逻辑像素、CSS像素、PPI
2、viewport的原理和用法
3、移动端适配的各种适配方案
4、移动端的手势
5、实现细边框
6、300ms延时

算法

1、快速排序、插入排序、选择排序、冒泡排序
2、反转链表、链表环判断、链表相加、删除链表重复元素、合并有序链表
3、跳台阶、斐波那契数列优化、表达式求值
4、二分查找、KMP算法
5、二叉树先序、中序、后序遍历、根据先（中）序排列重建二叉树
6、求连续子串、反转字符串、最长回文子串、大数相加、最长公共前缀
7、合并两个有序数组、根据找数组累加等于和的项
8、子数组最大累加和、最长公共子序列
9、寻找第k大数

前端需要学习很多东西，做了前端开发，就需要有积极的学习心态