virtual DOM是如何优化性能的

Luosunce 发布于2019-08-23 18:15 / 734人阅读

摘要：当数据开始变化时，如何手动操作回想一下，这样的场景是不是常常见到。是如何操作的首先有一个数据结构和结构相似的对象，然后用这个对象去渲染真正的树。两种渲染的比较为什么通过会提高性能呢要知道每一次修改都会触发浏览器的重新渲染的流程。

谈到virtual DOM 前先来说说浏览器渲染的流程

浏览器接收到html文件，并转换成DOM树。如果有css还会生成css树。如果遇到script标签，会先判断是async或defer。如果是前者会并行下载并执行js，后者会先下载，等html解析完后顺序执行。
当构建后dom树和css树后，开始构建render树。这一步就是确定页面布局和样式，在生成render树的过程中浏览器就开始绘制合成图层将内容显示在屏幕。
只要dom一更新，以上流程浏览器就会再执行一次。

当数据开始变化时，如何手动操作DOM？

回想一下，这样的场景是不是常常见到。一个列表中有许多条数据，需要提供一个按钮来控制数据的排序；一个按钮删除，一个按钮新增甚至还有编辑数据。当没有任何的框架的时候，就需要我们手动的修改DOM结构。给按钮增加监听事件和回调函数更新DOM。功能越复杂，需要增加的事件和维护的代码就会越来越多，项目也会越来越臃肿。

virtual DOM是如何操作的
首先有一个数据结构和DOM结构相似的对象，然后用这个对象去渲染真正的DOM树。当状态发生改变时，新生成一个对象和原来的对象比较，发现有不同的地方，就将改变的地方替换掉相对应的原来的对象的地方。

两种渲染的比较
为什么通过virtual DOM会提高性能呢？
要知道每一次修改DOM都会触发浏览器的重新渲染的流程。
假设有一个页面数据庞大，需要修改1000条数据，
直接操作DOM 相当于1000浏览器重新渲染
然而使用虚拟DOM是先js层面了计算了1000次，计算好后在访问一次DOM
在js层面的计算和直接访问DOM操作相比，简直便宜得不行。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104904.html

4、React组件之性能优化

摘要：组件的性能优化高德纳我们应该忘记忽略很小的性能优化，可以说的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外的代码。对多个组件的性能优化当一个组件被装载更新和卸载时，组件的一序列生命周期函数会被调用。 React组件的性能优化高德纳: 我们应该忘记忽略很小的性能优化，可以说97%的情况下，过早的优化是万恶之源，而我们应该关心对性能影响最关键的另外3%的代码。...

陈伟 2019-08-22 15:01 评论0 收藏0
React 源码剖析系列－不可思议的 react diff

摘要：目前，前端领域中势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。目前，前端领域中 React 势头正盛，使用者众多却少有能够深入剖析内部实现机制和原理。本系列文章希望通过剖析 React 源码，理解其内部的实现原理，知其然更要知其所以然。 React diff 作为 Virtual DOM 的加速...

shuibo 2019-08-21 10:47 评论0 收藏0
你不知道的Virtual DOM（三）：Virtual Dom更新优化

摘要：经过这次优化，计算的时间快了那么几毫秒。基于当前这个版本的代码还能做怎样的优化呢，请看下一篇的内容你不知道的四的作用。欢迎关注我的公众号睿Talk，获取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言目前最流行的两大前端框架，React和Vue，都不约而同的借助Virtual DOM技术提高页面的渲染效率。那么，什...

xiongzenghui 2019-08-23 11:34 评论0 收藏0
深入React知识点整理（一）

摘要：以我自己的理解，函数式编程就是以函数为中心，将大段过程拆成一个个函数，组合嵌套使用。越来越多的迹象表明，函数式编程已经不再是学术界的最爱，开始大踏步地在业界投入实用。也许继面向对象编程之后，函数式编程会成为下一个编程的主流范式。使用React也满一年了，从刚刚会使用到逐渐探究其底层实现，以便学习几招奇技淫巧从而在自己的代码中使用，写出高效的代码。下面整理一些知识点，算是React看书...

Gilbertat 2019-08-22 11:18 评论0 收藏0
一起理解 Virtual DOM

摘要：具体而言，就是每次数据发生变化，就重新执行一次整体渲染。而给出了解决方案，就是。由于只关注，通过阅读两个库的源码，对于的定位有了更深一步的理解。第二个而且，技术本身不是目的，能够更好地解决问题才是王道嘛。前言 React 好像已经火了很久很久，以致于我们对于 Virtual DOM 这个词都已经很熟悉了，网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久...

Tangpj 2019-08-22 10:46 评论0 收藏0