浏览器事件循环与vue nextTicket的实现


Posted in Javascript onApril 16, 2019
  • 同步:就是在执行栈中(主线程)执行的代码
  • 异步:就是在异步队列(macroTask、microTask)中的代码

简单理解区别就是:异步是需要延迟执行的代码

线程和进程

  • 进程:进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成;进程在运行过程中能够申请创建和使用系统资源(如独立的内存区域等),这些资源也会随着进程的终止而被销毁
  • 线程:线程则是进程内的一个独立执行单元,在不同的线程之间是可以共享进程资源的,是进程内可以调度的实体。比进程更小的独立运行的基本单位。线程也被称为轻量级进程。

简单讲,一个进程可由多个线程构成,线程是进程的组成部分。

js是单线程的,但浏览器并不是,它是一般是多进程的。

以chrome为例: 一个页签就是一个独立的进程。而javascript的执行是其中的一个线程,里面还包含了很多其他线程,如:

  • GUI渲染线程
  • http请求线程
  • 定时器触发线程
  • 事件触发线程
  • 图片等资源的加载线程。

事件循环

ok,常识性内容回顾完,我们开始切入正题。

microTask 和 macroTask

常见的macroTask有:setTimeout、setInterval、setImmediate、i/o操作、ui渲染、MessageChannel、postMessage

常见的microTask有:process.nextTick、Promise、Object.observe(已废弃)、MutationObserver(html5新特性)

用线程的理论理解队列:

macroTask由事件触发线程维护
microTask通常由js引擎自己维护

一个完整的事件循环(Event loop)过程解析

  • 初始状态:调用栈(主线程)、microTask队列、macroTask队列,macroTask里只有一个待执行的script脚本(如:入口文件)
  • 将这个script推入调用栈,同步执行代码。在这过程中,会调用一些接口或者触发一些事件,可产生新的marcoTask与microTask。它们分别会被推入各自的任务队列。同时该script脚本会被从macroTask中移除,在调用栈执行的过程就称之为一个tick。
  • 调用栈代码执行完成后,需要处理的是microTask中的任务。将里面的任务依次推入调用栈执行。
  • 待microTask 所有 的任务都执行完成后,再去macroTask中获取优先级最高的任务推入调用栈。
  • 执行渲染操作,更新界面
  • 查看是否有web worker,如果有,则对其进行处理。

(上述过程循环往复,直到两个队列都清空)

浏览器事件循环与vue nextTicket的实现

注意:处理microTask中的任务时,是执行完所有的任务。而处理macroTask的任务时是一个一个执行。

渲染时机

经过上面的学习我们把异步拿到的数据放在macroTask中还是microTask中呢?

比如先放在macroTask中:

setTimeout(myTask, 0)

那么按照Event loop,myTask会被推入macroTask中,本次调用栈内容执行完,会执行microTask中的内容,然后进行render。而此次render是不包含myTask中的内容的。需要等到 下一次事件循环 (将myTask推入执行栈后)才能执行。

如果放在microTask中:

Promise.resolve().then(myTask)

那么按照Event loop,myTask会被推入microTask中,本次调用栈内容执行完,会执行microTask中的myTask内容,然后进行render,也就是在 本次的事件循环 中就可以进行渲染。

总结:我们在异步任务中修改dom是尽量在microTask完成。

Vue next-tick实现

Vue2.5以后,采用单独的next-tick.js来维护它。

import { noop } from 'shared/util'
import { handleError } from './error'
import { isIOS, isNative } from './env'

// 所有的callback缓存在数组中
const callbacks = []
// 状态
let pending = false

// 调用数组中所有的callback,并清空数组
function flushCallbacks () {
 // 重置标志位
 pending = false
 const copies = callbacks.slice(0)
 callbacks.length = 0
 // 调用每一个callback
 for (let i = 0; i < copies.length; i++) {
  copies[i]()
 }
}

// Here we have async deferring wrappers using both microtasks and (macro) tasks.
// In < 2.4 we used microtasks everywhere, but there are some scenarios where
// microtasks have too high a priority and fire in between supposedly
// sequential events (e.g. #4521, #6690) or even between bubbling of the same
// event (#6566). However, using (macro) tasks everywhere also has subtle problems
// when state is changed right before repaint (e.g. #6813, out-in transitions).
// Here we use microtask by default, but expose a way to force (macro) task when
// needed (e.g. in event handlers attached by v-on).

// 微任务function
let microTimerFunc
// 宏任务fuction
let macroTimerFunc
// 是否使用宏任务标志位
let useMacroTask = false

// Determine (macro) task defer implementation.
// Technically setImmediate should be the ideal choice, but it's only available
// in IE. The only polyfill that consistently queues the callback after all DOM
// events triggered in the same loop is by using MessageChannel.
/* istanbul ignore if */

// 优先检查是否支持setImmediate,这是一个高版本 IE 和 Edge 才支持的特性(和setTimeout差不多,但优先级最高)
if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {
 macroTimerFunc = () => {
  setImmediate(flushCallbacks)
 }
// 检查MessageChannel兼容性(优先级次高)
} else if (typeof MessageChannel !== 'undefined' && (
 isNative(MessageChannel) ||
 // PhantomJS
 MessageChannel.toString() === '[object MessageChannelConstructor]'
)) {
 const channel = new MessageChannel()
 const port = channel.port2
 channel.port1.onmessage = flushCallbacks
 macroTimerFunc = () => {
  port.postMessage(1)
 }
// 兼容性最好(优先级最低)
} else {
 /* istanbul ignore next */
 macroTimerFunc = () => {
  setTimeout(flushCallbacks, 0)
 }
}

// Determine microtask defer implementation.
/* istanbul ignore next, $flow-disable-line */

// 微任务用promise来处理
if (typeof Promise !== 'undefined' && isNative(Promise)) {
 const p = Promise.resolve()
 microTimerFunc = () => {
  p.then(flushCallbacks)
  // in problematic UIWebViews, Promise.then doesn't completely break, but
  // it can get stuck in a weird state where callbacks are pushed into the
  // microtask queue but the queue isn't being flushed, until the browser
  // needs to do some other work, e.g. handle a timer. Therefore we can
  // "force" the microtask queue to be flushed by adding an empty timer.
  if (isIOS) setTimeout(noop)
 }
// promise不支持直接用宏任务
} else {
 // fallback to macro
 microTimerFunc = macroTimerFunc
}

/**
 * Wrap a function so that if any code inside triggers state change,
 * the changes are queued using a (macro) task instead of a microtask.
 */
// 强制走宏任务,比如dom交互事件,v-on (这种情况就需要强制走macroTask)
export function withMacroTask (fn: Function): Function {
 return fn._withTask || (fn._withTask = function () {
  useMacroTask = true
  const res = fn.apply(null, arguments)
  useMacroTask = false
  return res
 })
}

export function nextTick (cb?: Function, ctx?: Object) {
 let _resolve
 // 缓存传入的callback
 callbacks.push(() => {
  if (cb) {
   try {
    cb.call(ctx)
   } catch (e) {
    handleError(e, ctx, 'nextTick')
   }
  } else if (_resolve) {
   _resolve(ctx)
  }
 })
 // 如果pending为false,则开始执行
 if (!pending) {
  // 变更标志位
  pending = true
  if (useMacroTask) {
   macroTimerFunc()
  } else {
   microTimerFunc()
  }
 }
 // $flow-disable-line
 // 当为传入callback,提供一个promise化的调用
 if (!cb && typeof Promise !== 'undefined') {
  return new Promise(resolve => {
   _resolve = resolve
  })
 }
}

这段代码主要定义了Vue.nextTick的实现。 核心逻辑:

  • 定义当前环境支持的microTimerFunc和macroTimerFunc(调用时会执行flushCallbacks方法)
  • 调用nextTick时,缓存传入的callback
  • pending设置为false,执行microTimerFunc或macroTimerFunc(也就是执行flushCallbacks方法)
  • pending设置为true,执行完数组中的callbakc,清空数组

vue在this.xxx=xxx进行节点更新时,实际上是触发了Watcher的queueWatcher

export function queueWatcher (watcher: Watcher) {
 const id = watcher.id
 if (has[id] == null) {
  has[id] = true
  if (!flushing) {
   queue.push(watcher)
  } else {
   // if already flushing, splice the watcher based on its id
   // if already past its id, it will be run next immediately.
   let i = queue.length - 1
   while (i > index && queue[i].id > watcher.id) {
    i--
   }
   queue.splice(i + 1, 0, watcher)
  }
  // queue the flush
  if (!waiting) {
   waiting = true
   nextTick(flushSchedulerQueue)
  }
 }
}

queueWatcher做了在一个tick内的多个更新收集。

具体逻辑我们在这就不专门讨论了(有兴趣的可以去查阅vue的观察者模式),逻辑上就是调用了nextTick方法

所以vue的数据更新是一个异步的过程。

那么我们在vue逻辑中,当想获取刚刚渲染的dom节点时我们应该这么写

你肯定会说应该这么写

getData(res).then(()=>{
 this.xxx = res.data
 this.$nextTick(() => {
  // 这里我们可以获取变化后的 DOM
 })
})

没错,确实应该这么写。

那么问题来了~

前面不是说UI Render是在microTask都执行完之后才进行么。

而通过对vue的$nextTick分析,它实际是用promise包装的,属于microTask。

在getData.then中,执行了this.xxx= res.data,它实际也是通过wather调用$nextTick

随后,又执行了一个$nextTick

按理说目前还处在同一个事件循环,而且还没有进行UI Render,怎么在$nextTick就能拿到刚渲染的dom呢?

我之前被这个问题困扰了很久,最终通过写test用例发现,原来UI Render这块我理解错了

UI render理解

之前一直以为新的dom节点必须等UI Render之后渲染才能获取到,然而并不是这样的。

在主线程及microTask执行过程中,每一次dom或css更新,浏览器都会进行计算,而计算的结果并不会被立刻渲染,而是在当所有的microTask队列中任务都执行完毕后,统一进行渲染(这也是浏览器为了提高渲染性能和体验做的优化)所以,这个时候通过js访问更新后的dom节点或者css是可以访问到的,因为浏览器已经完成计算,仅仅是它们还没被渲染而已。

总结

以上所述是小编给大家介绍的浏览器事件循环与vue nextTicket的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
jquery中对表单的基本操作代码
Jul 29 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
理理Vue细节(推荐)
Apr 16 #Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 #Javascript
js实现删除li标签一行内容
Apr 16 #Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 #Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 #Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 #Javascript
详解JavaScript中的强制类型转换
Apr 15 #Javascript
You might like
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP图片水印类的封装
2017/07/06 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
javascript中Function类型详解
2015/04/28 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Django验证码的生成与使用示例
2017/05/20 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
python实现两个文件合并功能
2018/04/01 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
专业实习自我鉴定
2013/10/29 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
法制宣传月活动方案
2014/05/11 职场文书
文明演讲稿范文
2014/05/12 职场文书
大学生村官考核材料
2014/05/23 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
学习考察心得体会
2014/09/04 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2014年派出所工作总结
2014/11/21 职场文书
护士自荐信范文
2015/03/25 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android