搜索

「深入浅出」主流前端框架更新批处理方式

前端Sharing

共 8290字，需浏览 17分钟

 ·

2022-03-09 13:06

一 背景

大家好，我是 alien ，一提到更新，是前端框架中一个老生常谈的问题，这些知识也是在面试中，面试官比较喜欢问的，那么在不同的技术框架背景下，处理更新的手段各不相同，今天我们来探讨一下，主流的前端框架批量处理的方式，和其内部的实现原理。

通过今天的学习，你将收获这些内容：

  •  主流前端框架的批量更新方式。
  •  vue 和 react 批量更新的实现。
  •  宏任务和微任务的特点。

1 一次 vue 案例

首先来想一个问题。比如在 vue 中一次更新中。

<template>
   <div>
       姓名： {{ name }}
       年龄： {{ age }}
       <button @click="handleClick" >点击button>
   div>
template>

<script>
export default {
    data(){
        return {
            age:0,
            name:''
        }
    },
    methods:{
        handleClick(){
            this.name = 'alien'
            this.age = 18
        }
    }
}
script>

如上是一个非常简单的逻辑代码，点击按钮，会触发 name 和 age 的更新。那么首先想一个问题就是：

  • 正常情况下，vue 的数据层是通过响应式处理的，那么比如 age 和 name 可以理解成做了一层属性代理，字符串模版 template 里面的属性 （ name 和 age ） 的 get 会和组件的渲染 watcher （ vue3.0 里面的 effect ）建立起关联。

  • 一次重新赋值会触发 set ，那么根据响应式，会触发渲染 watcher 重新执行，然后就会重新更新组件，渲染视图。

那么暴露的问题就是，我们在 handleClick 中，同时改变了 name 和 age 属性，那么按照正常情况下，会分别触发 name 和 age 的 set，那么如果不做处理，那么会让渲染 watcher 执行两次，结果就是组件会 update 两次，但是结果是这样的吗？

结果是：vue 底层通过批量处理，只让组件 update 一次。

2 一次 react 案例

上面介绍了在 vue 中更新批处理的案例之后，我们来看一下在 react 中的批量更新处理。把上述案例用 react 来实现一下：

function Index(){
    const [ age , setAge ] = React.useState(0)
    const [ name, setName ] = React.useState('')
    return <div>
       姓名： {name}
       年龄： {age}
       <button onClick={()=>{
          setAge(18)
          setName('alien')
       }}
       >点击button>
    div>
}

点击按钮，触发更新，会触发两次 useState 的更新函数。那么 React 的更新流程大致是这样的。

  • 首先会找到 fiberRoot 。
  • 然后进行调和流程。执行 Index 组件，得到新的 element。
  • diff fiber，得到 effectList。
  • 执行 effect list，得到最新的 dom ，并进行渲染绘制。

那么按常理来说，Index 组件会执行两次。可事实是只执行一次 render。

3 批量处理意义

通过上面的案例说明在主流框架中，对于更新都采用批处理。一次上下文中的 update 会被合并成一次更新。那么为什么要进行更新批处理呢？

批处理主要是出于对性能方面的考虑，这里拿 react 为例子，看一下批处理前后的对比情况：

🌰例子一：假设没有批量更新：

/ ------ js 层面 ------

  • 第一步：发生点击事件触发一次宏任务。
  • 第二步：执行 setAge ，更新 fiber 状态。
  • 第三步：进行 render 阶段，Index 执行，得到新的 element。得到 effectlist.
  • 第四步：进行 commit 阶段，更新 dom。
  • 第五步：执行 setName ，更新 fiber 状态。
  • 第六步：重复执行第三步，第四步。

/ ------ 浏览器渲染 ------

  • js 执行完毕，渲染真实的 dom 元素。

我们可以看到如果没有批量更新处理，那么会多走很多步骤，包括 render 阶段 ，commit 阶段，dom 的更新等，这些都会造成性能的浪费，接下来看一下有批量更新的情况。

🌰例子二：存在批量更新。

/ ------ js 层面 ------

  • 第一步：发生点击事件触发一次宏任务。
  • 第二步：setAge 和 setName 批量处理 ，更新 fiber 状态。
  • 第三步：进行 render 阶段，Index 执行，得到新的 element。得到 effectlist.
  • 第四步：进行 commit 阶段，更新 dom。

/ ------ 浏览器渲染 ------

  • js 执行完毕，渲染真实的 dom 元素。

从上面可以直观看到更新批处理的作用了，本质上在 js 的执行上下文上优化了很多步骤，减少性能开销。

二 简述宏任务和微任务

在正式讲批量更新之前，先来温习一下宏任务和微任务，这应该算是前端工程师必须掌握的知识点。

所谓宏任务，我们可以理解成，