关于前端开发

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 控制了网页的行为
4. WebASSembly

架构推荐：

前置知识

1. HTML,JS,CSS基础
2. 基础的数据结构/算法知识，如二叉树，深度遍历等。
3. 会使用浏览器提供的DOM，API来修改DOM，更新UI。

一.react的历史与应用

1. 前端应用开发，如facebook，Netflix等网页版
2. 移动原生应用开发
3. 结合Electmn，进行桌面应用开发

二.React的设计思路-UI编程痛点

1. 状态更新，UI不会自动更新，需要手动调节DOM进行更新。
2. 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
3. UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到'Callback Hell'

三.React的设计思路-响应式与转换式

响应式

graph TD
事件 --> 执行计调的回调-->状态变更

React的实现

Virtual DOM（虚拟DOM） ：Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用虚拟dom进行diff，算出最小差异，然后再修改真实dom，当用传统的方式操作DOM的时候，浏览器会从构建DOM树开始从头到尾执行一遍流程，效率很低。而虚拟DOM是用javascript对象表 示的，而操作javascript是很简便高效的。虚拟DOM和真正的DOM有一层映射关系，很多需要操作DOM的地方都会去操作虚拟DOM，最后统一一次更新DOM。因而可以提高性能

常见的前端动画技术

Sprite动画、css动画、js动画、SVG动画和webGL动画

按应用分类

UI动画、基于web的游戏动画和动画数据可视化

动画的基本原理-计算机动画原理

计算机图形学： 计算机视觉的基础，涵盖点、线、面、体、场的数学构造方法。

1. 几何和图形数据的输入、存储和压缩。
2. 描述纹理、曲线、光影等算法。
3. 物体图形的数据输出(图形接口、动画技术)，硬件和图形的交互技术。
4. 图形开发软件的相关技术标准。 计算机动画: 计算机图形学的分支，主要包含2D、3D动画。 前端动画分类 css动画： svg动画 ：描字，形变，水墨变化等基础动画实现。 计算path长度-path.getTotalLength（）; 计算path上某点坐标-path.getPointAtlength（lengthNumber）； js动画：

动画实现

- 算法优化

• 线性函数代替真实计算
• 几何模型优化
• 碰撞检测优化

- 内存/缓存优化

- 离屏绘制