#JavaScript

======================================================

1. 单线程特性

项目	内容
定义	JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事
原因	JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如对某个 DOM 元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除
问题	单线程意味着所有任务需要排队，前一个任务结束，才会执行后一个任务。如果 JS 执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉
解决方案	利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程

======================================================

2. 同步与异步及任务类型

类型	定义	示例
同步	前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的	做饭的同步做法：先烧水煮饭，等水开了（10分钟之后），再去切菜、炒菜
异步	在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，还可以去处理其他事情	做饭的异步做法：在烧水的同时，利用这10分钟去切菜、炒菜

任务类型结构

任务类型
├── 同步任务
│   ├── 执行方式：在主线程上执行
│   └── 特点：形成一个执行栈
└── 异步任务
    ├── 执行方式：通过回调函数实现
    ├── 特点：相关添加到任务队列中（任务队列也称为消息队列）
    └── 类型：
        ├── 普通事件：click、resize 等
        ├── 资源加载：load、error 等
        └── 定时器：setInterval、setTimeout 等

======================================================

3. 执行机制

3.1 执行流程

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

3.2 事件循环

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

JS 执行机制
├── 开始
│   └── 执行栈
│       ├── 主线程执行完毕，读取任务队列
│       └── 重复执行
├── 任务队列（消息队列）
│   ├── 任务队列1: onload、onclick 等
│   ├── 任务队列2: setTimeout、setInterval 等
│   └── 任务队列3: 网络请求等
└── Web API（异步处理）
    ├── ajax（网络请求）
    ├── DOM事件（DOM 操作）
    └── timer（定时器）

======================================================

4. 执行栈与任务队列

概念	描述	示例
执行栈	同步任务执行的地方，按照顺序执行	console.log(1); console.log(2);
任务队列	异步任务等待执行的地方，按照顺序排队	setTimeout(fn, 0);

4.1 示例分析

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

执行顺序：

1. 执行 console.log(1)（同步任务）
2. 执行 setTimeout（异步任务），将回调函数放入任务队列
3. 执行 console.log(3)（同步任务）
4. 执行栈为空，从任务队列中取出回调函数，执行 console.log(2)

输出结果：1, 3, 2

======================================================