js单线程阻塞实例
setTimeout(function () { while (true) { } }, 1000);
setTimeout(function () { alert('end 2'); }, 2000);
setTimeout(function () { alert('end 1'); }, 100);
alert('end');
结果是弹出’end’、’end 1’,然后浏览器假死,就是不弹出‘end 2’。

js单线程重点:
JS 是单线程的,但是却能执行异步任务,
这主要是因为 JS 中存在事件循环(Event Loop)和任务队列(Task Queue)。

事件循环:
JS 会创建一个类似于 while (true) 的循环,
每执行一次循环体的过程称之为 Tick。
每次 Tick 的过程就是查看是否有待处理事件,
如果有则取出相关事件及回调函数放入执行栈中由主线程执行。
待处理的事件会存储在一个任务队列中,
也就是每次 Tick 会查看任务队列中是否有需要执行的任务。

任务队列:
异步操作会将相关回调添加到任务队列中。
而不同的异步操作添加到任务队列的时机也不同,如 onclick, setTimeout, ajax 处理的方式都不同,
这些异步操作是由浏览器内核的 webcore 来执行的。
onclick 由浏览器内核的 DOM Binding 模块来处理,
当事件触发的时候,回调函数会立即添加到任务队列中。
setTimeout 会由浏览器内核的 timer 模块来进行延时处理,
当时间到达的时候,才会将回调函数添加到任务队列中。
ajax 则会由浏览器内核的 network 模块来处理,
在网络请求完成返回之后,才将回调添加到任务队列中。

主线程:
JS 只有一个线程,称之为主线程。
而事件循环是主线程中执行栈里的代码执行完毕之后,才开始执行的。
所以,主线程中要执行的代码时间过长,会阻塞事件循环的执行,也就会阻塞异步操作的执行。
只有当主线程中执行栈为空的时候(即同步代码执行完后),才会进行事件循环来观察要执行的事件回调,
当事件循环检测到任务队列中有事件就取出相关回调放入执行栈中由主线程执行。

JS 单线程的更多相关文章

  1. 从浏览器多进程到JS单线程,JS运行机制的一次系统梳理

    前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...

  2. 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

    前言 来源:https://dailc.github.io/2018/01/21/js_singlethread_eventloop.html 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会 ...

  3. 【本周面试题】第2周 - js单线程和异步相关问题

    硬性知识点考察: 为什么js是单线程的? 因为js设计最初是为了操作dom而生,如果是多线程的,当多个线程同时修改一个dom时就会产生冲突,所以设计成单线程,一次只能做一件事. 既然是单线程为什么要有 ...

  4. 用故事解析setTimeout和setInterval(内含js单线程和任务队列)

    区别: setTimeout(fn,t): 延迟调用,超过了时间就调用回调函数,返回一个id,使用clearTimeout(id)取消执行. 注意:取消了里面的回调函数就不执行了哦,而不是取消的时候就 ...

  5. 关于js单线程(转载)

    进程和线程都是操作系统的概念.进程是应用程序的执行实例,每一个进程都是由私有的虚拟地址空间.代码.数据和其它系统资源所组成:进程在运行过程中能够申请创建和使用系统资源(如独立的内存区域等),这些资源也 ...

  6. 深度理解Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...

  7. JS 单线程和事件循环

    Js 是单线程,js代码从上到下依次执行,比如我们写了两个函数,肯定是上面的函数先执行,下面的函数后执行.但是这种单线程有一个非常大的问题,那就是遇到耗时的任务,后面的任务只能等待它执行完,才能进行. ...

  8. JavaScript之JS单线程|事件循环|事件队列|执行栈

    本博文基于知乎"JavaScript作用域问题?"一问,而引起了对JavaScript事件循环和单线程等概念与实践上的研究.深入理解. 一.概念 0.关键词:JavaScript单 ...

  9. 深入浅析Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...

随机推荐

  1. Laravel开发采坑系列问题

    2017年12月22日17:40:03 不定时更新 版本5.4.X 一下是可能会遇到的坑 1,必须的写路由转发才能访问控制器,当然你可以自动路由访问,但是需要些匹配规则,其实还是转发了 好多人讨论过自 ...

  2. Luogu 1071 - 潜伏者 - [字符串]

    题目链接:https://www.luogu.org/problemnew/show/P1071 题解: 模拟就完事儿了. 注意failed的情况有:出现一个 $f[x]$ 对应多个值:存在两个不同的 ...

  3. Python3学习之路~5.11 configparser模块

    用于生成和修改常见配置文档,当前模块的名称在 python 2.x 版本中为 ConfigParser, python 3.x 版本中变更为 configparser. 来看一个好多软件的常见文档格式 ...

  4. Parallels Desktop 重装系统

    安装教程,大家可以在网上找找 现在我想重装系统,怎么弄呢? 1.~/Documents/Parallels 目录下那个PVM后缀的文件直接删除 2.重装找开虚拟机,会弹出一个框,说找不到系统,点击删除 ...

  5. K-wolf Number (数位DP)

    题意:求区间内有多少个数满足条件:任意相邻的k个数位都不相等. 思路:老套路 #include<bits/stdc++.h> using namespace std; typedef lo ...

  6. 改写pipeline

    为什么要改写方法:get_media_requests,他们的区别在哪里 def get_media_requests(self, item, info):#原始的 return [Request(x ...

  7. vue用mand-mobile ui做交易所移动版实战示例

    vue用mand-mobile ui做交易所移动版实战示例 先展示几个界面: 目录结构: main.js // The Vue build version to load with the `impo ...

  8. uboot移植阶段二--3串口终结篇

    2011-03-20 23:00:37 前天U-boot移植串口后,能成功显示数据. 今天的主要目的是再次进行U-boot移植.看是否成功.花了40分钟,很顺利. 接着就是要把之前有问题的U-boot ...

  9. 微信小程序之mpvue+iview踩坑之旅

    因为之前参照微信的原生的文档写过一些小程序的demo,写的过程比较繁琐,后来出了美团的mpvue,可以直接使用vue开发,其他的不作对比,这篇文章记录一下踩坑之旅. 参照mpvue http://mp ...

  10. 怎么让table中的<td>内容向上对齐

    <td valign="top"></td>