zoukankan      html  css  js  c++  java
  • JS执行机制

    1. JS执行机制

    以下代码执行的结果是什么?

     console.log(1);
     
     setTimeout(function () {
         console.log(3);
     }, 1000);
     
     console.log(2);

     以下代码执行的结果是什么?

    console.log(1);
     
     setTimeout(function () {
         console.log(3);
     }, 0);
     
     console.log(2);

     

    1.1 JS 是单线程

      JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚 本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比如我们对 某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。 
      单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

    1.2 同步任务和异步任务

    ​   单线程导致的问题就是后面的任务等待前面任务完成,如果前面任务很耗时(比如读取网络数据),后面任务不得不一直等待!!

    ​   为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制。于是,JS 中出现了同步任务异步任务

    同步

    ​   前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法:我们要烧水煮饭,等水开了(10分钟之后),再去切菜,炒菜。

    异步

    ​   你在做一件事情时,因为这件事情会花费很长时间,在做这件事的同时,你还可以去处理其他事情。比如做饭的异步做法,我们在烧水的同时,利用这10分钟,去切菜,炒菜。

    他们的本质区别: 这条流水线上各个流程的执行顺序不同。

    1.3 JS执行机制(事件循环)

    1. 先执行执行栈中的同步任务。
    2. 异步任务(回调函数)放入任务队列中。
    3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任 务结束等待状态,进入执行栈,开始执行。

     由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环( event loop)。

    1.4 代码思考题

     console.log(1);
     document.onclick = function() {
       console.log('click');
     }
    
     setTimeout(function() {
       console.log(3)
     }, 3000)
     console.log(2);
  • 相关阅读:
    Linq聚合操作之Aggregate,Count,Sum,Distinct源码分析
    Linq分区操作之Skip,SkipWhile,Take,TakeWhile源码分析
    Linq生成操作之DefautIfEmpty,Empty,Range,Repeat源码分析
    Linq基础操作之Select,Where,OrderBy,ThenBy源码分析
    PAT 1152 Google Recruitment
    PAT 1092 To Buy or Not to Buy
    PAT 1081 Rational Sum
    PAT 1084 Broken Keyboard
    PAT 1077 Kuchiguse
    PAT 1073 Scientific Notation
  • 原文地址:https://www.cnblogs.com/bky-/p/13760450.html
Copyright © 2011-2022 走看看