js是单线程

即同一个时间只能做一件事，JavaScript是为处理页面中用户的交互，以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先进行添加，之后在进行删除。

单线程就意味这所有任务都需要排队，前一个任务结束才会执行后一个任务，这样所导致的问题就是：如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

同步和异步

解决上述问题，利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，于是，JS中出现和同步和异步

  1. 同步任务都在主线程执行，形成一个执行栈。
  2. JS的异步是通过回调函数实现的。一般而言，异步任务有以下三种类型：
    • 普通事件，click，resize等
    • 资源加载，load，error等
    • 定时器，setInterval，setTimeout等
  3. 异步任务相关回调函数添加到任务队列中（任务队列也称消息队列）
  4. 先执行执行栈中的同步任务。

    异步任务（回调函数）放入任务队列中。

    一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

看案例

【js】js执行机制-js单线程-同步和异步的更多相关文章

  1. 深入理解 JS 引擎执行机制（同步执行、异步执行以及同步中的异步执行）

    首先明确两点: 1.JS 执行机制是单线程. 2.JS的Event loop是JS的执行机制,深入了解Event loop,就等于深入了解JS引擎的执行. 单线程执行带来什么问题? 在JS执行中都是单 ...

  2. JS 引擎执行机制

    JS JS 是单线程语音 JS 的 Event Loop 是 JS 的执行机制.类似于 Android Handler 消息分发机制 JS 单线程 技术的出现都跟现实世界里的应用场景密切相关 JS 单 ...

  3. JS代码执行机制

    JS代码从编译到执行 我们写出一段JS代码,JS的引擎并不是按照我们书写的顺序从上到下顺序编译并且执行的,首先是按照自己的规则对我们的代码先进行编译,然后从上到下执行编译的代码. 在全局作用域中,JS ...

  4. js的执行机制

    遇到一个问题,因为自己本身就是菜鸟的原因,弄懂了还是很高兴的. console.log(a) function a() { return "this is function" } ...

  5. 0182 JavaScript执行机制：单线程，同步任务和异步任务，执行栈，消息队列，事件循环

    以下代码执行的结果是什么? [结果是1 2 3 ] console.log(1); setTimeout(function () { console.log(3); }, 1000); console ...

  6. 小tips：在JS语句执行机制涉及的一种基础类型Completion

    看一个如下的例子.在函数 foo 中,使用了一组 try 语句.在 try 中有 return 语句,finally 中的内容还会执行吗? function foo(){ try{ return 0; ...

  7. js中的callback（阻塞同步或异步时使用）

    1.回调就是一个函数的调用过程,函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b, 那么这个过程就叫回调 eg. function a(callback){ alert('paren ...

  8. js为什么是单线程的？10分钟了解js引擎的执行机制

    深入理解JS引擎的执行机制 1.JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setT ...

  9. JS 引擎的执行机制

    关于JS引擎的执行机制,首先牢记2点: .JS是单线程语言 JS的Event Loop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的event loop 关于单线程相对还比较好理解,就是 ...

  10. JS学习笔记：（三）JS执行机制

    首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...

随机推荐

  1. R7-7 调查电视节目受欢迎程度

    R7-7 调查电视节目受欢迎程度 分数 15 全屏浏览题目 切换布局 作者 颜晖 单位 浙大城市学院 某电视台要调查观众对该台8个栏目(设相应栏目编号为1~8)的受欢迎情况,共调查了n位观众(1≤n≤ ...

  2. maven 引入了jar包，但却不能使用jar包里类

    无报错,但是就是 无法 使用 lombok 的类. 发现classpath 里面也的确没有lombok jar包. 最后把json 的 version 属性加上 就正常了. 所以 结论: 不加vers ...

  3. 运行yarn报错：error C:\liuyan\tools\echarts-5.4.0\node_modules\cwebp-bin: Command failed.

    完成warning和报错信息如下. 通过报错信息提示,锁定cwebp-bin,在waring中发现有提示说要更新至7或更高版本. 解决方案:在package.json中,将cwebp-bin设置版本为 ...

  4. view 相关代码片段笔记

    代码中动态创建view,并把AttributeSet加入到当前自定义的view中,动态创建属性相关 //https://blog.csdn.net/chenhuakang/article/detail ...

  5. 312. 戳气球 (Hard)

    问题描述 312. 戳气球 (Hard) 有 n 个气球,编号为 0 到 n - 1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.戳破第 i 个气球,你可以获 ...

  6. 小程序toast组件中事件触发条件

    微信小程序toast组件是一种消息提示框.例如当文章条数全部加载出来后,用户再次点击加载更多的时候,js判断文章条数全部加载出来后,便让toast组件弹出提示用户"没有更多文章了" ...

  7. Js文章内容监听复制代码

    若别人在你的网站复制内容将会提示,请把监听提示添加到文章内容div或者直接将代码复制粘贴到所需要的文件中! <script> //监听ctrl+v 复制 document.addEvent ...

  8. bootstrap-select使用、relation-graph使用

    bootstrap-select 这里要实现的是带有搜索功能的select框, bootstrap 官网没有可以直接拿来用的.如下是官网给出的解释,带搜索功能的select需要自定义. 在网上找到了有 ...

  9. 12. Redis 安装

    参考http://www.runoob.com/redis/redis-install.html Window 下安装 下载地址:https://github.com/MSOpenTech/redis ...

  10. Delphi实现Windows的气泡提示样式

    其实也不复杂,主要使用到shellAPI下的TNotifyIconData这个结构体: typedef struct _NOTIFYICONDATA { DWORD cbSize; //结构体的大小, ...