天下网吧 >> 网吧系统 >> 系统动态 >> 正文

写一个JavaScript框架:比setTimeout更棒的定时执行

2016-11-26不详佚名

异步代码执行

你可能比较熟悉 Promise、process.nextTick()、setTimeout(),或许还有 requestAnimationFrame()这些异步执行代码的方式。它们内部都使用了事件循环,但是它们在精确计时方面有一些不同。

在这一章里,我将解释它们之间的不同,然后给大家演示怎样在一个类似NX这样的先进框架里面实现一个定时系统。不用我们重新做一个,我们将使用原生的事件循环来达到我们的目的。

事件循环

事件循环甚至没有在 ES6规范里提到。JavaScript自身只有任务(Job)和任务队列(job queue)。更加复杂的事件循环是在NodeJS和HTML5规范里分别定义的,因为这篇是针对前端的,我会在详细说明后者。

事件循环可以被看做某个条件的循环。它不停的寻找新的任务来运行。这个循环中的一次迭代叫做一个滴答(tick)。在一次滴答期间执行的代码称为一次任务(task)。

while (eventLoop.waitForTask()) {    eventLoop.processNextTask()}任务是同步代码,它可以在循环中调度其它任务。一个简单的调用新任务的方式是 setTimeout(taskFn)。不管怎样,任务可能有很多来源,比如用户事件、网络或者DOM操作。

写一个JavaScript框架:比setTimeout更棒的定时执行

任务队列

更复杂一些的是,事件循环可以有多个任务队列。这里有两个约束条件,相同任务源的事件必须在相同的队列,以及任务必须按插入的顺序进行处理。除此之外,浏览器可以做任何它想做的事情。例如,它可以决定接下来处理哪个任务队列。

while (eventLoop.waitForTask()) {    const taskQueue = eventLoop.selectTaskQueue()  if (taskQueue.hasNextTask()) {    taskQueue.processNextTask()  }}用这个模型,我们不能精确的控制定时。如果用 setTimeout()浏览器可能决定先运行完其它几个队列才运行我们的队列。

微任务队列

幸运的是,事件循环还提供了一个叫做微任务(microtask)队列的单一队列。当前任务结束的时候,微任务队列会清空每个滴答里的任务。

while (eventLoop.waitForTask()) {    const taskQueue = eventLoop.selectTaskQueue()  if (taskQueue.hasNextTask()) {    taskQueue.processNextTask()  }  const microtaskQueue = eventLoop.microTaskQueue  while (microtaskQueue.hasNextMicrotask()) {    microtaskQueue.processNextMicrotask()  }}最简单的调用微任务的方法是 Promise.resolve().then(microtaskFn)。微任务按照插入顺序进行处理,并且由于仅存在一个微任务队列,浏览器不会把时间弄乱了。

此外,微任务可以调度新的微任务,它将插入到同一个队列,并在同一个滴答内处理。

绘制Rendering

最后是绘制Rendering调度,不同于事件处理和分解,绘制并不是在单独的后台任务完成的。它是一个可以运行在每个循环滴答结束时的算法。

在这里浏览器又有了许多自由:它可能在每个任务以后绘制,但是它也可能在好几百个任务都执行了以后也不绘制。

幸运的是,我们有 requestAnimationFrame(),它在下一个绘制之前执行传递的函数。我们最终的事件模型像这样:

while (eventLoop.waitForTask()) {    const taskQueue = eventLoop.selectTaskQueue()  if (taskQueue.hasNextTask()) {    taskQueue.processNextTask()  }  const microtaskQueue = eventLoop.microTaskQueue  while (microtaskQueue.hasNextMicrotask()) {    microtaskQueue.processNextMicrotask()  }  if (shouldRender()) {    applyScrollResizeAndCSS()    runAnimationFrames()    render()  }}现在用我们所知道知识来创建定时系统!

利用事件循环

和大多数现代框架一样,NX 也是基于DOM操作和数据绑定的。批量操作和异步执行以取得更好的性能表现。基于以上理由我们用 Promises、 MutationObservers 和 requestAnimationFrame()。

我们所期望的定时器是这样的:

代码来自于开发者

数据绑定和DOM操作由NX来执行

开发者定义事件钩子

浏览器进行绘制

步骤1

NX寄存器对象基于 ES6代理&nbs

本文来源:不详 作者:佚名

相关文章
没有相关文章
声明
声明:本站所发表的文章、评论及图片仅代表作者本人观点,与本站立场无关。若文章侵犯了您的相关权益,请及时与我们联系,我们会及时处理,感谢您对本站的支持!联系Email:support@txwb.com,系统开号,技术支持,服务联系QQ:1175525021本站所有有注明来源为天下网吧或天下网吧论坛的原创作品,各位转载时请注明来源链接!
天下网吧·网吧天下