- 为什么需要虚拟dom?
- 真实的dom操作是很慢的,而js是很快,直接操作dom可能会导致频繁的回流与重绘,js不存在这些问题。因此虚拟dom比原生dom更快。
- jquery不能从根本上解决dom操作量过大情况下的前端侧的压力。
工作流: 构建新的dom树 – 通过diff对比出新旧两棵树的差异–差异更新DOM
缺点:虚拟dom的劣势主要在于js计算的耗时DOM操作的能耗和js计算的能耗根本不在一个量级。
- dom操作解决方法 - 模板引擎
- 读取html模板并解析它,分离出其中的js信息。
- 将解析出的内容拼接成字符串,动态生成js代码。
- 运行动态生成js代码,吐出目标html。
- 将目标html绘制成innerHTML,触发渲染流水线完成真实dom的渲染。
工作流:动态生成html字符串(构建新的真实dom)-- 旧的dom元素整体被新的DOM元素替换
缺点:性能一般,每次重新渲染都会把之前的删掉重新渲染整个。局限在实现高效的字符串拼接上
- 解决的关键问题
- 研发体验/研发效率的问题
- 跨平台的问题
- 批量更新 在通用的虚拟dom库是有batch函数来处理的。batch的作用是缓冲每次生成的补丁集
每次setState的时候只修改少量的数据,模板渲染和虚拟dom之间dom操作量级的差距完全拉开,虚拟dom将在性能上具有绝对的优势。
性能问题不能一概而论,jquery,原生dom在思维模式上来说虚拟dom截然不同,强行比较意义不大。虚拟dom的价值不在于性能。