浅学虚拟Dom和diff

已于 2022-08-02 19:04:13 修改
阅读量215 收藏
点赞数 2
分类专栏： Vue 文章标签： 数据结构 排序算法 java
于 2021-05-13 21:21:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Darlingmi/article/details/116765787
版权

文章目录

基础

     众所周知，Dom操作是非常耗费性能的，以前用JQuery可以自行控制dom操作的时机，而vue和react都是数据驱动视图，该如何有效控制dom操作？
     出现了vdom，用js模拟don结构，计算出最小的变更去操作dom。模拟如下：
在这里插入图片描述

通过snabbdom学习vdom

     snabbdom是一个简洁强大的vdom的库，Vue参考它实现的vdom和diff。我们用github上snabbdom的例子来学习vdom：
在这里插入图片描述
     通过新旧vnode对比，得出最小的更新范围，最后更新dom。

diff算法

diff算法是vdom中最核心、最关键的部分。也能在vue、react、日常使用中体现出来。
在这里插入图片描述

在这里插入图片描述
时间复杂度为O（n^3）, 不可用。
经过前辈的努力将时间复杂度优化到O（n）：
在这里插入图片描述

patch函数

key和sel都相等，则不进行比较，优化

  • key和sel都相等，则不进行比较，优化
    不相等则删掉重建，优化
  • 不相等则删掉重建，优化

patchVnode函数

在这里插入图片描述

updateChild

updateChild使用时机

     当patchVnode时，如果新旧node都有Child时，就会进行updateChild：
根据key进行移动，不用销毁重新

虚拟DOM的作用

  • 兼容性好。因为Vnode本质是JS对象，所以不管Node还是浏览器环境，都可以操作；
  • 减少了对Dom的操作。页面中的数据和状态变化，都通过Vnode对比，只需要在比对完之后更新DOM，不需要频繁操作，提高了页面性能；

那么虚拟DOM和真实DOM的区别

  • 虚拟DOM不会进行回流和重绘；
  • 真实DOM在频繁操作时引发的回流重绘导致性能很低；
  • 虚拟DOM频繁修改，然后一次性对比差异并修改真实DOM，最后进行依次回流重绘，减少了真实DOM中多次回流重绘引起的性能损耗；
  • 虚拟DOM有效降低大面积的重绘与排版，因为是和真实DOM对比，更新差异部分，所以只渲染局部；
Darlingmi
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
xml浅学笔记
05-15
2、xml标记是严格区分大小写，开始和结束必须一致 3、XML的标记也允许被嵌套，注意嵌套顺序 4、每个标记都允许自定义属性，格式与HTML一致，但属性值，必须用""括起来 5、每个XML文档中必须要有一个跟元素 3、...
浅学二极管与三极管
06-24
二极管，三极管，PN接
vue笔记3 虚拟dom、重流、diff
qq_44613178的博客
03-17 1291
老规矩 先放链接致敬作者 使用虚拟dom和真实dom的区别 详细理解重绘与回流/重排的过程 display:none和visibility:hidden两者的区别 v-if和v-show、display: none和visibility：hidden的区别 vue核心之虚拟DOM(vdom) 深入 React 之 diff 算法 虚拟dom 真实DOM操作： document.get…查询的是整个节点树。 ParentNode.querySelector()和ParentNode.querySelector
JavaScript创建二维数组的几种方式
不想学习的打工人的博客
08-06 7992
JavaScript并不支持真正的多维数组，但我们可以通过数组的数组来模拟。例如要访问二维数组的值，使用[ ][ ]即可。
虚拟DOM和diff算法
Tokki_的博客
06-08 1766
虚拟dom 虚拟DOM的本质就是一个JS对象，虚拟DOM减少了真实DOM的操作，当修改数据的时候，就是修改虚拟DOM产生全新的虚拟DOM， 新旧虚拟DOM使用diff算法，得到patch(也就是需要修改的部分)，然后将这个patch打到浏览器的DOM上 （减少重绘和回流，从而达到性能优化的目的） 每次DOM操作会引起重绘或者回流，频繁的真实DOM的修改会触发多次的排版和重绘相当耗性能 ...
什么是虚拟dom和diff算法 以及什么是回流和重绘
weixin_61434407的博客
02-27 386
虚拟dom 虚拟dom其实就是用普通的js对象来描述DOM结构，因为不是真实的dom所以称之为虚拟dom 虚拟dom是相对于浏览器所渲染出来的真实dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容，只能通过遍历查询dom树的方式，找到需要修改的dom，然后修改样式行为或者结构，来达到更新视图的目的 为什么要用虚拟dom来描述真实的dom呢？ 创建真实DOM成本比较高，如果用js对象来描述一个dom节点，成本比较低，另外如果频繁操作dom也是一种比较大的开销。因此建议用虚拟do
虚拟DOM解析及其在框架里的应用
大康子
09-28 3781
虚拟DOM解析及其在框架里的应用 浏览器是怎样解析HTML并且绘出整个页面的 上图为webkit引擎浏览器的处理流程，如上图大致分为4大步： 第一步，HTML解析器分析html，构建一颗DOM树； 第二步，CSS解析器会分析外联的css文件和内联的一些样式，创建一个页面的样式表； 第三步，将DOM树和样式表关联起来，创建一颗Render树。这一过程又被称为Attachment，每个DOM节点上...
一篇文章带你搞懂Vue虚拟Dom与diff算法
12-28
使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉，它扮演着很重要的角色。由于小编接触Vue比较多，React只是浅学，所以本篇主要针对Vue来展开介绍，带你一步一步搞懂它。 虚拟DOM 什么是虚拟DOM？ 虚拟DOM...
浅学RC充放电电路
06-24
浅学RC充放电电路
浅学电子幸运大转盘知识
06-25
浅学电子幸运大转盘知识
什么是虚拟DOM
shenmomingzihao的博客
06-14 1331
虚拟DOM
【前端性能优化】避免DOM的回流
zhhvera的博客
06-15 725
回流 元素位置发生变化，需要重新排布和渲染 避免DOM的回流 1. 放弃传统的操作dom，基于vue/react数据影响视图模式 mvvp/mvc/虚拟dom/dom diff…[尽可能的避免的重绘和回流] 2. 分离读写模式 浏览器都有批量渲染机制：如果有连续修改样式的内容，浏览器会有渲染队列机制，先统一加载到队列之中，然后进行统一的渲染； **分离读写：**将操作样式和读取样式分开来写，利用浏览器的队列渲染机制【图中:console.log（）放在中间问题很大】 4. 样式集中改变 box.style
为什么虚拟dom会提高性能？
weixin_59763367的博客
11-04 936
虚拟dom讲解
react虚拟dom和diff算法的理解
estherlxy的博客
05-16 229
虚拟dom 虚拟DOM的本质就是一个JS对象，虚拟DOM减少了真实DOM的操作，当修改数据的时候，就是修改虚拟DOM产生全新的虚拟DOM， 新旧虚拟DOM使用diff算法，得到patch(也就是需要修改的部分)，然后将这个patch打到浏览器的DOM上 （减少重绘和回流，从而达到性能优化的目的） 每次DOM操作会引起重绘或者回流，频繁的真实DOM的修改会触发多次的排版和重绘相当耗性能 虚拟DOM为什么会提高性能？ 虚拟DOM提高性能，不是说不操作DOM，而是减少操作DOM的
如何在JavaScript中创建二维数组
allway2的博客
05-10 1万+
二维数组是一组共享相同名称的项目。二维数组是数组的数组，也就是说，创建一维数组对象的数组。它们以行和列的形式排列成矩阵。 JavaScript建议了一些创建二维数组的方法。 数组构造¶ 您可以使用数组构造函数和for循环来创建2D数组，如下所示： const m = 4; const n = 5; let arr = new Array(m); // create an empty array of length n for (var i = 0; i < m; i++) { arr
JavaScript创建二维数组
weixin_44364294的博客
01-20 748
当您将创建一个带有对象(引用类型)的数组时，则每个元素都在内存中引用相同的值。通俗的讲，就是我们创建了一个一维数组，将一维数组。是因为使用传播运算符，然后使用map()，不需要将new与array一起使用。new Array和Array相同。放到一个新的一维数组里面，得到的二维数组，这样就是其实他们都是同一个数组。使用该方法创建的二维数组，修改一个值，会导致同一列的值都被修改。用上述代码创建的二维数组不会有法一的问题。
javascript中如何创建二维数组
热门推荐
周清城的博客
09-12 3万+
学过C语言的我太耿直 一般这种情况下我会直接var arr = new Array[10][10];但是不出意外的话这样是会报错的，因为在js中根本没有这样的语法 在这之前，让我们先来回顾一下js中是怎么样创建一维数组的： 使用数组直接量，这个是最简单的，在方括号内将数组元素用逗号隔开即可： var arr = [ ]; //空数组 var s = [1,2,3,4]; /
JavaScript生成二维数组
终生学习，终生成长
12-10 6112
方法一： new Array(x).fill(new Array(y).fill(false)) 但注意，当一个对象别传递给fill方法时，填充数组的是这个对象的引用。即二维数组的第一个维度中的每一个数组都指向同一个引用，如果向第一个维度中的任一元素执行push，则每一个二维中都会多一个元素。 方法二：Array.from(new Array(x), () => new Array(y).fill(false)) 测试代码： const arr1 = new Array(2).fill(new Ar
JS创建二维数组-竟然不一样
caicsama的博客
05-07 862
一般创建数组只修改一位 使用es6方法修改数组，一列会被修改 一般创建二位数组： let arr1=[]; for(let i=0;i<4;i++){ arr1[i]=new Array(); for(let j=0;j<4;j++){ arr1[i][j]=false; } } //修改其中一个元素 arr1[3][1]=true; co...
静态方法中使用jdbctemplate_JdbcTemplate浅学
最新发布
06-13
可以在静态方法中使用JdbcTemplate，只需在方法中创建JdbcTemplate对象即可。以下是一个简单的示例： ```java import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.jdbc.datasource.DriverManagerDataSource; public class MyDao { private static JdbcTemplate jdbcTemplate; static { DriverManagerDataSource dataSource = new DriverManagerDataSource(); dataSource.setDriverClassName("com.mysql.jdbc.Driver"); dataSource.setUrl("jdbc:mysql://localhost:3306/mydb"); dataSource.setUsername("username"); dataSource.setPassword("password"); jdbcTemplate = new JdbcTemplate(dataSource); } public static void myStaticMethod() { String sql = "SELECT COUNT(*) FROM mytable"; int count = jdbcTemplate.queryForObject(sql, Integer.class); System.out.println("Count: " + count); } } ``` 在上面的示例中，我们首先在静态块中创建了一个JdbcTemplate实例，然后在静态方法中使用该实例执行SQL查询。需要注意的是，我们在静态方法中不能直接访问非静态的实例变量或方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值