关键词：
框架并没有提高web的性能，只是让开发者更加专注的完成业务逻辑，而不用过渡的考虑性能上的优化。如果以性能来比的话，框架是绝对比不过优化后的原生代码的。
二、什么是Virtual DOM
Virtual DOM的概念有很多解释，从我的理解来看，主要是三个方面，分别是：一个对象，两个前提，三个步骤。
一个对象指的是Virtual DOM是一个基本的JavaScript对象，也是整个Virtual DOM树的基本。
两个前提分别是JavaScript很快和直接操作DOM很慢，这是Virtual DOM得以实现的两个基本前提。得益于V8引擎的出现，让JavaScript可以高效地运行，在性能上有了极大的提高。直接操作DOM的低效和JavaScript的高效相对比，为Virtual DOM的产生提供了大前提。
三个步骤指的是Virtual DOM的三个重要步骤，分别是：生成Virtual DOM树、对比两棵树的差异、更新视图。这三个步骤的具体实现也是本文将简述的一大重点。
五、进一步思考
Virtual DOM的原理和实现的说明已经结束了，但是对于Virtual DOM的思考远没有结束，Virtual DOM 对前端开发的影响难道就只是一堆算法吗？
1、性能对比
首先，先来看一下性能，在诸多的Virtual DOM实现中，都会强调算法的高效，那么在实际的使用中，Virtual DOM的性能到底如何呢？
上图是对一个简单的DOM树进行不同方式的操作，由左边的结构更新为右边的结构，通过原生操作、jQuery、Virtual DOM和React四种方式，在Chrome的timeline中得到的性能对比，在这个图中，我们并没有看出Virtual DOM或者React的优势，通过对比我们发现，原生的操作要比其他三种方式快，而其他三种方式就相差无几了。当然，这样一个简单测试并没有说明什么，测试的DOM结构简单，和我们平时面对的业务场景不是一个量级，代表不了什么，但是起码我们可以看到，这种情况下好像Virtual DOM并没有我们想象的性能优势。
在接下来的测试中我们增加测试量。上图分别是使用原生操作、Virtual DOM和React三种方式进行两类测试：插入10000个节点100次和修改3000个节点的属性100次。分别取这100次的耗时最大值、最小值和平均值。从图中我们可以看到明显的差异，Virtual DOM和React的差异可以理解，毕竟我们自己实现的Virtual DOM没有那么庞大，只是针对虚拟DOM而实现的，比React快一点可以理解，但是原生的操作比Virtual DOM和React都要快得多，这又是怎么一回事，好像和我们预想的不一样，回到最初，我们提到，Virtual DOM的产生前提之一就是直接操作DOM很慢，现在看来直接操作不但不慢，反而快了很多，这不得不让我产生了怀疑，是我对Virtual DOM的理解有误还是对DOM的理解有误呢？
2、再次审视Virtual DOM
框架存在的意义是什么？是提高性能？提高开发效率？亦或是其他用途，每个人对框架的理解不同，答案也不尽相同。但是不得不承认，存在框架的情况下，项目的可维护性有了极大的提高，而对于其他方面就要做出牺牲，比如性能。在上面的性能测试中，其实完全走入了一个误区，在测试中我们用到的原生的操作其实是“人为”地对操作进行优化之后的结果，而如果抛开人为优化的前提，最终的结果可能就不是这样了。**Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。**这一点是原生操作远远无法替代的。
到此为止，再次审视Virtual DOM，可以简单得出如下结论：
- Virtual DOM 在牺牲部分性能的前提下，增加了可维护性，这也是很多框架的通性
- 实现了对DOM的集中化操作，在数据改变时先对虚拟DOM进行修改，再反映到真实的DOM中，用最小的代价来更新DOM，提高效率
- 打开了函数式UI编程的大门
- 可以渲染到DOM以外的端，比如ReactNative
https://github.com/y8n/blog/issues/5
如何理解vue，virtualdom(代码片段)
Vue.js2.0窥探之VirtualDOM到底是什么？Vue.js2.0已经发布，并且在其中新添加如了一些新功能。其中一个功能就是“VirtualDOM”。 VirtualDOM是什么？在之前，React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了。若想了解它是... 查看详情
如何实现一个virtualdom及源码分析
如何实现一个VirtualDOM及源码分析VirtualDOM算法 web页面有一个对应的DOM树，在传统开发页面时，每次页面需要被更新时，都需要手动操作DOM来进行更新，但是我们知道DOM操作对性能来说是非常不友好的，会影响页面的重排... 查看详情
摘：windows系统内存计数器理解解析_备忘录_51testing软件测试网...
【原创】Windows系统内存计数器理解解析2008-05-1311:42:23/个人分类：性能测试说明：本文的计数器以Windows2003为准。序言;F9n)\%V1a6ZC)?ZV0内存的使用情况是系统性能中重要的因素之一，频繁的页交换及内存泄露都会影响到系统的性能... 查看详情
点分治理解及例题
点分治，基于点的分治；其思路为：子树结构：子树结构虽然的确是某点的一个子树，但我们讨论点分治时，相当于把这个子树摘下来，当做无根树处理；对于一个子树结构：处理子树结构的某个单点(未必是原根)；以这个被处... 查看详情
《软件工程综合实践专题》——程序的理解与评价
该网上购书系统包含有三个类，分别是图书类、用户类、订单类。图书类具有添加、读取、删除、搜索、查看、修改图书星系的功能。用户类包含读取、删除、搜索、查找用户信息及查看该用户的订单信息的功能。订单类包括：... 查看详情
树莓派网摘树莓派与xbmc及kodilibreelec插件
之前的相关文章参考：【树莓派】树莓派与XBMC及Kodi、LibreELEC插件（一）【树莓派】树莓派与XBMC及Kodi、LibreELEC插件（二）【树莓派】树莓派与XBMC及Kodi、LibreELEC插件（三）---------------------------------------------------------------------------... 查看详情
实现一个virtualdom算法
1前言本文会在教你怎么用300~400行代码实现一个基本的VirtualDOM算法，并且尝试尽量把VirtualDOM的算法思路阐述清楚。希望在阅读本文后，能让你深入理解VirtualDOM算法，给你现有前端的编程提供一些新的思考。本文所实现的完整代... 查看详情
vue开发实战基础篇#7：理解虚拟dom及key属性的作用
...引入state层，事件操作数据，vue底层映射到dom上。virtualdom数据变化，怎么尽可能的减少dom更新，就提出了虚拟dom，它是json对象保留了dom树形结构信息virtualdomdiffdom比对，找出差异场景1 查看详情
准确理解机器学习算法的常用评价指标
准确理解机器学习算法的常用评价指标一级目录二级目录三级目录一级目录二级目录三级目录 查看详情
综合指标评价及绩效评价方法
下面是一些主流的会用于综合指标评价以及绩效评价的一些方法：1. AHP（层次分析）+加权目前这个方法是对于医保领域评价绩效用的最多的，包括重庆市、天津市、苏北某市。具体相关文献见文件夹“AHP+加权... 查看详情
正确理解异步分工
背景一个果园会产出5种水果，ABCDE，每种水果有不同处理方式。果园每天只采摘一次，每次只采摘一种水果，当天会摘哪一种，会看长势临时决定。水果种类=事件类型果农和工人=线程/代码函数贴纸条=发布消息看纸条=接收消息... 查看详情
图像清晰度的评价及分析
图像清晰度的评价及分析2016年07月28日17:54:22 clxiaoclxiao 阅读数：17963更多个人分类： opencv 在无参考图像的质量评价中，图像的清晰度是衡量图像质量优劣的重要指标，它能够较好的与人的主观感... 查看详情
深入理解ks
...能力。ks值大于0.75，往往表示模型有异常。 二、深入理解KS 查看详情
中学教育学专项习题及答案（论述题二）
...世界教育改革运动后出现了哪些新的教学方法?你是如何理解并运用的? 参考答案：自20世纪中叶以来世界范围的教育改革运动中，各种各样新的教学方法不断出现，其中有一些带来了教学实践的显著变化，并且产生了广泛的... 查看详情
虚拟domvituraldomtree
提起VirtualDOM，总是给人一种高深莫测的感觉，大家都知道它比DOM快。那么VirtualDOM到底是何方神圣呢？在深入理解VirtualDOM之前，先让我们回顾一下DOM。一、什么DOM?所谓DOM，就是HTML、XML、XHTML的一种抽象描述，它会把这... 查看详情
第三次结构部分
一。学习要点1.结合数据与指针相关知识，理解结构的定义及结构变量定义2.结构成员变量的引用方法，3.针对多名学生信息进行输入输出，理解结构数组的定义及应用4.结构指针的定义及使用。（PTA评价学生成绩等级）2课上疑点... 查看详情
摘javascript设计模式与开发实践--单例模式
...实践》一书（有兴趣的可以购买），加入了一点点自己的理解，写这篇文章的目的是，加强自身对设计模式的理解，以及对于没有接触过这一块的入门者的参考。阅读本章内容，需要具备Javascript面向对象的知识，否则阅读起来... 查看详情
虚拟存储器摘总
虚拟内存 http://www.cnblogs.com/feng9exe/p/6379686.html 来理解一下虚拟地址映射的过程：拿到一个虚拟地址，根据已有的vm_area_struct看这个虚拟地址是否属于某个vm_area_struct如果没有匹配到，就报段错误，访问了一个没有分配的虚... 查看详情