📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • 简介
  • Patch流程
  • 创建新增的节点
  • 删除节点
  • 更新节点
  • 更新子节点
  • 哪些是未处理的节点
  • 更新子节点总体流程
在GitHub上编辑
  1. 源码解析
  2. Vue源码解析
  3. Vue2源码解析系列-渲染系统(待更新)

Patch

简介

patch是vnode最核心的部分,它将vnode渲染成真实的DOM。

Vue可以直接将所有vnode渲染成真实DOM,但是这样性能消耗太大,需要大量地操作DOM,而如果用JavaScript找出哪些node需要更改,哪些不用更改,然后再操作DOM的话,可以大幅度提高性能。

Patch流程

对现有的DOM修改其实就只要做三件事

  • 创建新增的节点

  • 删除已经废弃的节点

  • 修改需要更新的节点

而对于vnode,我们需要关注三种节点类型:

  • 元素节点: 特有tag属性

  • 文本节点: text保存着文本内容

  • 注释节点: 特有isComment属性

创建新增的节点

当遍历完oldVnode都没有找到对应的节点时,就说明此节点是新增的节点,我们需要创建真实的节点并添加到视图上。

事实上,只有三种节点才会被创建: 元素节点、文本节点和注释节点。

判断这些节点的依据是: 如果vnode有tag属性就是元素节点,就用document.createElement方法创建;如果没有就看是否有isComment属性,有且为true则表明这是一个注释节点,则用document.createComment方法创建;如果没有isComment属性,就只能是文本节点,这时候调用document.createTextNode方法创建文本节点。 添加视图只需要调用parentNode.appendChild()方法即可。

对于元素节点特别要注意children(子节点),应当递归地创建子节点并添加到父节点上,最后将最上层的节点添加到DOM上。

删除节点

当oldVnode存在该节点,而vnode没有,则说明这是一个废弃的节点,应当删掉;或者是替换节点时删除旧节点。

删除节点非常简单,调用parent.removeChild方法即可将节点从视图中删除。

更新节点

当vnode和oldVnode节点是同一个节点时,不是暴力地用新节点覆盖旧节点,而是比对两个节点,找出不一样的地方进行更新。

在更新节点时应当注意“静态节点”,这种节点不会随状态的改变而更新,应当跳过判断以加快速度。 如 <p>我是静态节点</p>

新旧vnode比对流程

更新节点先看是否有text属性,如果text不同则修改text,然后更新子节点。

更新子节点有三种情况:

  • 只有oldVnode有子节点: 清空DOM中的子节点

  • 只有vnode有子节点: 进一步判断oldVnode是否有text,若无则添加子节点,若有则清空DOM的文本

  • oldVnode和vnode都有子节点: 更新子节点

更新子节点

在前面的更新节点中,如果oldVnode和vnode都有children,则需要进一步的操作来更新子节点。

更新子节点的操作有四种: 创建、删除、更新、替换。

新旧两个子节点列表是通过循环进行比对的,所以创建节点的操作是在循环体内执行的,其具体实现是在oldChildren(旧子节点列表)中寻找本次循环所指向的新子节点。

创建子节点

如果在oldChildren中没有找到与本次循环所指向的新子节点相同的节点,那么说明本次循环所指向的新子节点是一个新增节点。对于新增节点,我们需要执行创建节点的操作,并将新创建的节点插入到oldChildren中所有未处理节点(未处理就是没有进行任何更新操作的节点)的前面。

删除子节点

删除子节点,本质上是删除那些oldChildren中存在但newChildren中不存在的节点。

当newChildren中的所有节点都被循环了一遍后,也就是循环结束后,如果oldChildren中还有剩余的没有被处理的节点,那么这些节点就是被废弃、需要删除的节点。

移动子节点

通过Node.insertBefore()方法,我们可以成功地将一个已有节点移动到一个指定的位置。

但怎么得知新虚拟节点的位置是哪里呢?换句话说,怎么知道应该把节点移动到哪里呢?其实得到这个位置并不难。对比两个子节点列表是通过从左到右循环newChildren这个列表,然后每循环一个节点,就去oldChildren中寻找与这个节点相同的节点进行处理。也就是说,newChildren中当前被循环到的这个节点的左边都是被处理过的。那就不难发现,这个节点的位置是所有未处理节点的第一个节点,所以,只要把需要移动的节点移动到所有未处理节点的最前面。

更新子节点

当一个节点同时存在于newChildren和oldChildren中时需要更新子节点。

如果newChildren和oldChild中有对应的节点,那么除了要进行更新操作外,还得看他们位置是否相同,如果不同还得进行移动子节点操作。

更新节点操作前面讲过了。

优化策略

针对位置不变的或者说位置可以预测的节点,我们不需要循环来查找,因为我们有一个更快捷的查找方式。它共有4种查找方式,分别是:

  • 新前与旧前

  • 新后与旧后

  • 新后与旧前

  • 新前与旧后

新前指的是newChildren第一个未处理的节点,旧后指的是oldChildren最后一个未处理的节点,其他的以此类推。

如果前面这4种方式对比之后都没找到相同的节点,这时再通过循环的方式去oldChildren中详细找一圈,看看能否找到。大部分情况下,通过前面这4种方式就可以找到相同的节点,所以节省了很多次循环操作。

新前和旧前

对比它们俩是不是同一个节点。如果是同一个节点,则说明我们不费吹灰之力就在oldChildren中找到了这个虚拟节点。

新后与旧后

当“新前”与“旧前”对比后发现不是同一个节点,这时可以尝试用“新后”与“旧后”的方式来比对它们俩是否是同一个节点。

“新后”与“旧后”的意思是使用“新后”这个节点和“旧后”这个节点对比,对比它们俩是不是同一个节点。如果是同一个节点,就将这两个节点进行对比并更新视图

新后与旧前

“新后”与“旧前”的意思是使用“新后”这个节点与“旧前”这个节点进行对比,通过对比来分辨它们俩是不是同一个节点。如果是同一个节点,就对比它们俩并更新视图

如果“新后”与“旧前”是同一个节点,那么由于它们的位置不同,所以除了更新节点外,还需要执行移动节点的操作

新前与旧后

“新前”与“旧后”的意思是使用“新前”与“旧后”这两个节点进行对比,对比它们是否是同一个节点,如果是同一个节点,则进行更新节点的操作

由于“新前”与“旧后”这两个节点的位置不同,所以除了更新节点的操作外,还需要进行移动节点的操作

哪些是未处理的节点

你可能会发现,所有的对比都是针对未处理的节点的,已处理过的节点忽略不计。那么,怎么分辨哪些节点是处理过的,哪些节点是未处理过的呢?

正常来说,我们可以循环newChildren,每次循环都去oldChildren循环找对应的节点,但是因为前面的优化策略可能会使节点在后面进行比对,因此正确的做法是从两边向中间循环。

那么,怎样实现从两边向中间循环呢?首先,我们先准备4个变量:oldStartIdx、oldEndIdx、newStartIdx和newEndIdx。这4个变量分别表示oldChildren的开始位置的下标(oldStartIdx)和结束位置的下标(oldEndIdx),以及newChildren的开始位置的下标(newStartIdx)和结束位置的下标(newEndIdx)。在循环体内,每处理一个节点,就将下标向指定的方向移动一个位置,通常情况下是对新旧两个节点进行更新操作,就相当于一次性处理两个节点,将新旧两个节点的下标都向指定方向移动一个位置。

更新子节点总体流程

上一页Vue2源码解析系列-渲染系统(待更新)下一页Vue2源码解析系列-调度系统(todo)

最后更新于1年前