好记性不如烂笔头
前端整理
基础
进阶
css + html + js + nodejs
- 通过代码+文档进行描述
运行
浏览器v8引擎
拷贝部分代码块到chrome执行
node环境
- vscode打开项目
- 右键选定code，执行runcode | 避免变量冲突
chrome和node环境有差异，部分结果不尽相同，如他们的this不同（node包导致）；以chrome为准
目录
|————css --------------------- css相关
| |————center.html ------------ 水平垂直居中
| |————px.html ---------------- 像素匹配
| |————Triangle.html ----------- 三角形绘制
|————html -------------------- html相关
|————js ---------------------- js相关
| |————array.js --------------- 数组
| |————closure.js ------------- 闭包
| |————count.js --------------- 算法
| |————dataType.js ------------ 数据类型
| |————es6.js ----------------- es6
| |————function.js ------------ 函数功能拓展和重写
| |————prototype.js ----------- 原型
| |————scope.js --------------- 作用域
| |————scopeFunction.js ------- 函数表达式、变量提升、原型链查找，实例化查找等
| |————topics.js -------------- 一些题目
|————md --------------------- 基础介绍
| |————prototype.md ----------- 原型、原型链
| |————stack.md --------------- 堆内存、栈内存
| |————url.md ----------------- 浏览器url输入到页面展示完毕的过程
|————nodejs ----------------- nodejs相关
| |————eventLoop.js ----------- 事件循环机制、微任务、宏任务
|————README.md --------------- 项目描述文件
js轮询机制、宏任务、微任务
/**
* js中同步任务、宏任务和微任务介绍/ 参考 md/stack.md 中的任务执行流程图
* 同步任务： 普通任务
* 宏任务(异步任务，包括各种DOM事件) 来自于h5规范
* 分类： I/O(网络，文件，数据库I/O) setTimeout setInterval requestAnimationFrame(下次页面重绘前所执行的操作, 浏览器环境才有) setImmediate(nodejs才有)
* 1. 宏任务所处的队列：宏任务队列
* 2. 第一个宏任务队列只执行一个任务，执行主线程js代码，
* 3. 宏任务队列可以有多个任务
*
* 微任务(异步任务) 来自于h5规范
* 分类： new Promise().then(回调)、 process.nextTick()(nodejs才有)
* 1. 微任务所处的队列：微任务队列
* 2. 只有一个微任务队列
* 3. 在上一个宏任务队列执行完毕后，如果有微任务队列就会执行微任务队列中的所有任务；
*
* 执行顺序
* 当主线程js代码(属于宏任务第一队列)执行完毕后，如果有微任务，则优先执行微任务（process.nextTick优先执行），然后才执行宏任务
*
*/
/**
事件轮询(循环)机制（宏任务）介绍
原理：借助libuv（c / c++）库实现
执行顺序：
1. timer： 定时器阶段 计时和执行到点的回调函数 settimeout
2. pending callbacks 处理某些系统操作(TCP连接错误等)
3. idle prepare 准备工作（nodejs才有）
4. poll 轮询阶段（轮询队列，可以理解为普通异步任务，如网络请求） 先进先出、依次同步取出轮询队列中第一个回调函数执行/知道队列为空 或者 达到系统最大限制
如果队列为空，并且设置过setImmediate，直接进入下一个check阶段（未设置：停留在当前poll阶段等待，直到队列添加了回调函数）
5. check阶段，查阶段，执行setImmediate（nodejs才有）
6. close callbacks 关闭阶段，执行close事件
*
*/
/**
* 同步异步执行顺序总结
* 1.同步任务
* 2.微任务
* 3.宏任务（事件轮询）
*/
console.log('start') // 顺序1 主线程同步任务
setTimeout(() => { // 顺序6 宏任务，按照事件轮询机制执行
console.log('setTimeout')
}, 0);
new Promise((resolve, reject) => { // new promise 属于同步主线程任务，优先执行 顺序2
for (let i = 0; i < 5; i++){ // 同步执行主线程任务
console.log(i)
}
setTimeout(() => {
console.log('promise settimeout') // 顺序7 次于上一个异步任务
}, 0);
resolve()
}).then(() => {
console.log('Promise回调执行完毕') // 顺序5 new Promise().then(回调)属于微任务 优于宏任务执行
})
setImmediate(function (params) { // 顺序8 宏任务执行，按照事件轮询机制执行
console.log('setImmediate')
})
process.nextTick(function (params) { // 特例：在同步任务结束后，微任务如果有process.nextTick，优先执行 顺序4
console.log('nextTick')
})
console.log('main process end') // 顺序3 主线程同步任务
// start
// 0
// 1
// 2
// 3
// 4
// main process end
// nextTick
// Promise回调执行完毕
// setTimeout
// setImmediate
/**
* setImmediate 和 setTimeout 的优先级
* 一般根据定时器setTimeout waittime决定
*/
var t1 = +new Date();
setImmediate(function () {
console.log('1');
});
setTimeout(function () {
console.log('2');
},20);
console.log('3');
var t2 = +new Date();
console.log('time: ' + (t2 - t1));
//输出
// 3
// time: 23
// 2
// 1
var t1 = +new Date();
setImmediate(function () {
console.log('1');
});
setTimeout(function () {
console.log('2');
},30);
console.log('3');
var t2 = +new Date();
console.log('time: ' + (t2 - t1));
//输出
// 3
// time: 23
// 1
// 2
更多请前往github查看