宜宾网站建设公司

nodejs中怎么循环浏览器事件

nodejs中怎么循环浏览器事件，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

公司主营业务：网站建设、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出泗阳免费做网站回馈大家。

第一章：事件循环介绍：

  • 浏览器中的事件循环：

    • 为了协调事件(event)，用户交互(user interaction)，脚本(script)，渲染(rendering)，网络(networking)等，用户代理(user agent)必须使用 事件循环(event loops).

    • 事件：PostMessage(多个页面通信),MutationObserver(dom监听)等

    • 用户交互：click，onScroll等

    • 渲染：解析dom，css等

    • 脚本：执行脚本

  • nodejs中的事件循环

    • 事件循环允许Node.js执行非阻塞I/O操作，尽管JavaScript是单线程的，通过尽可能将操作卸载到系统内核，由于大多数现代内核都是多线程的，因此 他们可以处理在后台执行的多个操作。当其中一个操作完成时，内核会告诉Nodejs，以便可以将相应的回调添加到轮询队列中以最终执行。

    • 事件：EventEmitter

    • 非阻塞I/O: 网络请求，文件读写等

    • 脚本： js执行脚本

  • 事件循环的本质

    • 在浏览器或者nodejs环境中，运行时对js脚本的调度方式就叫事件循环

setTimeout(()=>{
    console.log('setTimeout')
},0)
Promise.resolve().then(() =>{
    console.log('promise')
})
console.log('main')
// main  promise  setTimeout
第二章：浏览器事件循环

  • javascript为什么是单线程的？

    • 浏览器js的作用是操作DOM，这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定javascript同时有两个线程，一个线程在某个DOM 节点上添加内容，另一个线程删除了这个节点，这时浏览器不知道以哪个线程为主。

  • 任务队列

    • 单线程意味着所有任务需要排队，如果因为任务cpu计算量大还好，但是I/O操作cpu是闲着的。所以js就设计成了一门异步语言，不会做无谓的等待。

    • 任务可以分成两种，一种是同步任务，另一种是异步任务。

    • 所有同步任务都在主线程上执行，形成一个执行栈。

    • 主线程之外，还存在一个任务队列。只要异步任务有了运行结果，就在任务队列之中放置一个事件。

    • 一旦执行栈中的所有同步任务执行完毕，系统就会读取任务队列，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

    • 主线程不断重复上面的第三步

    • 主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称 Event Loop（事件循环）

  • 宏任务和微任务

    • 除了广义的同步任务和异步任务，javaScript单线程中的任务可以细分为 宏任务和微任务。

    • macrotask(宏任务): script(整体代码)，setTimeout, setInterval, setImmediate, I/O, UI rendering

    • microtask(微任务):process.nextTick, Promise, Object.observe, MutationObserver 1.宏任务进入主线程，执行过程中会搜集微任务加入微任务队列。 2.宏任务执行完成之后，立马执行微任务中的任务。微任务执行过程中将再次收集宏任务，并加入宏任务队列 3.反复执行1，2

  • 事件循环：每执行完一轮宏任务和微任务就叫做一环事件;

高频面试题

  • 一轮事件循环会执行一次宏任务以及所有的微任务

setTimeout(() => {
    console.log('setTimeout')
    setTimeout(() => {
       console.log('setTimeout2')
    },0)
},0)

Promise.resolve().then(() =>{
    console.log('Promise')
    Promise.resolve().then(() =>{
      console.log('Promise2')
    })
})

console.log('main')
// main  promise promise2 setTimeout

  • 任务队列一定会保持先进先出的顺序执行，没次只能执行一个红任务！！！·

setTimeout(() => { // 两个setTimeout谁先进的话 谁就先出
    console.log('setTimeout')
    Promise.resolve().then(() =>{
      console.log('promise')
    })
},0)

Promise.resolve().then(() =>{
    console.log('promise2')
    setTimeout(() => {
       console.log('setTimeout2')
    },0)
})

console.log('main')
// main promise2 setTimeout  promise  setTimeout2
new Promise((res, rej) =>{
    console.log(1)
    res()
  }).then(() =>{
    console.log(2)
    new Promise((res,rej) =>{
      console.log(3)
      res()
    }).then(() =>{
      console.log(4)
    }).then(() =>{
      console.log(5)
    }).then(() =>{
      console.log(6)
    })
  }).then(() =>{
      console.log(7)
    })
    .then(() =>{
      console.log(8)
    })
// 1 2 3 4 7 5 8 6

看完上述内容，你们掌握nodejs中怎么循环浏览器事件的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


文章标题：nodejs中怎么循环浏览器事件
文章起源：http://ybzwz.com/article/pjijpi.html

其他资讯