开篇词

系统掌握前端的知识体系, 对我目前的知识体系进行扩充

宏观角度看发展

石器时代

只有 html 和 css 的时代, 浏览器主要为 IE. 开发都是利用模板模式. MVC. jsp等语言将网页与代码混在一起, 实现后端渲染前端展示, 数据更新要刷新网页
之后 google 发布 gmail 利用 ajax 技术实现异步数据获取, web 正式进入下一个时代

铁器时代

出现 jquery (我在本科做的网站就是这样的). 利用 $ 对页面中的所有组件进行操作 + bootstrap 进行排版.
对 dom 操作是这个时代的特点.
随着规模化的应用开发 jquery 不再合适

工业时代

2009 年: Angular 诞生 引领了 MVVM 的编程模式(WPF应该是早一批的 MVVM 编程框架). nodejs 诞生前端开发语言可以看发后端程序.

MVVM 用数据驱动页面, 数据改变页面自动改变.

数据驱动的不同实现

Angular1: 脏检查, 当用户提交数据时,检查数据是否变化, 变化时操作 DOM. 在Angular2就把以前的所有东西都废弃了!

React: 使用 虚拟DOM,通过比较新旧DOM 的不同实现更新.这样会存在卡的问题. React 增加了一个Fiber 框架 让diff在空闲时间进行减少渲染的压力, 类似操作系统的时间片分时, 这里是框架去主动管理数据


Vue1: 首先是使用 wather 对每个属性进行监控当变化时去修改 DOM, 这里认为数据是自己更新后通知框架. 着导致wather 太多而占用很多内存

Vue2: 引入 虚拟 DOM的概念, 在组件内采用 虚拟 Dom 进行渲染, 组件之间通过 watcher 监控数据变化.

Vue3: 把静态标签做到了目前的极致.

Svelte: 在编译时就把DOM全部处理完成,不需要任何运行时. 存在问题 项目大时代码十分多且性能有影响.