精华内容
下载资源
问答
  • js运行机制

    千次阅读 2020-02-15 16:28:33
    js是单线程运行,同一时间只能做一件事情,这是因为js是浏览器脚本语言,用途是与用户互动进行DOM操作,单线程运行可以避免同时操作同一个DOM的矛盾问题 js的单线程中,将任务分为2种:一种是同步任务,一种是异步...

    一、基础知识

    1. js是单线程运行,同一时间只能做一件事情,这是因为js是浏览器脚本语言,用途是与用户互动进行DOM操作,单线程运行可以避免同时操作同一个DOM的矛盾问题

    2. js的单线程中,将任务分为2种:一种是同步任务,一种是异步任务
      同步任务:在主线程上排队进行的,按顺序执行
      异步任务:不进入主线程,而进入event table执行,异步事件完成有结果后把结果回调函数放入“任务队列”(taskqueue),只有“任务队列”通知主线程某个异步任务可以执行了,该任务才会进入主线程执行

    3. js代码运行分为2个阶段:编译阶段和执行阶段
      – 编译阶段:由编译器完成,把代码翻译成可执行代码,这个阶段作用域规则会确定(函数的定义,变量的声明提前)
      – 执行阶段:由引擎完成,任务是执行可执行代码(按照js运行机制),上下文是在执行阶段被创建的

    4. js中的异步操作
      – setTimeOut 和 setInterval
      – ajax
      – promise
      – DOM事件

    二、Event Loop事件循环

    1. 同步任务在主线程上执行形成“执行栈”(execution context stack)
    2. 异步任务进入Event Table中,并在里面注册回调函数,当异步事件完成时,Event Table将这个函数移到在“主线程”之外的“任务队列”中
    3. 一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任务队列”,如果有任务,就拿到相应的回调函数去主线程执行
      上述过程不断重复,这就是Event Loop事件循环
      在这里插入图片描述

    三、宏任务or微任务

    异步任务可以分为宏任务和微任务。在异步操作promise中,new promise会被放到主线程中立即执行,promise.then会被放到微任务队列中。

    • 宏任务(macro-task):整体代码script、setTimeOut、setInterval
    • 微任务(mincro-task):promise.then、promise.nextTick(node)

    事件循环的顺序:进入整体代码(宏任务)后开始第一次循环,接着执行所有微任务,然后再从宏任务开始执行。在同一个事件循环里面。微任务是优先于宏任务的,当微任务没有完成的时候,是不会执行宏任务的。

    setTimeout(function() {
     console.log('setTimeout');
    })
    new Promise(function(resolve) {
     console.log('promise');
    }).then(function() {
     console.log('then');
    })
    

    这段代码的执行顺序:
    1、进入整体代码
    2、setTimeout回调函数会被注册发放到宏任务列表中
    3、new Promise立即执行,then发放到微任务中
    4、主线程执行完毕,执行微任务列表
    5、第一轮循环结束,从宏任务开始,执行setTimeout
    在这里插入图片描述
    在执行微任务的时候,若发现新的微任务,会把这个新的微任务添加到队列尾部,微任务队列依次执行完毕后,才会执行下一个循环;

    console.log(1);
    setTimeout(function() {
     console.log(2);
    })
    new Promise(function(resolve) {
     console.log(3);
    }).then(function() {
     console.log(4);
    }).then(function() {
      console.log('5.我是新增的微任务');
    });
    console.log(6);
    
    // 1,6,3,4,5.我是新增的微任务,2
    

    四、单线程的优缺点

    • 优点:系统稳定,不会产生严重的同步问题,比如一个线程操作DOM的增加另一个线程操作DOM的删除
    • 缺点:容易出现代码的阻塞

    五、举栗子

    1、for循环中的定时器

    for(var i=0; i<5; i++){
      setTimeout(function() {
        console.log(i);
      },1000)
    }
    //5,5,5,5,5
    

    setTimeout会被拿到异步队列中,当“执行栈”中的所有同步任务执行完毕(这个时候for循环结束,i已经为5),系统读取“任务队列”的setTimeout(循环了5次,有5个)

    • 补充:让输出结果为0-4
      1.将var变为let
      2.加个立即执行函数
      3.加闭包
    //使用let
    for(let i=0; i<5; i++){
      setTimeout(function() {
        console.log(i);
      },1000)
    }
    //使用立即执行函数
    for(var i=0; i<5; i++){
    (function(i){
      setTimeout(function() {
        console.log(i);
      },1000)
    })(i)
    }
    //使用闭包
    for(var i=0; i<5; i++){
      var a = function(){
        var j = i;
        setTimeout(function() {
          console.log(j);
        },1000)
      }
      a();
    }
    

    2、执行顺序

    function add(x, y) {
      console.log(1)
      setTimeout(function() { // timer1
        console.log(2)
      }, 1000)
    }
    add();
    
    setTimeout(function() { // timer2
      console.log(3)
    })
    
    new Promise(function(resolve) {
      console.log(4)
      setTimeout(function() { // timer3
        console.log(5)
      }, 100)
      for(var i = 0; i < 100; i++) {
        i == 99 && resolve()
      }
    }).then(function() {
      setTimeout(function() { // timer4
        console.log(6) 
      }, 0)
      console.log(7)
    })
    
    console.log(8)
    
    执行结果
    //1,4,8,7,3,6,5,2
    

    主线程任务:1,4,8
    微任务:7
    宏任务:timer1,timer2,timer3,timer4(其中按照定时器延迟时间顺序为timer2,timer4,timer3,timer1)

    • 定时器的补充
      1.在到达指定时间时,定时器就会将相应回调函数插入“任务队列”尾部。这就是“定时器(timer)”功能。定时器的第二个参数是指定其回调函数推迟/每隔多少毫秒数后执行。
      2.当第二个参数缺省时,默认为 0;当指定的值小于 4 毫秒,则增加到 4ms(4ms 是 HTML5 标准指定的,对于 2010 年及之前的浏览器则是 10ms);也就是说至少需要4毫秒,该setTimeout()拿到任务队列中。

    所以在上面的例子中,第二个参数缺省比第二参数为0的先执行。

    展开全文
  • JavaScript运行机制

    2018-04-17 17:23:15
    JavaScript是单线程的,什么是单线程,单线程就是在同一时刻只能执行一个任务,只有等到这个任务完成时才会执行下一个任务。 任务队列: 什么是任务队列:所有的任务无非就两种,要么是同步任务,要么是异步任务。...

    单线程:

    JavaScript是单线程的,什么是单线程,单线程就是在同一时刻只能执行一个任务,只有等到这个任务完成时才会执行下一个任务。

    任务队列:

    什么是任务队列:所有的任务无非就两种,要么是同步任务,要么是异步任务。

    什么时候会开启异步任务:setTimeout()、setInterval()、Dom事件、es6中的 Promise。

    执行顺序:同步任务优先执行,遇到异步任务时先挂起,待所有的同步任务执行完成后,才会执行异步任务。

    异步任务的放入时间和执行时间:

    当异步任务到达预定义的时间后,js引擎会将这个异步任务从浏览器的Timer模块中取出放入异步队列中。

    异步队列会等待Event Loop来执行。由异步队列的执行时间引出Event Loop。

    事件循环(Event Loop):

    同步任务会按加载顺序进入运行栈,异步任务不会立即放入运行栈,这时setTimeouthe和setInterval这些异步任务会保存到浏览器的Timer模块,等到了预定时间后js引擎会将这个异步任务从浏览器的Timer模块中取出放入异步队列中。一旦运行栈上的同步任务被执行完,js引擎会将异步任务读取到运行栈执行,等到运行栈里的异步任务执行完成后,js引擎就会监听异步队列中有没有,如果有,就将这个异步任务放入执行栈中执行。只要执行栈空了就会检查异步任务,这个过程是循环不断的,这种运行机制就称为事件循环(Event Loop)。

     

    展开全文
  • 如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜。  那么JavaScript是怎么来进行解析的吗?它的执行顺序又是...
  • Vue.js 运行机制

    2018-04-28 17:59:10
    Vue.js 内部运行机制,值得看。找了好久,才找到这样的一个资源。分享出来。
  • 本文实例讲述了JavaScript运行机制。分享给大家供大家参考,具体如下: 第一次写博客 目前研一第二学期,大二开始入门前端,然而长久以来都是对于框架的简单调用,并未对其进行深入研究,因此,这个博客是作为自我...
  • JS运行机制.xmind.zip

    2019-07-24 11:56:07
    整理浏览器运行机制,包括:GUI渲染线程、js引擎线程、事件触发线程、定时触发器线程和http异步请求线程等知识
  • 主要介绍了JavaScript运行机制之事件循环(Event Loop)详解,本文从多个方面讲解了Event Loop,需要的朋友可以参考下
  • 序 setTimeout()函数:用来指定某个函数或某段...解析:无论setTimeout的执行时间是0还是1000,结果都是先输出3后输出2,这就是面试官常常考查的js运行机制的问题,接下来我们要引入一个概念,JavaScript 是单线程的。
  • 主要给大家介绍了如何通过JS运行机制的角度说说作用域的相关资料,文中通过图文介绍的非常详细,对大家的学习或者使用JS作用域具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • 面试:js运行机制

    千次阅读 2019-03-07 16:19:55
    js是单线程的 js是浏览器脚本语言,用于与用户互动、操作dom,注定只能是单线程的。H5允许jd创建多个线程,但是子线程完全受主线程控制,且不得操作dom。 任务队列和事件循环 同步任务:在主线程上排队执行的任务...

    面试考点

    js是单线程的

    js是浏览器脚本语言,用于与用户互动、操作dom,注定只能是单线程的。H5允许jd创建多个线程,但是子线程完全受主线程控制,且不得操作dom。

    任务队列和事件循环

    同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。

    异步任务:不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行

    过程: 只要主线程空了,就去读取任务队列,并不断重复。这个过程就是事件循环(Event Loop)

    (1)主线程-执行栈(execution context stack)-同步任务

    (2)任务队列(tash queue)-异步任务

    任务队列中的事件:IO设备、用户产生事件、定时器事件、Promise

    :HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加。在苹果机上的最小时间间隔是10毫秒,在Windows系统上的最小时间间隔大约是15毫秒

    一些例子

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>js运行机制</title>
    </head>
    <body>
    </body>
    <script>
        console.log(1);
        setTimeout(() => {
            console.log(2);
        }, 0);
        console.log(3);
        //1 3 2
        //---------------------------------
        console.log('A');
        while (1) {
            
        }
        console.log('B');
        //print A
        //then brower crash
        //-----------------------------------
        console.log('A');
        setTimeout(() => {
            console.log('B');
        }, 0);
        while (1) {
            
        }
        //only print A
        //----------------------------------
        for (var i = 0 ;i < 4; i++) {
            setTimeout(() => {
                console.log(i);
            }, 1000);
        }
        //print 4 4 4 4
        //在1秒之后,settimeout中的语句才被放在了异步队列当中
    </script>
    </html>

     

     

     

    展开全文
  • javascript的this又有区别于Java、C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑。 this使用到的情况:1. 纯函数2. 对象方法调用3. 使用new调用构造函数4. 内部函数5. 使用call / apply 6.事件绑定 1. ...
  • 我会分为两部分来深入剖析一下JavaScript的底层运行机制。在这篇文章主要是从浏览器常驻线程 和 eventLoop 来了解js运行机制。在第二篇文章会从es6的promise和es7的async、await来了解js运行机制。 一、浏览器...

    我会分为两部分来深入剖析一下JavaScript的底层运行机制。在这篇文章主要是从浏览器常驻线程 和 eventLoop 来了解js的运行机制。在第二篇文章会从es6的promise和es7的async、await来了解js的运行机制。

    一、浏览器常驻线程

    浏览器的常驻线程有5个,分别是Js引擎线程、GUI线程、http网络请求线程、定时触发器线程、浏览器时间处理线程。它们的作用分别如下:

    1.Js引擎线程:解释执行js代码、用户输入、网络请求

    2.GUI线程:绘制用户界面、与js主线程是互斥的

    3.http网络请求线程:处理用户的get\post等请求,等返回结果后将回调函数推入任务队列

    4.定时触发器线程:setTimeout、setInterval等待时间结束后把执行函数推入任务队列中

    5.浏览器时间处理线程:将click、mouse等交互事件发生后将这些事件放入事件队列中
    在这里插入图片描述
    http网络请求线程、定时触发器线程、浏览器时间处理线程会监听事件的执行,待事件响应将回调函数放进事件队列。要特别注意的是js引擎线程和GUI渲染线程是互斥的,即在js引擎线程在进行的话,画面是不会渲染的。

    下面我着重讲解一下js引擎线程,即我们的js运行机制。

    二、Js执行机制

    JavaScript是基于单线程运行的,同时又是可以异步执行的,一般来说这种既是单线程又是异步的语言都是基于事件来驱动的,恰好浏览器就给JavaScript提供了这么一个环境。先看一下这张开门见山的图片,大概了解一下js的执行机制是怎么样的。
    在这里插入图片描述
    我们来分析一下这张图片

    1.主线程自上而下执行所有代码
    2.同步任务直接进入到主线程被执行,而异步任务则进入到Event Table并注册相对应的回调函数
    3.异步任务完成后,Event Table会将这个函数移入Event Queue(FIFO)
    4.主线程任务执行完了以后,会从Event Queue中读取任务,进入到主线程去执行。
    这个过程会一直循环,这就是我们所说的事件循环(Event Loop)

    下面我会举同步任务和异步任务的执行过程的例子

    同步任务

    function foo(ot){
                function bar(it){
                    console.log(it);
                }
                bar(20);
                console.log(ot);
            }
            foo(10);
    

    这是一个典型的同步任务,它是怎样进行的呢,我用文字来详细描述一下它的过程。执行栈即为js的主线程

    a、代码没有执行的时候,执行栈为空栈。
    b、foo函数执行时,创建一帧,这帧中包含了形参、局部变量(预编译过程),然后把这一帧压入栈中。
    c、然后执行foo函数内代码,执行bar函数
    d、创建新帧,同样有形参、局部变量、压入栈中
    e、bar函数执行完毕,弹出栈
    f、foo函数执行完毕,弹出栈
    g、执行栈为空

    异步任务

     $.ajax({
                url:'',
                data:{},
                success:function(data){
                   console.log(data)
                }
            })
            console.log('run')
    

    分析一下其过程
    1.Ajax进入Event Table,注册回调函数success
    2.执行console.log(“run”)
    3.ajax事件完成,http网络请求线程把任务放入Event Queue中
    4.主线程(调用栈)为空时读取事件队列的任务,执行success函数

    重新理解定时器

    1.setTimeout的等待时间结束后并不是直接执行的,而是定时触发器线程将该任务先推入浏览器的事件队列中,在同步队列结束后再依次调用任务队列中的任务。

    2.setInterval是每隔一段时间把任务队列放到Event Queue之中。

    展开全文
  • 前端面试必会题(二)--- js运行机制js运行机制 刷题的开始和大家分享一下我比较喜欢的古诗,”长风破浪会有时,直挂云帆济沧海。——《行路难 其一》李白“,祝你成功! js运行机制      ...
  • JavaScript运行机制
  • 「硬核JS」一次搞懂JS运行机制

    千次阅读 2020-03-10 15:33:47
    从开始做前端到目前为止,陆续看了很多帖子讲JS运行机制,看过不久就忘了,还是自己理一遍好些 通过码字使自己对JS运行机制相关内容更加深刻(自己用心写过的贴子,内容也会牢记于心) 顺道给大家看看(我太难了,...
  • javaScript的特点 javaScript的最大特点就是单线程。什么是单线程,可以理解为一条流水线,同一时间只能干一件事,不能同时做多件事。 为什么js是单线程,js的目的是为了与用户进行交互,以及操作dom。这一目的决定...
  • 对于JavaScript运行机制的深入学习 (本篇文章主要涉及的是promise队列和普通异步的讨论,想要了解运行机制的,可以去看阮大神的文章JavaScript 运行机制详解:再谈Event Loop) 之前我对于JavaScript运行机制的...
  • 浅谈js运行机制(线程)

    万次阅读 多人点赞 2016-12-19 16:41:00
    浅谈js运行机制(线程)
  • 都到一封私信,相信很多人对一些js运行机制,一看到都是很头疼的问题,那么博主今天彻底整理了一篇js运行机制类的问题,并且分段进行封装,哪里不会点哪里。 提示:以下是本篇文章正文内容,下面案例可供参考 一、...
  • JavaScript 运行机制详解

    千次阅读 2016-03-22 12:05:37
    一、为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。 JavaScript的单线程,与它的用途有关。...
  • JS运行机制

    2018-07-04 21:22:08
    如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜。那么JavaScript是怎么来进行解析的吗?它...
  • 我研究JavaScript闭包(closure)已经有一段时间了。我之前只是学会了如何使用它们,而没有透彻地了解它们具体是如何运作的。那么,究竟什么是闭包?Wikipedia给出的解释并没有太大的帮助。闭包是什么时候被创建的,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 204,130
精华内容 81,652
关键字:

js运行机制

友情链接: hw-nvdlav1.zip