在2016年，如果react火起来的时候【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】，没有virtual dom，会怎样？你【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】还会选择使用react吗？这是一个历史假未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。设问题。但今天来看，这个问题却非常有趣，【未经授权禁止转载】转载请注明出处：www.tangshuang.net因为，在经历对react的狂热追捧之后，本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】我们也逐渐发现了一些virtual do【本文受版权保护】【关注微信公众号：wwwtangshuangnet】m及其整个机制的缺陷，而这些缺陷，是否没【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。有virtual dom，就不会有？

Diff和Patch著作权归作者所有，禁止商业用途转载。

很多人还分不清React渲染和diff的【关注微信公众号：wwwtangshuangnet】【本文受版权保护】界限。virtual dom是对象树，是著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】用来表示组件树的内存对象；fiber是在【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。virtual dom的前提下，为每一个【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】节点附加的任务机制对象；diff是对新老原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net两个virtual dom（内存对象）进原创内容，盗版必究。【原创不易，请尊重版权】行对比，对比过程中使用了fiber提供的本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】任务机制，可以被中断，中断之后，要从头来【转载请注明来源】本文作者：唐霜，转载请注明出处。过；diff得到的结果是patch，用来未经授权，禁止复制转载。原创内容，盗版必究。表示哪些virtual dom节点发生了【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】何种变化；更新渲染是实施patch过程，未经授权，禁止复制转载。【版权所有，侵权必究】fiber上记录了每一个virtual 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。dom节点对应的真实DOM节点，每一个p【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。atch针对对应的DOM节点进行操作；d本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netiff过程可以中断重来，patch渲染过【转载请注明来源】未经授权，禁止复制转载。程不能被中断。

第一次渲染性能不佳【版权所有】唐霜 www.tangshuang.net

React在第一次渲染到界面时跟virt【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.netual dom的更新机制没有半毛钱关系，本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。根本没法享受它带来的性能优势。相反，由于【本文受版权保护】【版权所有，侵权必究】第一次渲染需要创建原始的virtual 【转载请注明来源】本文版权归作者所有，未经授权不得转载。dom以及fiber体系，反而会浪费一定【转载请注明来源】著作权归作者所有，禁止商业用途转载。的性能，当需要进行大列表数据渲染时，这种【转载请注明来源】著作权归作者所有，禁止商业用途转载。浪费体现的更加明显。

更新时并没有想象中那么强【版权所有】唐霜 www.tangshuang.net

virtual dom宣称的对立面是，对著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】一整块DOM进行全部替换的更新方式，一次【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】性更新整块DOM需要消耗大量资源删除原有著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】DOM，创建新DOM，实施Reaint/本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。Reflow过程，所以理论上virtua【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】l dom性能更好。但是，并不排除有的情本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】况下，一次性替换整块DOM会比用virt【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ual dom的形式更新性能更好。当pa转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.nettch数量超过一定数额时，除了需要进行遍本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。历之外，每一次对小量的DOM进行操作，都未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net可能带来重绘过程，数量一多，那么浏览器就【本文受版权保护】【版权所有，侵权必究】需要完成n次重绘，造成卡顿，虽然一次性整本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。块替换DOM也会存在同样问题。diff算【作者：唐霜】【转载请注明来源】法本身也存在性能损耗，fiber机制就是本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】为了解决这个问题，但是实际上，fiber转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】并没有强化virtual dom的优势，著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】因为js是单线程的，即使异步操作，所以该本文版权归作者所有，未经授权不得转载。【作者：唐霜】做的计算一秒都少不了，在diff过程中，本文作者：唐霜，转载请注明出处。【转载请注明来源】如果被中断，就要从来一次，反而增加了时间【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。，不过好在fiber的调度机制，可以在空本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。闲的时候把能干的先干，但是，该卡顿的还是转载请注明出处：www.tangshuang.net【转载请注明来源】会卡顿，这和fiber本身没有关系，是j【本文受版权保护】【本文首发于唐霜的博客】s单线程决定的。

不用这套可以吗？著作权归作者所有，禁止商业用途转载。

不用virtual dom这套机制可以吗【版权所有】唐霜 www.tangshuang.net【作者：唐霜】？不就是想最小化更新DOM变化吗，同样的【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。道理，我也有一个diff，也有一个类似p【本文受版权保护】【版权所有】唐霜 www.tangshuang.netatch的机制，直接在DOM上进行dif转载请注明出处：www.tangshuang.net原创内容，盗版必究。f和patch，不需要virtual d【转载请注明来源】【转载请注明来源】om和fiber，以及它们所带来的一切一本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net切东西。

React更新过程本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

如果你仔细观察上面这个图，你就会发现，在未经授权，禁止复制转载。【未经授权禁止转载】diff阶段，内存中需要保存两个virt【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ual dom，以及一套fiber，并最【转载请注明来源】【作者：唐霜】终产生一个patches列表。虽然是js【作者：唐霜】本文版权归作者所有，未经授权不得转载。内存对象，virtual dom所带来的【本文受版权保护】著作权归作者所有，禁止商业用途转载。负担其实也不轻，而且它实际上并非和真实D【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】OM的结构完全一致，理论上会有更多层级。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。我们能否干掉virtual dom，直接【本文首发于唐霜的博客】【原创内容，转载请注明出处】对DOM进行对比呢？

jqvm的更新过程【本文受版权保护】

【本文受版权保护】【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

我在【未经授权禁止转载】jQvm著作权归作者所有，禁止商业用途转载。中，实现了这套更新逻辑，它不依赖virt本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netual dom，也是有diff和patc著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】h两个过程，但是其实是在同时完成的，di【本文受版权保护】著作权归作者所有，禁止商业用途转载。ff是对两个真实DOM结构进行对比，其中原创内容，盗版必究。【原创不易，请尊重版权】有一个是临时DOM片段，更新完之后就会销【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】毁。直接对两个DOM进行diff其实和r未经授权，禁止复制转载。未经授权，禁止复制转载。eact的diff在性能上差不太多，因为著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】react diff虽有算法加持但深度更未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。深，而直接DOM diff深度可能更深，【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】但不会多出未知层级。在DOM diff过【原创内容，转载请注明出处】原创内容，盗版必究。程中，发现差异马上patch，而不是在找本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。出所有不同后才patch，省了patch【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。对象，也就是说，一次diff&p【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】atch，就完成了更新。当然，这不是说这【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。种方式性能更好，不过非大规模更新情况下，【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】这种更新方式也有明显的优势。

你可能还会问，既然如此，为啥不直接整块替著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】换呢？jqvm之前就是整块替换的，遇到的【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。问题是在input输入时，一替换，就失焦【原创内容，转载请注明出处】原创内容，盗版必究。了。所以，在原始DOM的基础上进行更新，原创内容，盗版必究。【原创内容，转载请注明出处】才是王道。

真正的意义在哪儿？【本文首发于唐霜的博客】

从上面可以看出，有没有virtual d著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。om，我们都可以完成视图更新渲染，vir【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】tual dom不是必须的。那virtu转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】al dom的真正意义在哪里？为什么它可原创内容，盗版必究。【转载请注明来源】以吸引我们，让我们狂热不已？我觉得，最核本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。心的点在于，它将视图进行抽象为内存对象，本文作者：唐霜，转载请注明出处。原创内容，盗版必究。抽象后的视图与平台无关，无论是在web平【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。台，还是移动设备平台上，都可以对virt【未经授权禁止转载】转载请注明出处：www.tangshuang.netual dom进行解释，渲染成复合对应平转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。台上的界面效果。而且它抽象的结果是对象（【关注微信公众号：wwwtangshuangnet】【转载请注明来源】纯对象），那么就可以轻松在设备之间传输，【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】比如服务端渲染到canvas（类似云游戏未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】）。此外，有另外一种可能，将diff移出原创内容，盗版必究。原创内容，盗版必究。当前线程进行计算，启动一个worker线未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】程，或者webassembly，计算完之【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。后，把patch传回主线程，而在算的过程未经授权，禁止复制转载。【版权所有，侵权必究】里面，主线程在不产生冲突的情况下，界面还【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】可以继续更新另外一块区域。这种想法好是好未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net，但是马上会遇到线程安全问题。

结语【版权所有】唐霜 www.tangshuang.net

对于web来说，virtual dom不未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net是必须的。

2020-11-10 3839