| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> diff和事件循环机制 -> 正文阅读 |
|
[JavaScript知识库]diff和事件循环机制 |
diff:1.组件并不是真实的DOM节点,而是存在于内存之中的一种数据结构,叫做虚拟DOM(virtual DOM).只有当它插入文档以后,才会变成真实的DOM,根据React的设计,所有的DOM变动,都先在虚拟DOM上发生,然后再将实际发生变动的部分,反映再真实DOM上,这种算法叫做DOM diff. 2.diff算法: (1)diff作为VirtualDOM加速器,其算法上的改进优化是React整个界面渲染的基础和性能的保障. (2)diff会帮助我们就算出VirtualDOM中真正变化的部分,并只针对该部分进行原生DOM操作,而不是渲染整个页面,从而保证了每次操作更新后页面的高效渲染. 1)React将VirtualDOM树转换为actualDOM的最少操作过程称为调和(reconciliation). 2)diff算法就是调和过程的具体实现. 3.element diff : 对于同一个层级的一组子节点,可以通过它们唯一的ID来区分. (1) 当节点处于同一个层级的时候,diff提供了三种节点操作: INSERT_MARKUP(插入)、MOVE_EXISTING(移动)、REMOVE_NODE(删除) 1)插入:新的组件不在旧的集合里,也就是是一个全新的节点. 2)旧集合中有新的组件类型,且element是可更新的类型,generateComponent-Children已经调用receiveComponent,这种情况下prevChild=nextChild,就需要做移动操作,可以复用以前的DOM节点. 3)旧组件类型,在新的集合里也有,但对应的element不同则不能直接复用和更新,需要执行删除操作,或者旧组件不在新集合里,也要执行删除操作. 4.component diff :拥有相同类的两个组件将会生成相似的树形结构,拥有不同类的两个组件将会生成不同的树形结构. (1)如果是同一类型的组件,按原策略继续比较VirtualDOM树即可. (2)如果不是,则将该组件判断为dirty component,从而替换整个组件下的所有子节点. (3)对于同一类型的组件,可能其virtualDOM没有任何变化,如果能确切的知道这一点,那么就可以节省大量的diff运算时间,因此,Reacty允许用户通过shouldComponentUpdate( )来判断是否需要对组件进行diff算法分析. 5.diff方法详解 tree diff: (1)DOM节点跨层级的移动操作很少,忽略不计 1)React对树的算法进行了简洁明了的优化:只对树进行分层比较,两棵树只会对同一层次的节点进行比较. 2)React只会对相同层级的DOM节点进行比较,即同一个父节点下的所有子节点,当发现该节点已经不存在了,就会删除该节点和其所有子节点,不会再做进一步的比较. 3)而如果真的出现了跨层级的移动,并不会出现移动操作,而是被移动的根节点被删除而后重新创建. 事件循环机制:1.Node.js事件循环: (1)Node.js是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. (2)Node.js的每一个API都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. (3)Node.js基本上所有的事件机制都是用设计模式中观察者模式实现. (4)Node.js单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. ? |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年3日历 | -2025/3/29 1:27:44- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |