js的编译机制

js的编译机制

技术杂谈小彩虹2021-08-01 9:46:13390A+A-

(1)JS为什么是单线程的?

JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。

场景描述:

那么现在有2个进程,process1 process2,由于是多进程的JS,所以他们对同一个dom,同时进行操作

process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢?

这样想,JS为什么被设计成单线程应该就容易理解了吧

(2) JS为什么需要异步?

场景描述:

如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。
对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验

所以,JS中存在异步执行。

(3) JS单线程又是如何实现异步的呢?

既然JS是单线程的,只能在一条线程上执行,又是如何实现的异步呢?

是通过的事件循环(event loop),理解了event loop机制,就理解了JS的执行机制

(4)宏任务和微任务

  • 宏任务(macro-task): 包括整体代码script,setTimeout,setInterval,ajax,dom操作
  • micro-task(微任务):Promise,process.nextTick

(5)宏任务和微任务关系图

  • 执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的【事件队列】里
  • 当前宏任务执行完成后,会查看微任务的【事件队列】,并将里面全部的微任务依次执行完
 console.log('start......')
    setTimeout(function(){
        console.log('setTimeout......')
    })

    new Promise(function(resolve){
        console.log('Promise1 begin......')
        resolve()
    }).then(function(){
        // 微任务1
        console.log('Promise1 then......')
        setTimeout(function(){
            console.log('setTimeout2......')
        })
        new Promise(function(resolve2){
            console.log('Promise2 begin......')
            resolve2()
        }).then(function(){
        // 微任务2
            console.log('Promise2 then......')
        })

    })
    console.log('finish1......')

结果以及分析:

结果:

  • start......,
  • Promise1 begin......,
  • finish1......,
  • Promise1 then......
  • Promise2 begin......
  • Promise2 then......
  • setTimeout......
  • setTimeout2......

分析:

// 第一轮事件循环
- start......,
- Promise1 begin......,
- finish1......,
- Promise1 then......
- Promise2 begin......
- Promise2 then......
// 第一轮事件循环
setTimeout......
setTimeout2......

(6)js的事件循环

  • 首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table
  • 异步任务在event table中注册函数,当满足触发条件后,被推入event queue
  • 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中

(7)谈谈setTimeout?

这段setTimeout代码什么意思? 我们一般说: 3秒后,会执行setTimeout里的那个函数

 setTimeout(function(){
    console.log('执行了')
 },3000)    
 

但是这种说并不严谨,准确的解释是: 3秒后,setTimeout里的函数被会推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行.

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们