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 相关文章推荐
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
js实现一键复制功能
Mar 16 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php ci框架验证码实例分析
2013/06/26 PHP
php支付宝接口用法分析
2015/01/04 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
2014 年最热门的21款JavaScript框架推荐
2014/12/25 Javascript
基于JavaScript怎么实现让歌词滚动播放
2015/11/03 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
React组件的三种写法总结
2017/01/12 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
js实现表格数据搜索
2020/08/09 Javascript
Python while 循环使用的简单实例
2016/06/08 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python读取Kafka实例
2019/12/23 Python
如何使用repr调试python程序
2020/02/28 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
西班牙最大的在线滑板和街头服饰商店:Fillow.net
2019/04/15 全球购物
解决方案设计综合面试题
2015/08/31 面试题
二手书店创业计划书
2014/01/16 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
社区义诊活动总结
2014/04/30 职场文书
市场开发与营销专业求职信范文
2014/05/01 职场文书
幸福中国演讲稿
2014/09/12 职场文书
活动费用申请报告
2015/05/15 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL