执迷 执迷
首页
  • 技术分享

    • 小白都能看懂的闭包
    • GO-GMP模型
    • MySQL调优
    • centos7部署nacos
    • elasticserch
    • redis
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • JavaScript
  • ES6
  • CSS
  • 框架
  • Node
  • 服务
  • 其他
自我介绍
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

执迷

代码也是艺术
首页
  • 技术分享

    • 小白都能看懂的闭包
    • GO-GMP模型
    • MySQL调优
    • centos7部署nacos
    • elasticserch
    • redis
  • 发布一个node插件

    • 发布一个npm包
    • 如何打包一个插件工具库
    • 打包工具的选择
  • JavaScript
  • ES6
  • CSS
  • 框架
  • Node
  • 服务
  • 其他
自我介绍
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript

    • JavaScript
    • 虚拟DOM
      • 虚拟DOM
        • 主要用处
        • 原理
        • Virtual DOM 算法
    • DOM和事件
    • ES6
    • 数组操作
    • JavaScript的深浅拷贝
    • JavaScript的执行
    • JavaScript对象
    • JavaScript类型
    • JS概念
    • js设计模式
    • js深入浅出
    • Promise
    • this的指向
    • typescript
  • ES6

  • CSS

  • 框架

  • Node

  • 服务

  • 其他

  • 设计模式

  • web3

  • react

  • 学习笔记
  • JavaScript
执迷
2022-05-15
目录

虚拟DOM

# 虚拟DOM

# 主要用处

虚拟DOM主要用于映射真实DOM上,用于减少重复的大量的DOM渲染。将原来频繁的dom操作合并起来。

# 原理

通过javascript对象表示出一个虚拟DOM用来映射真实DOM,视图的结构确实是整个全新渲染了,但是最后操作DOM的时候确实只变更有不同的地方。

# Virtual DOM 算法

1 用 JavaScript 对象结构表示 DOM 树的结构;然后用这个树构建一个真正的 DOM 树,插到文档当中 2 当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异(diff算法,diff也是虚拟dom的核心) 3 把2所记录的差异应用到步骤1所构建的真正的DOM树上,视图就更新了

Virtual DOM与DocumentFragment VirtualDOM的目的是不仅允许对稍后注入DOM的系统进行大规模编辑,而且允许在不存在DOM的环境中进行任何编辑。这是DocumentFragments和VirtualDOM的实际应用之间的最大区别。

#JavaScript#虚拟dom
上次更新: 2024/07/21, 21:46:04
JavaScript
DOM和事件

← JavaScript DOM和事件→

最近更新
01
MySQL调优 原创
08-04
02
MySQL底层 原创
07-30
03
consul单台机器部署,注册外网服务健康检查 原创
07-30
更多文章>
Theme by Vdoing | Copyright © 2019-2024 执迷 | 闽ICP备2022018045号 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式