登录 注册写文章 首页下载APP

虚拟DOM diff算法

前端girl吖关注赞赏支持

虚拟DOM diff算法

webkit引擎的处理流程

传统DOM操作 虚拟DOM

虚拟DOM是在DOM的基础上在内存建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中

render执行的结果得到的并不是真正的DOM节点，而仅仅是javascript对象，称之为虚拟DOM

虚拟DOM具有批处理和高效的Diff算法，可以无需担心性能问题而随时‘刷新’整个页面，因为虚拟DOM能保证对界面上真正变化的部分进行实际的DOM操作

【传统DOM操作(eg:innerHtml)】：render html+重建所有DOM元素 【虚拟DOM】：render 虚拟DOM + diff算法+更新必要的DOM元素

diff算法

优点：最终表现在DOM上的修改只是部分的变更，可以保证高效的渲染，提高网页性能

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点

虚拟DOM的理解误区 对虚拟DOM的理解往往停留在：通过JavaScript对象模拟原生DOM，加上DOM Diff 极大提升了DOM操作的性能。然而，虚拟DOM最大的意义不在于性能的提升（JavaScript对象比DOM对象性能高），而在于抽象了DOM的具体实现（对DOM进行了一层抽象），这在浏览器中使用 React时不是特别明显，因为写的DOM标签跟原生的没有区别，并且最终都被渲染成了DOM，在React Native中将会有很好的说明。

赞赞哇.png

推荐阅读更多精彩内容

• React：虚拟DOM Diff算法 父组件每次render方法被调用，或者组件自己每次调用setState方法，都会触发组件的render方法（前提是... 葶寳寳阅读 276评论 0 赞 4
• Virtual DOM 的实现和 React Fiber 简介 参考文章：深度剖析：如何实现一个Virtual DOM 算法 作者：戴嘉华React中一个没人能解释清楚的问题——... waka阅读 2,262评论 0 赞 16
• reactjs + redux系列之基础概念 react.js概念 react.js框架是facebook推出的UI框架，主要解决视图层展示中的一些痛点问题： ... winter_coder阅读 64评论 0 赞 0
• ReactJS中的DOM diff算法 翻译自:https://calendar.perfplanet.com/2013/diff/万分感谢Christo... silly鸿阅读 2,108评论 0 赞 1
• 败家媳妇花18万装修的新房，朋友却说赚了，这效果至少值20万 家里是一套117平米三室两厅的户型，装修的事情交给媳妇来负责，本来预算是15万以内搞定。结果媳妇东加西凑的加了不少... 小小空心菜阅读 49评论 0 赞 0

评论1 赞6 6赞7赞 赞赏