过程 线程
- CPU 分配资源的最小单位是过程,同一个工夫内单个 CPU 只能运行一个过程,单个 CPU 一次只能运行一个工作
- CPU 调度的最小单位是线程,一个过程外面蕴含多个线程。
- 能够看看阮老师的这篇文章,过程与线程的一个简略解释
浏览器的过程
-
浏览器主过程
- 负责界面展现,用户交互,子过程治理,文件存取等
- 插件过程
-
GPU 过程
- 3d 绘制
- 网络过程
-
渲染过程
- 次要负责将 HTML, CSS, JavaScript 转换为用户可交互的网页,排版引擎 Blink 和
- JavaScript 引擎 V8 就运行在渲染过程,默认每个 tab 一个渲染过程
- 浏览器内核
浏览器的渲染流程
- 解析 HTML 文件,生成 DOM tree;同时解析 CSS 文件以及款式元素中的款式数据,生成 CSS Rules
- 构建 render tree:依据 DOM tree 和 CSS Rules 来构建 render tree,它能够让浏览器依照正确的程序绘制内容
- 布局(layout / reflow):计算各元素尺寸、地位。
- 绘制(paint):绘制页面像素信息。
- 浏览器将各层信息发送给 GPU,GPU 将各层信息合成(composite),显示在屏幕上。
浏览器内核
- GUI 渲染线程
-
JS 引擎线程
- JavaScript 是单线程的
- GUI 渲染线程 与 JS 引擎线程是互斥的
- JS 阻塞页面加载
- 事件触发线程
- 定时触发器线程
- 异步 http 申请线程
宏工作,微工作
- 事件轮询解释:事件轮询 - 阮一峰
-
JS 单线程
- 单线程中如果同步执行的代码很慢,会让其它水平期待很长时间,这是同步阻塞。
- 多线程会占用多倍的资源也会节约多倍的资源,也不合理。
- event_loop 是把须要期待的程序放到异步队列,主调用函数执行完之后监听,再执行异步队列,整个过程就是个一直的循环
- JS 引擎遇到一个异步事件后并不会始终期待其返回后果,而是会将这个事件挂起,继续执行执行栈中的其余工作。当一个异步事件返回后果后,js 会将这个事件退出与以后执行栈不同的另一个队列,咱们称之为事件队列。被放入事件队列不会立即执行其回调,而是期待以后执行栈中的所有工作都执行结束,主线程处于闲置状态时,主线程会去查找事件队列是否有工作。如果有,那么主线程会从中取出排在第一位的事件,并把这个事件对应的回调放入执行栈中,而后执行其中的同步代码…,如此重复,这样就造成了一个有限的循环。这就是这个过程被称为“事件环(Event Loop)”
- 宏工作 宿主环境提供的异步办法 都是宏工作 script,ui 渲染,setTimeout,setInterval、setImmediate
- 微工作 语言规范提供 promise,mutationObserver,process.nextTick,Object.observe(已废除)
- 默认先执行 script 脚本中的代码 -> 会清空微工作(将所有的微工作全副执行完)-> 渲染页面 -> 取出一个宏工作执行 -> 执行结束后会再次情空微工作 …
- 浏览器黄色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- script 是一个宏工作 -->
<script>
document.body.style.background = 'red';
console.log(1);
// 在 setTimeout 执行前 会触发一次渲染
Promise.resolve().then(()=>{console.log(2);
document.body.style.background = 'yellow';
});
console.log(3);
</script>
</body>
</html>
- 按钮事件执行程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="button"> 点我啊 </button>
<script>
button.addEventListener('click', ()=>{console.log('listener1');
Promise.resolve().then(()=>console.log('micro task1'));
});
button.addEventListener('click', ()=>{console.log('listener2');
Promise.resolve().then(()=>console.log('micro task2'));
});
// 点击按钮之后的程序
// listener1
// micro task1
// listener2
// micro task2
// 一个个的函数来取 每次执行完 会先解决以后定义的微工作
button.click(); // click1() click2()
// listener1 listener2 micro task1 micro task2
</script>
</body>
</html>
- promise 和 setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
Promise.resolve().then(() => {console.log('Promise1')
setTimeout(() => {console.log('setTimeout2');
}, 0);
});
setTimeout(() => {console.log('setTimeout1');
Promise.resolve().then(() => {console.log('Promise2');
});
}, 0);
// Promise1 setTimeout1 Promise2 setTimeout2
</script>
</body>
</html>
- 执行程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(1);
async function async () {console.log(2);
await console.log(3); // Promise.resolve(console.log(3)).then(console.log(4))
console.log(4);
}
setTimeout(() => {console.log(5);
}, 0);
const promise = new Promise((resolve, reject) => {console.log(6); // new Promise 代码会立刻执行
resolve(7);
})
promise.then(res => { // 第一个微工作
console.log(res)
});
async ();
console.log(8);
// 1 6 2 3 8 7 4 5
</script>
</body>
</html>
- 执行程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log('script start');
setTimeout(function() {console.log('setTimeout');
}, 0);
Promise.resolve().then(function() {console.log('promise1');
}).then(function() {console.log('promise2');
});
console.log('script end');
// script start
// script end
// promise1
// promise2
// setTimeout
</script>
</body>
</html>
- 一段变态的代码
// 1 7 6 8
console.log('1');
setTimeout(function() {console.log('2');
process.nextTick(function() {console.log('3');
});
new Promise(function(resolve) {console.log('4');
resolve();}).then(function() {console.log('5')
});
}, 0);
process.nextTick(function() {console.log('6');
});
new Promise(function(resolve) {console.log('7');
resolve();}).then(function() {console.log('8')
});
setTimeout(function() {console.log('9');
process.nextTick(function() {console.log('10');
});
new Promise(function(resolve) {console.log('11');
resolve();}).then(function() {console.log('12')
});
}, 0);