zoukankan      html  css  js  c++  java
  • 【JS】JavaScript引擎的内部执行机制

    

    近期在复习JavaScript,看到setTimeout函数时。想起曾经刚学时,在一本书上看过setTimeout()里的回调函数执行的间隔时间有昌不是后面设置的值。曾经没想太多。网上看了JS大神的解释,整理记录下JavaScript引擎的内部执行机制。

    首先看一段小程序:

    <script>
          alert('第1');
          setTimeout(function(){alert('第2');}, 2000);
          alert('第3');
    </script>

    输出顺序是:第1。第3,第2;再来看一段小程序:

    <script>
          alert('第1');
          setTimeout(function(){alert('第2')}, 0);
          alert('第3');
    </script>

    输出顺序还是:第1,第3,第2。为什么不是1,2,3。setTimeout的间隔时间设置为0不就是马上执行吗?在此引出JavaScript的执行机制:Event Loop(貌似译为事件轮询)。


    JavaScript的任务队列

            由于JavaScript是单线程的。全部的任务仅仅能是一个接一个的运行,可是当遇像IO这种读取一些大文件时就会出现后一个任务长时间处于等待状态。要等到前一个任务运行完才干開始后一个任务。

    由于这样。JavaScript也设计为主线程能够先无论IO设备,先运行后面的任务,等IO设备返回了结果。再回去继续运行。

            因此。在JavaScript中,全部的任务能够分为两种:一是同步任务(synchronous);二是异步任务(asynchronous)。

    同步任务就是:在主线程上。必须等前一个任务运行完。才干运行后一个任务;异步任务则是:不进入主线程。而是进入“任务队列”(task queue)的任务,主线程仅仅有在得到“任务队列”的通知。某个异步任务能够运行,该异步任务才会进入主线程运行。

    事实上“任务队列”就是一个事件的队列。主线程读取“任务队列”,就是读取里面的事件。这些事件一般包含IO设备的事件、点击、滚动事件,凡是指定过回调函数(callback)。这些事件发生时就会进入“任务队列”。异步任务必须指定回调函数。主线程运行异步任务,就是运行相应的回调函数。

    oText.innerText = '...';

    比方在某一页面中。运行了上面这一代码后。DOM的内容会发生改变,接着系统触发DOM Changed事件,产生异步回调。回调函数被加入到“任务队列”中。


    Event Loop

    1.同步任务在主线程上运行会形成一个“运行栈”(execution context stack);

    2.异步任务在“任务队列”里有执行结果就会在“任务队列”里置一事件(Event)。

    3.当“运行栈”中的同步任务都运行完后。“任务队列”中有运行结果(事件,比方:Mouse Clicks、Key Presses、定时事件等)的异步任务就会进入“运行栈”,開始运行;

    主线程从“任务队列”读取事件的过程是不断循环的,这样的机制就称为Event Loop。


    Event Loop图解:

    仅仅有“运行栈”中任务运行完了,就会去读取“任务队列”,运行各事件相相应的回调函数。


    如今应该明确开篇中,为什么setTimeout的间隔时间设置为0却最后运行了吧,由于要等“运行栈”中的代码运行完后,才会去运行“任务队列”中的回调函数。





    Author:顾故

    Sign:别输给以前的自己






  • 相关阅读:
    学习Spring-Data-Jpa(二十二)---事务处理
    学习Spring-Data-Jpa(二十一)---DataSource与JPA属性配置
    学习Spring-Data-Jpa(二十)---@EnableJpaRepositories
    学习Spring-Data-Jpa(十九)---JPA的持久性上下文
    学习Spring-Data-Jpa(十八)---JPA的继承策略
    REST简介
    H5离线缓存机制-manifest
    Javascript 异步加载详解
    jQuery Ajax 实例 全解析
    整屏滚动效果 jquery.fullPage.js插件+CSS3实现
  • 原文地址:https://www.cnblogs.com/lytwajue/p/7162668.html
Copyright © 2011-2022 走看看