1 Web前端框架基本认知、虚拟DOM

1、框架基本认知： - -> 框架复杂度VS应用复杂度的权衡

(1).学完html4.01、css2.0、js便可进行项目的开发了，如果再有html5、css3、jQuery、ES6.0、模块化、自动化构建工具的使用，进行大型项目的开发也是OK的，但开发过程会发现代码的组织化不好，后续维护难度较大 -> 框架便可解决系列问题，而且最重要的一点：框架可保持"UI"和"状态"同步，即响应式开发；(UI即视图层，状态即逻辑层/数据)

(2).原生开发：状态改变的时候需手动操作更新视图层数据 -> 数据改变需重新调用页面渲染函数重新进行数据渲染，而且UI视图中的操作Dom节点的代码，一部分在html结构，一部分在js动态创建，代码可读性及维护性很差；->但原生开发的项目依旧也有很多，毕竟应用复杂度低，使用框架需要学习成本；

(3).框架开发： 开发者聚焦到状态(数据)管理，UI层面框架实现即可；

2、前端三大主流框架： Angular、React、Vue

框架热度评价维度：百度指数(可粗略代表国内)、Google指数、Github(star)、npm下载量(粗略代表国际)、浏览器devtools、indeed网站招聘需求；百度指数：Vue > React > Angular;  npm下载量(框架依赖的模块都是npm下载)：Angular > React >Vue；当然了，随着时间的推移，指数会发生变化

(1).Angular: 优点： MVVM模式、双向数据绑定(UI视图层变化，状态也随之改变)、依赖注入；缺点：语法复杂、angular5使用TypeScript(js的超集)；其聚焦点是PC端，学习成本大，学习路线陡峭(AngularJS指代1.0版本，Angular指代2.0及以后的版本，1.0版本与2.0版本差异很大，可认为是两个框架，2.0版本之后都是兼容的)；

(2).React: 优点：虚拟DOM(减少重绘、重排的次数，直接操作DOM，经常重绘重排)、更加轻量、JSX语法；缺点：官方文档没有体系化、JSX语法；学习成本较大，学习路线陡峭；(JSX语法将html、css全部用js表示，性能确实好)

(3).Vue: 优点：其使用HTML模版(最终还是操作虚拟DOM)、详细的中文化文档(得益于创始人尤雨溪是华人)、轻量30kb左右；缺点：社区还不健全，生态系统不完善，缺乏大型项目的实践；学习成本较低；(Vue兼容TypeScript，其的自由度较高，可使用该语言进行vue项目开发)

- - - > > > 其他框架：Ember、Knockout、Polymer、Riot、

3、前端框架的特点：其都基于组件化、强大的社区、成熟的第三方组件库以及都有很多的第三方库可解决诸多业务问题，其都有浏览器调试插件(工具)、其都对单页面应用很友好； ->它们都实现了视图和状态同步；

4、虚拟DOM：伪dom/假dom，JS模拟实现的具有真实dom结构的树形结构，其与真实dom通过映射关系，例如：snabbdom

真实的dom和js建立连接很耗费性能：

(1).dom与js所在位置不同；

(2).GPU区别，我们都使用的是家用GPU，真正适合绘制页面的是专业GPU， 家用GPU的性能差很多比专业GPU绘制图像的功能；

参考：vue  PPT