我们知道,浏览器通过Http请求从各个异构服务器获取到html文档。会根据包含相关信息的请求头和请求体,将其解析并构建成一个DOM树。同时,根据文档获取到相关的css文档,这些文档里面包含了许许多多的CSSOM。最后,这颗DOM树和这些CSSOM会在浏览器内存中形成一个Render树,浏览器就是根据这个Render树渲染出我们最后看到的页面的。而这些过程都是发生在渲染引擎中的,这与负责执行动态逻辑的JavaScript引擎是相分离的。因此,为了JS能够方便操作DOM结构,渲染引擎会暴露一些接口供JavaScript调用
问题就在这里,虽然通过暴露的接口,JS可以操作到DOM树中的节点。但是性能其实不是很高,特别是对于一些复杂的网页,添加删除节点会导致DOM节点的更新,这个开销是很大的。在之前,普遍都是通过JQuery来和DOM进行交互:
在网页设计越来越丰富,逻辑交互越来越复杂的情况下,频繁地进行DOM操作组件逐渐成为了性能的瓶颈。而以直接操作DOM的JQuery也不再像之前那么大一统。许许多多前端框架如雨后春笋般涌现,如AngularJS,React,Vue等。其中最火的当属React,它提供了一套不同的,高效的方案来更新DOM。这种全新的解决方案就是“Virtual DOM”:
如上图所所示,React会在内存中根据DOM创建一个虚拟的DOM树。基于React的开发并不直接操作DOM,而是通过操作这棵虚拟DOM进行的,每当数据变化的时候,React会重新构建整个DOM树,然后将当前DOM树和上个DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。既然最后还是会通过React来进行对DOM的更新,那为何还会有性能的提升呢?原因在于React并不总是马上对DOM树所做的更改进行更新,换而言之,就是你在虚拟DOM树上做的操作,不保证马上会产生实际的效果,它只会在你需要产生DOM树更新的时候进行更新。这样的一个机制就使得React能够等到一个事件循环的结尾,将若干个由数据影响的节点合并在一起,和实际DOM进行比较,只操作Diff部分,而不是像传统的js那样需要更新DOM操作,就更新DOM树一次,因而能达到提高性能的目的。同时,在保证性能的同时,React通过组件化的抽象概念,让开发者将不需要关注某个数据的变化该如何体现在DOM树上,只需要关系某个数据更新时,页面是如何Render的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。