vue是如何通过diff算法做渲染更新
渲染页面
图中框起来的部分,vue会根据响应式变化的通知生成一颗新的 Virtual Dom Tree,然后将新的Virtual Dom Tree 和之前的 Virtual Dom Tree 做 diff patch 实现。
Virtual Dom Tree
为什么要使用 VirtualDom?
通常,我们认为操作Dom 是很耗费性能的一件事情,我们可以考虑通过JS对象来模拟Dom对象,毕竟操作JS对象比操作Dom省时很多,但是在VirtualDom 中 也不能减少对Dom操作,而这一对Dom的操作都时在diff patch过程完成的。
这一步其实时节省了前端的工作量,减少了前端直接通过Dom API 完成 dom 节点 curd 的操作,从而提高了开发效率,并非时我们产品的性能。
在软件开发中遇到的所有问题都可以通过增加一层抽象去解决,从架构角度去解释,其实就是关注点分离的一种体现。而VirtualDom也是这样的分层思想。
Diff && Patch
什么是diff
从以上可以看出diff 似乎是对一个字符串的差异比较或者对比
病毒是有RNA组成的,而RNA是由四个碱基对组成的,diff 算法也通常用于在计算机生物学领域去比较RNA之间的序列的区别,
假如通过 diff 算法得出 两个 RNA 病毒的 碱基序列是相似的,那我们就能得出他们都是来自同一族群,假如其中有一个RNA 他们已经可以得到
治疗方案,或者已经有了特效药,新产生的这个RNA 也就没有过多的担忧了,所以我们学好了diff算法 ,是不是可以帮我嗯抵抗这个病毒。
下面我们学习 Vue中的 diff 策略
Diff 策略
Vue中 通过mvvm框架转换为 Virtual Dom Tree, 当我们进行一些异步操作的时候, 当变化被通知响应后,会将左边的dom tree 转化为 右边的dom tree,
转化过程中会用到我们 diff的策略。
- 按tree的层级进行diff
在主流框架中一般都会按tree的层级进行diff,原因是在web ui 中很少会出现 dom 的层级结构会因为交互而产生更新,因此我们的virtual dom的策略就是在新旧节点之间按照层级进行diff 而得到差异。
- 按类型进行diff
不管virtual dom 中节点数据对应的是原生dom节点还是说vue 的组件,不同节点对应的指数,节点结构差异是很明显的,因此对不同结构类型投入的diff成本与产出比差异是很大的,为了提升效率,virtual dom 只对相同类型的同一节点 diff,当新旧节点发生类型改变时,不进行指数的比较而直接创建新类型的virtual dom 替换旧节点
- 列表diff
在列表diff中,可以通过设置key 可以提升diff 的效率
免责声明
本文只是在学习vue diff算法中的一些笔记,文中的资料也会涉及到引用,具体出处不详,商业用途请谨慎转载。
vue是如何通过diff算法做渲染更新的更多相关文章
- 理解Vue 2.5的Diff算法
DOM"天生就慢",所以前端各大框架都提供了对DOM操作进行优化的办法,Angular中的是脏值检查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual ...
- vue虚拟dom和diff算法
vue的虚拟dom和diff算法 1.虚拟dom 虚拟dom,我的理解就是通过js对象的方式来具体化每一个节点,把dom树上面的每个节点都变为对象里的一个元素,元素的子元素变为子节点,节点上面的cla ...
- Vue中diff算法的理解
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...
- diff算法深入一下?
文章转自豆皮范儿-diff算法深入一下 一.前言 有同学问:能否详细说一下 diff 算法. 简单说:diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch ...
- React的diff算法(译文)
前言 此篇文章主要是因为在看Virtual DOM(虚拟DOM)的时候看到的主要讲的是实现Virtual Dom 的diff算法,原文地址:https://calendar.perfplanet.c ...
- react虚拟dom diff算法
react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...
- (待补充)diff 算法解析
今天,学习React的时候,底层提到了 diff算法,顺藤摸瓜, 也发现了VUE也使用了diff算法. mark一下,后续补充 infoq-VUE-diff算法 react-diff算法
- Vue源码终笔-VNode更新与diff算法初探
写完这个就差不多了,准备干新项目了. 确实挺不擅长写东西,感觉都是罗列代码写点注释的感觉,这篇就简单阐述一下数据变动时DOM是如何更新的,主要讲解下其中的diff算法. 先来个正常的html模板: & ...
- 详解vue的diff算法
前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...
随机推荐
- 零基础学习java------20---------反射
1. 反射和动态代理 参考博文:https://blog.csdn.net/sinat_38259539/article/details/71799078 1.0 什么是Class: 我们都知道,对象 ...
- 【leetcode】451. Sort Characters By Frequency
Given a string s, sort it in decreasing order based on the frequency of the characters. The frequenc ...
- [转]sizeof计算空间大小的总结
原文链接:http://www.cnblogs.com/houjun/p/4907622.html 关于sizeof的总结 1.sizeof的使用形式:sizeof(var_name)或者sizeof ...
- [学习总结]1、View的scrollTo 和 scrollBy 方法使用说明和区别
参考资料:http://blog.csdn.net/vipzjyno1/article/details/24577023 非常感谢这个兄弟! 先查看这2个方法的源码: scrollTo: 1 /** ...
- java web 限制同一个用户在不同处登入
用到的技术:map集合,sessionListener监听器,Fiter过滤器. 实现思路: 一.利用一个全局的map集合来保存每个用户sessionID的值的一个集合.一个用户对应一个session ...
- JVM堆空间结构及常用的jvm内存分析命令和工具
jdk8之前的运行时数据区域 程序计数器 是一块较小的内存空间,它可以看做是当前线程所执行的字节码的行号指示器.每个线程都有一个独立的程序计数器,这类内存区域为"线程私有",此内存 ...
- 【Windows】github无法访问/hosts文件只能另存为txt
因为我的github访问不了了,搜索解决方案为修改host文件 https://blog.csdn.net/curry10086/article/details/106800184/ 在hosts文件 ...
- Android CameraX 打开摄像头预览
目标很简单,用CameraX打开摄像头预览,实时显示在界面上.看看CameraX有没有Google说的那么好用.先按最简单的来,把预览显示出来. 引入依赖 模块gradle的一些配置,使用的Andro ...
- SharedWorker实现多标签页联动计时器
web workers对于每个前端开发者并不陌生,在mdn中的定义:Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法.线程可以执行任务而不干扰用户界面.此外,他们可以使用XML ...
- Python matplotlib绘制圆环图
一.语法和参数简介 plt.pie(x2,labels=labels, autopct = '%0.2f%%', shadow= False, startangle =0,labeldistance= ...