Vue3 源码解读之 time slicing 的使用方法

简介

time-slicing 是一种将任务拆分为多个小任务，分散到渲染帧之间执行的技术。Vue3 在异步更新和大型列表渲染问题上

应用了 time-slicing 技术，以加快页面渲染速度。本篇文章将探讨 time-slicing 的使用方法，通过实例帮助我们理解这个

新特性。

使用方法

尽管 Vue3 已经应用了 time-slicing 技术，但是在实际开发中，我们也可以手动添加 time-slicing 以加速渲染。Vue3 中提供了

一个 scheduleJob API 用于手动添加 time-slicing.

// 添加任务
const jobId = scheduleJob(() => {
  // 耗时操作
  // ...
})

示例说明1

我们可以通过一个列表渲染的例子来理解 time-slicing 的应用。在如下例子中，我们将高开销的任务拆分为若干小任务，

并将这些小任务分散到每个帧之间执行。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
    </li>
  </ul>
</template>

<script>
import { ref, onMounted, requestIdleCallback } from 'vue'

export default {
  setup() {
    const items = ref([/*...*/])

    onMounted(() => {
      const jobId = scheduleJob(() => {
        // 分批更新数据
        let i = 0
        const length = items.value.length
        while (i < length) {
          for (let j = 0; j < 10 && i < length; j++, i++) {
            // 耗时操作
            // ..
          }
          // 在下一帧渲染
          if (i < length) {
            requestIdleCallback(() => {
              // 防止继续执行
              if (!jobId) return 
              // 继续执行未完成的任务
              scheduleJob(job, jobId)
            })
          }
        }
      })
    })

    return {
      items
    }
  }
}
</script>

在这个例子中，我们将列表项的更新拆分为了多个小任务，每个小任务只处理 10 个项。当小任务在当前帧中不能完成时，

会通过 requestIdleCallback API 在下一帧继续执行。这样就不会阻塞 UI 线程，从而保证了页面渲染速度。

示例说明2

我们也可以通过以往我们常用的方法 setTimeout 来对比一下 time-slicing 的效果。在如下例子中，我们模拟了一个

耗时的操作，并将其放在 setTimeout 中执行。我们发现，这种方式会阻塞 UI 线程，导致页面卡顿。

<template>
  <button @click="onClick">
    Click me
  </button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    function onClick() {
      let index = 0
      const timer = setInterval(() => {
        index++
        if (index > 10) {
          clearInterval(timer)
        }
        // 耗时操作
        // ...
      }, 1000)
    }

    return {
      count,
      onClick
    }
  }
}
</script>

在这个例子中，我们使用了一个 setInterval 来模拟一个耗时操作，每隔 1s 执行一次。这种方式会占用大量的线程资源，

导致页面卡顿。重新执行 setInteral 的时候是否需要考虑清楚，这对页面渲染速度有重大影响。