body click js 委托_JS 事件循环
进程 线程
- CPU 分配资源的最小单位是进程，同一个时间内单个 CPU 只能运行一个进程，单个 CPU 一次只能运行一个任务
- CPU 调度的最小单位是线程，一个进程里面包含多个线程。
- 可以看看阮老师的这篇文章，进程与线程的一个简单解释
浏览器的进程
- 浏览器主进程
- 插件进程
- GPU 进程
- 网络进程
- 渲染进程
- 主要负责将 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>
<!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 8console.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);
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/498968.shtml
如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！
![查看csv编码_[小O地图-数据] - 坐标转地址文字（逆地理编码）](https://img-blog.csdnimg.cn/img_convert/ddaa155f052643107032c016ec84e38d.png)
