微任务

Dart是单线程语言，但是请求网络，数据操作和IO操作等耗时操作需要异步，否则可能会导致无响应。Isolate机制是Dart中的异步机制。与Java中的线程不同，Isolate中的线程（可以先称之为线程）是内存隔离的（像进程一样的线程），而Java中的线程是内存共享的。 Dart中的main函数启动时会启动一个进程（可先称之为主线程，或者主isolate）。使用Isolate.spawn可以创建一个新的Isolate。 import 'dart:io'; import 'dart:isolate'; int i; void main() { i = 2; Isolate.spawn(entryPoint, "hello");//开启一个子Isolate } //entryPoint相当于在一个新的子线程中执行 void entryPoint(Stirng message) { print(i); //输出为null，而非2，也说明了主isolate与子isolate内存隔离，无法共享 sleep(Duration(seconds: 10)); //子isolate延迟，不会影响主isolate print(message); } 消息接收器和消息发送器即ReceivePort和SendPort，它们在每个isolate中均存在

单线程 浏览器是多线程运行的，它给js分配一个线程；js就是单线程运行的【一次只干一件事】 所谓单线程，就是只一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，在执行后面一个任务，以次类推。 js执行分为同步和异步，其中异步来自于浏览器提供的异步队列，在浏览器中分为两个任务队列，一个是主任务队列【同步编程】，一个是等待任务队列【异步编程】 了解js的异步我们应该先了解下js的运行环境=>浏览器 一个浏览器通常由一下几个常住的线程 渲染引擎线程：顾名思义，该线程负责页面的渲染 js引擎线程：负责js解析和执行 定时触发器线程：处理定时事件，比如 setTimeout , setInterval 事件触发线程：处理DOM事件 异步http请求线程：处理http请求 注意：渲染线程和js引擎线程是不能同时进行的。渲染线程在执行任务的时候，js引擎线程会被挂起。因为js可以操作DOM,若在渲染中js处理了DOM，浏览器可能就不知所措了 虽然JavaScript是单线程的，可是浏览器内部不是单线程的。一些I/O操作、定时器的计时和事件监听（click, keydown...）等都是由浏览器提供的其他线程来完成的。 Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。 "同步模式"就是上一段的模式

世界杯足球下注源码搭建 下载 http://hubawl.com 什么叫异步 异步(async) 是相对于 同步(sync) 而言的，很好理解。 同步 就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。而 异步 比如： setTimeout(function cbFn(){ console.log('learnInPro'); }, 1000); console.log('sync things'); setTimeout就是一个 异步任务 ，当JS引擎顺序执行到setTimeout的时候发现他是个异步任务，则会把这个任务挂起，继续执行后面的代码。直到1000ms后，回调函数cbFn才会执行，这就是异步，在执行到setTimeout的时候，JS并不会傻呵呵的等着1000ms执行cbFn回调函数，而是继续执行了后面的代码。 1.2 为啥要在JS中使用异步 由于javascript是 单线程 的，只能在JS引擎的主线程上运行的，所以js代码只能一行一行的执行，不能在同一时间执行多个js代码任务，这就导致如果有一段耗时较长的计算，或者是一个ajax请求等IO操作，如果没有异步的存在，就会出现用户长时间等待，并且由于当前任务还未完成，所以这时候所有的其他操作都会无响应。 1.3 那为啥JS不设计成多线程的 这主要跟javascript的历史有关

JS异步编程 (1) 1.1 什么叫异步 异步(async) 是相对于 同步(sync) 而言的，很好理解。 同步 就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。而 异步 比如： setTimeout(function cbFn(){ console.log('learnInPro'); }, 1000); console.log('sync things'); setTimeout就是一个 异步任务 ，当JS引擎顺序执行到setTimeout的时候发现他是个异步任务，则会把这个任务挂起，继续执行后面的代码。直到1000ms后，回调函数cbFn才会执行，这就是异步，在执行到setTimeout的时候，JS并不会傻呵呵的等着1000ms执行cbFn回调函数，而是继续执行了后面的代码。 1.2 为啥要在JS中使用异步 由于javascript是 单线程 的，只能在JS引擎的主线程上运行的，所以js代码只能一行一行的执行，不能在同一时间执行多个js代码任务，这就导致如果有一段耗时较长的计算，或者是一个ajax请求等IO操作，如果没有异步的存在，就会出现用户长时间等待，并且由于当前任务还未完成，所以这时候所有的其他操作都会无响应。 1.3 那为啥JS不设计成多线程的 这主要跟javascript的历史有关，js最开始只是为了处理一些表单验证和DOM操作而被创造出来的

举例 setTimeout(function() { console.log(1) }, 0); new Promise(function executor(resolve) { console.log(2); for( var i=0 ; i<10000 ; i++ ) { i == 9999 && resolve(); } console.log(3); }).then(function() { console.log(4); }); console.log(5); 结果：2 3 5 4 1 解释： 按照这种分类方式:JS的执行机制是： 首先判断JS是同步还是异步，同步就进入主进程，异步就进入event table 异步任务在event table中注册函数，当满足触发条件后，被推入event queue 同步任务进入主线程后一直执行，直到主线程空闲时，才会去event queue中查看是否有可执行的异步任务，如果有就推入主进程中 以上三步循环执行，这就是event loop。 准确的划分方式是： macro-task(宏任务)：包括整体代码script，setTimeout，setInterval micro-task(微任务)：Promise，process.nextTick 按照这种分类方式，JS的执行机制是： 执行一个宏任务，过程中如果遇到微任务，就将其放到微任务的

众所周知，JavaScript 是一门单线程语言，虽然在 html5 中提出了 Web-Worker ，但这并未改变 JavaScript 是单线程这一核心。可看HTML规范中的这段话： To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section. There are two kinds of event loops: those for browsing contexts, and those for workers. 为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，用户引擎必须使用 event loops。Event Loop 包含两类：一类是基于 Browsing Context ，一种是基于 Worker ，二者是独立运行的。 下面本文用一个例子，着重讲解下基于 Browsing Context 的事件循环机制。 来看下面这段 JavaScript 代码： console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0);/

　　当我们执行 JS 代码的时候其实就是往执行栈中放入函数，那么遇到异步代码的时候该怎么办？其实当遇到异步的代码时，会被挂起并在需要执行的时候加入到 Task（有多种 Task） 队列中。一旦执行栈为空，Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说 JS 中的异步还是同步行为。 　　不同的任务源会被分配到不同的 Task 队列中，任务源可以分为 微任务（microtask） 和 宏任务（macrotask）。在 ES6 规范中，microtask 称为 jobs ，macrotask 称为 task 。下面来看以下代码的执行顺序： console.log('script start') async function async1() { await async2() console.log('async1 end') } async function async2() { console.log('async2 end') } async1() setTimeout(function() { console.log('setTimeout') }, 0) new Promise(resolve => { console.log('Promise') resolve() }) .then(function() { console

1.浏览器的主要构成部分 1.用户界面 2.浏览器引擎(负责窗口管理、Tab进程管理等) 3.渲染引擎(有叫内核，负责HTML解析、页面渲染) 4.JS引擎(JS解释器，如Chrome和Nodejs采用的V8) 这里面最核心的就是渲染引擎和JS引擎，后面会详细介绍这两个引擎的相关内容。 常见浏览器的渲染引擎和JS引擎如下： 注：新版本的Chrome采用的渲染引擎是Blink，Blink是由谷歌团队从Webkit衍生开发出来的引擎，主要有应用到Chrome和Opera浏览器。 2.从进程和线程的角度来理解浏览器工作 1）进程和线程 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位） 线程是cpu调度的最小单位（线程是建立在进程的基础上的一个程序运行单位，一个进程中可以有多个线程） 进程可以类比为工厂，线程就是工厂里面的工人，一个工厂可以包含一个或者多个工人，工人之间可以相互协作，并且共享工作空间 2）浏览器的多进程架构 现代的浏览器采用的都是多进程架构，主要包含以下三种进程： 1.Browser进程 浏览器的主线程，主要负责浏览器的页面管理、书签、前进后退、资源下载管理等，整个浏览器应用程序只有一个，对应上述浏览器组成中的浏览器引擎。 2.渲染进程 内核进程、负责页面渲染、JS执行，对应的是上述的渲染引擎和JS引擎，一个浏览器可以包含多个渲染进程

macrotask（宏任务）：主代码块、setTimeout、setInterval等 microtask（微任务）：Promise、process.nextTick等 下面通过【今日头条】这道面试题详细说明一下： async function async1() { console.log( 'async1 start' ) await async2() console.log( 'async1 end' ) } async function async2() { console.log( 'async2' ) } console.log( 'script start' ) setTimeout( function () { console.log( 'setTimeout' ) }, 0 ) async1(); new Promise( function ( resolve ) { console.log( 'promise1' ) resolve(); } ).then( function () { console.log( 'promise2' ) } ) console.log( 'script end' ) 先画一个通用任务表（后面的步骤就是给表插值的过程，执行顺序是从上至下，从左往右，先同步后异步） 宏任务1 宏任务2 宏任务3 ... 宏任务n 微任务1.1 微任务2

本文已发布在西瓜君的 个人博客 ,原文 传送门 前言 写这一篇的时候，西瓜君查阅了很多资料和文章，但是相当多的文章写的都很简单，甚至互相之间有矛盾，这让我很困扰；同时也让我坚定了要写出一篇好的关于JS异步、单线程、事件循环的文章，下面，让我们一起来学习本文吧，冲鸭~~ 单线程 ### 1. 什么是单线程 //栗子1 console.log(1) console.log(2) console.log(3) //输出顺序 1 2 3 单线程即同一时间只做一件事 2. JavaScript为什么是单线程 首先是历史原因，在创建 javascript 这门语言时，多进程多线程的架构并不流行，硬件支持并不好。 其次是因为多线程的复杂性，多线程操作需要加锁，编码的复杂性会增高。 而且，如果同时操作 DOM ，在多线程不加锁的情况下，最终会导致 DOM 渲染的结果不可预期 为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。 异步 1.JS的 同步任务/异步任务 同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务 异步：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列