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


Posted in Javascript onOctober 31, 2019

今天给大家带来一篇源码解析的文章,emm 是关于 vue3 的,vue3 源码放出后,已经有很多文章来分析它的源码,我觉得很快又要烂大街了,哈哈

不过今天我要解析的部分是已经被废除的 time slicing 部分,这部分源码曾经出现在 vue conf 2018 的视频中,但是源码已经被移除掉了,之后可能也不会有人关注,所以应该不会烂大街

打包

阅读源码之前,需要先进行打包,打包出一份干净可调试的文件很重要

vue3 使用的 rollup 进行打包,我们需要先对它进行改造

import cleanup from 'rollup-plugin-cleanup'
plugins: [
  cleanup() //增加了一个 cleanup 插件
   
  tsPlugin,
  aliasPlugin,
  createReplacePlugin(isProductionBuild, isBunlderESMBuild, isCompat),
  ...plugins
],

增加 cleanup 插件主要目的是打包出无注释的文件

以上,是我个人阅读源码的习惯,我觉得注释和类型的作用就是碍眼的,所以先去掉再说

用例

我们在读源码之前,需要先实现一个正确用例,但是我读的这个版本的源码,还是 class 的,怎么办?

这个时候我们可以根据测试用例来猜测并给出代码

function block () {
 const start = performance.now()
 while (performance.now() - start < 2) {
 }
}

class Test extend Component {
 render (props) {
  block()
  return h('li', props.msg)
 }
}

class App extend Component {
 msg = ''
 render () {
  const list = []
  for (let i = 0; i < 200; i++) {
   list.push(h(Test, { key: i, msg: this.msg }))
  }
  return [
   h('input', {
    onInput: e => {
     this.msg = e.target.value
    }
   }),
   h('div',list)
  ]
 }
}

很好,现在我们有了一个争取,简单的用例了,接下来就是一股脑调试

调试

由于我在 fre 中也实现了时间切片,所以我对它非常了解,我知道它的作用原理,所以我们直接搜索宏任务,哈,果然有

window.addEventListener('message', event => {
  if (event.source !== window || event.data !== key) {
    return;
  }
  flushStartTimestamp = getNow();
  try {
    flush();
  }
  catch (e) {
    handleError(e);
  }
}, false);
function flushAfterMacroTask() {
  window.postMessage(key, `*`);
}

这段代码非常容易理解,就是在宏任务队列里执行了 flush 函数,继续

然后关键就来了

function flush() {
  let job;
  while (true) {
    job = stageQueue.shift();
    if (job) {
      stageJob(job);
    }
    else {
      break;
    }
    {
      const now = getNow();
      if (now - flushStartTimestamp > frameBudget && job.expiration > now) {
        break; // 此处为关键,意思是超过16ms,或者任务过期,跳出循环
      }
    }
  }
  ... 以下代码省略...

上面的循环很关键,它做的事情很简单的,从 stageQueue 里出栈一个任务,然后执行 stateJob

stateJob 做的事情很简单,就是往 commitQueue 里 push 这个任务

function stageJob(job) {
  if (job.ops.length === 0) {
    currentJob = job;
    job.cleanup = job();
    currentJob = null;
    commitQueue.push(job); //重点在这里
    job.status = 2;
  }
}

到目前为止,我们源码读了一丢丢,但是已经几乎读完了可以说

它的本质就是,在宏任务中,stageQueue 作为低优先级任务队列,不断的出栈,然后分批次(16ms 的阈值)入栈到 commitQueue 里

呼,其实如果不是写文章,就可以到此为止了,但是写文章为了凑字数嘛,我们继续

上面我们已经知道了两个队列,stageQueue 和 commitQueue,但是并不知道他们里面都是什么东西

是什么东西被调度的呢?打印一下,你就知道:

console.log(stageQueue,commitQueue)

得出的结果是

function mountComponentInstance(){...}

看名字就知道是组件挂载函数,当然组件更新和卸载的函数也是同理

到现在,我们也知道了参与调度的是组件挂载更新的函数,所以本质上,vue 的时间切片的基本单位是组件,也就是说,如果你的组件挂载需要一个小时,那你仍然要卡一小时

凑字数

剩下的内容纯属凑字数,就是除了核心调度之外的东西

比如 commitQueue 是操作 dom 的,那它咋个操作

function commitJob(job) {
  const { ops, postEffects } = job;
  for (let i = 0; i < ops.length; i++) {
    applyOp(ops[i]); // 重点在这里
  }
  if (postEffects) {
    postEffectsQueue.push(...postEffects);
  }
  resetJob(job);
  job.status = 0;
}

如上,拿到 ops,然后进行操作,我们看一下 ops 是啥就行了

[<div></div>, <li></li>, function CreactElement(){}]

凑合凑合,是个数组,包含了 dom 操作的方法和被操作的元素

然后这个过程是同步完成的,也就是所谓的高优先级任务,必须等到彻底收集完毕,才可以循环执行它

做完这个,postEffectQueue 主要是一些额外的副作用和清理工作,我实在凑字数无能,就不打印了

总结

最后我们用最直白的话,总结一下:

在宏任务队列中,不断的从 stageQueue 分批次(16ms)将组件的函数转移到 commitQueue 里,转移完了,同步操作 dom

原理其实还是利用了宏任务队列,其实现在 vue 的做法和 fre 也有一点点类似,fre 是在宏任务中,尽可能更多的去访问 reconcile 大循环

关于废除

如开头提到的,time slicing 这部分内容已经在 master 分支被移除了,关于为什么废除,我特地发了 issue,可以戳这里:(天啊,我和尤终于可以和平地进行交谈了)

https://github.com/vuejs/rfcs/issues/89

简单说,就是 time slicing 的收益不大,除了 issue 中提到的,它本身的场景就少的可怜

也因为 vue 现在的实现,由于调度的基本单位是组件,所以它仍然会因为组件内部的逻辑而被阻断

比如我把用例中用于阻断的 block 函数改为 1s,就已经彻底卡死了

思考

从 issue 和源码本身,我们可以思考一些问题,同时用来凑字数

时间切片是否必须?

答案是否定的,尤的回复已经足够充分了:https://github.com/vuejs/rfcs/issues/89#issuecomment-546988615

大致有两点:

  • 除了高帧率动画,其他的场景几乎都可以使用防抖和节流去提高响应性能
  • vue 现在的实现,粒度太大,最终的效果十分有限,不值得

那,fre 呢?

fre 的异步渲染,是否也存在这个问题,不得不承认,fre 虽然粒度很小,对于组件内部的阻断可以搞定,但是元素本身也可以被阻断

而且第一个问题也是存在的,就是没有太多适用场景

但是 fre 源码层面还是意义重大的,即便这玩意搞出来,发现它作用不大,副作用不小,但 fre 作为我个人的学习和研究的项目,它的价值从来就不是业务层面的

只是我应该停下来,异步渲染搞定了,只是向大家展示它的源码实现,未来不应该跟随 react 去搞一堆业务 API,如 useTransition 等等

关于源码?

vue3 发版当天,源码解读就放出了,但是到目前为止,所有的源码解读统统都是蹭热度的
不久的将来,vue 的源码又要烂大街了……
这种现象引起反省,我们读源码到底是为了什么?为了面试吗?为了更好的写业务?
对我而言,仅仅只是感兴趣,我对这部分源码感兴趣,我就去读,并且只读感兴趣的部分
其实大家也看到了,我很少写源码解读的文章,因为我一直反对所谓的【通读源码】
将阅读源码作为一项工作,同样的小函数,读了一遍又一遍,重复劳动
这和糊 shi 有什么区别呢?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
javascript中定义类的方法详解
Feb 10 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
react-router中的属性详解
Jun 01 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 Javascript
vue data恢复初始化数据的实现方法
Oct 31 #Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 #Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 #Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 #Javascript
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 #Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 #Javascript
You might like
一个改进的UBB类
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
javascript break指定标签打破多层循环示例
2014/01/20 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
Vue3为什么这么快
2020/09/23 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
python中函数传参详解
2016/07/03 Python
Python线程创建和终止实例代码
2018/01/20 Python
Python切片操作实例分析
2018/03/16 Python
浅析python的优势和不足之处
2018/11/20 Python
Django ModelForm操作及验证方式
2020/03/30 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
JPA的优势都有哪些
2013/07/04 面试题
新春寄语大全
2014/04/09 职场文书
可怜妈妈观后感
2015/06/09 职场文书
大学生受助感言
2015/08/01 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android