• 技术文章 >web前端 >js教程

    node.js中事件循环(EventLoop)的详细介绍(附代码)

    不言不言2018-08-20 09:53:22原创903
    本篇文章给大家带来的内容是关于js中事件循环(EventLoop)的详细介绍(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    前言

    在学习eventloop之前,我们需要复习一下js的单线程和异步。
    虽说js是单线程的,但是在浏览器和Node中都做了相应的处理。如浏览器中的web workers(工作线程),Node中的child_process(子进程)。它们的出现对大量计算的分解起到了促进作用。

    事件循环

    当进程启动时,Node会创建一个tick循环,每个tick循环通过内部的观察者来查看是否有事件需要处理,如果有就取出事件和它相关的回调函数去执行,执行完以后就进入下一个循环,如果不再有就退出进程。

    浏览器中的eventloop

    在浏览器中把异步事件放到工作线程中,避免阻塞主线程UI的渲染

      console.log('进程开始')
      const ajax = new XMLHttpRequest()
      ajax.addEventListener('load', () => {
        console.log('load')
      })
      ajax.addEventListener('loadend', () => {
        if (ajax.readyState == 4 && ajax.status == 200) {
          console.log('ajax success')
          } else {
          console.log('ajax success')
          }
      })
      ajax.open('get', 'http://localhost/study/html/vue.js')
      ajax.send()
      setTimeout(() => {
        console.log('setTimeout')
      }, 300)
      fetch('http://localhost/study/html/demo.json',{
        headers: {
          'content-type': 'application/json'
        }
      }).then(res => {
        console.log('fetch')
      })
      let i = 0
      while(i < 10000) {
        i++
      }
      console.log(i)
      console.log('进程结束')

    从结果可以看出三种异步处理不阻塞主线程代码的执行,而ajax、fetch、setTimeout根据代码处理结束的先后来执行回调函数。

    Nodejs中的eventloop

    Node中的事件循环根据观察者的优先级来执行,同一个循环内的process.nextTick -> setTimeout -> setImmediate

    setTimeout(() => {
      console.log('setTimeout')
    }, 0)
    setImmediate(() => {
      console.log('setImmediate1')
      process.nextTick(() => {
        console.log('setImmediate1 插入nextTick')
      })
    })
    setImmediate(() => {
      console.log('setImmediate2')
    })
    process.nextTick(() => {
      setTimeout(() => {
        console.log('nextTick1 setTimeout')
      }, 100)
      console.log('nextTick1')
    })
    process.nextTick(() => {
      console.log('nextTick2')
    })
    console.log('正常执行')

    总结

    事件循环的执行特点,源于利用单线程,远离多线程死锁、状态同步等问题;利用异步让单线程远离阻塞,以更好的使用CPU。

    相关推荐:

    细说JavaScript事件循环机制-第二讲

    深入理解Node.js 事件循环和回调函数

    以上就是node.js中事件循环(EventLoop)的详细介绍(附代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:node.js html css javascript
    上一篇:如何使用纯CSS实现一只黑色的愤怒小鸟(附代码) 下一篇:vue监听对象的方法以及监听对象中属性的方法介绍(代码)
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 理解JS事件循环_javascript技巧• 深入浅析Node.js 事件循环_node.js• Node.js事件循环(Event Loop)和线程池详解_node.js• Node.js 事件循环• Node.js的事件循环工作流程以及生命周期的详细讲解
    1/1

    PHP中文网