Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

    • UI 框架

      • Angular

      • React

      • Solid

      • Svelte

      • Vue

      • 框架本质

        • 浅谈DOM DIFF
          • 前置说明
          • 传统 diff 算法为什么是 O(n^3)
          • vue2 的 diff 策略
          • vue3 的 diff 策略
            • 最长递增子串优化
    • 开发框架

    • 组件库

  • 工程能力

  • 应用基础

  • 专业领域

  • 业务场景

  • 大前端
  • 应用框架
  • UI 框架
  • 框架本质
gahing
2022-05-06
目录

浅谈DOM DIFF草稿

# 前置说明

  • 操作 dom 的成本比纯计算的成本高很多

# 传统 diff 算法为什么是 O(n^3)

字符串最短编辑距离的计算是 O(n^2) 时间复杂度;采用动态规划,详细可看这个题:https://leetcode-cn.com/problems/edit-distance/

而树的 diff ,也定义了三种操作

增加:增加节点 修改:修改节点值 删除:删除节点,若节点存在子节点,?

  a             c
 / \    =>     / \
b   c         d   b
1
2
3

# vue2 的 diff 策略

新旧的前后节点共四个,看是否相等,相等则移动指针,按需移动节点

都不存在相同的,利用预先计算好的索引,快速获知新节点在旧节点的位置。采用原生的增(appendChild)删(removeChild)移(insertBefore)对 dom 进行操作

# vue3 的 diff 策略

a b c d e
=>
a c e b d

1
2
3
4

# 最长递增子串优化

减少移动次数

编辑 (opens new window)
上次更新: 2024/09/01, 23:56:56
Vue响应式之组件更新
Next.js使用总结

← Vue响应式之组件更新 Next.js使用总结→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式