JavaScript线程机制和事件机制
# JavaScript 线程机制与事件机制
# 线程机制
# 进程
程序的一次执行, 它占有一片独有的内存空间
# 线程
CPU 的基本调度单位, 是程序执行的一个完整流程,是进程内的一个独立执行单元
# 进程与线程关系
- 一个进程中一般至少有一个运行的线程: 主线程,进程启动后自动创建
- 一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的
- 一个进程内的数据可以供其中的多个线程直接共享
- 多个进程之间的数据是不能直接共享的
# 线程池
保存多个线程对象的容器,实现线程对象的反复利用。
# 多线程
- 优点:能有效提高 CPU 的利用率
- 缺点:
- 1.创建多线程开销
- 2.线程间切换开销
- 3.死锁与状态同步问题
# 单线程
- 优点:顺序编程、简单易懂
- 缺点:效率较低
# 补充
- 浏览器都是多线程运行的
- 应用程序必须运行在某个进程的某个线程上
# 浏览器内核模块组成
# 什么是浏览器内核?
支持浏览器运行的最核心的程序。
# 浏览器内核由很多模块组成
主线程
- JS 引擎模块:负责 JS 程序的编译与运行
- html,css 文档解析模块 : 负责页面文本的解析
- dom/css 模块 : 负责 dom/css 在内存中的相关处理
- 布局和渲染模块 : 负责页面的布局和效果的绘制
分线程
- 定时器模块 : 负责定时器的管理
- 网络请求模块 : 负责服务器请求(常规/Ajax)
- DOM 事件响应模块 : 负责事件的管理
# JS 线程
- js 是单线程执行的(回调函数也是在主线程)。
- H5 提出了实现多线程的方案: Web Workers
- 只能是主线程更新界面,(因为如果是有多个线程可以操作界面,可能会出现在同一时间不同的线程执行不同的操作,导致冲突,例如:一个线程执行编辑操作,一个线程执行删除操作,如果二者同时可以进行的话,可能会出现删除了之后再次去编辑的情况,导致出错。)
# 定时器问题
- 定时器并不真正完全定时,(一般会延迟一丢丢(可以接受), 也有可能延迟很长时间(不能接受))
- 如果在主线程执行了一个长时间的操作, 可能导致延时才处理
- 定时器回调函数是在主线程中执行的,定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行,因为 JS 是单线程的
- 定时器是通过事件循环模型来实现的
<body>
<button id="btn">启动定时器</button>
<script type="text/javascript">
document.getElementById("btn").onclick = function () {
let start = Date.now();
console.log("启动定时器前...");
setTimeout(function () {
console.log("定时器执行了", Date.now() - start);
}, 200);
console.log("启动定时器后...");
};
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 为什么 js 要用单线程模式, 而不用多线程模式?
- JavaScript 的单线程,与它的用途有关。
- 作为浏览器脚本语言,JavaScript 的主要用途是与用户互动,以及操作 DOM。
- 这决定了它只能是单线程,否则会带来很复杂的同步问题。(如果是多线程模式,例如:一个线程执行编辑操作,一个线程执行删除操作,如果二者同时可以进行的话,可能会出现删除了之后再次去编辑的情况,导致出错。)
# JS 事件处理机制
代码分类
- 初始化执行代码: 包含绑定 dom 事件监听, 设置定时器, 发送 ajax 请求的代码
- 回调执行代码: 处理回调逻辑
js 引擎执行代码的基本流程
- 初始化代码===>回调代码
模型的 2 个重要组成部分
- 事件管理模块
- 回调队列
模型的运转流程
- 执行初始化代码, 将事件回调函数交给对应模块管理
- 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
- 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
# H5 Web Workers
目的:可以让 js 在分线程执行。通过使用 Web Workers,Web 应用程序可以在独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是 UI 线程)不会因此被阻塞/放慢。
相关 API
Worker: 构造函数, 加载分线程执行的 js 文件。
Worker.prototype.onmessage: 用于接收另一个线程的回调函数。
Worker.prototype.postMessage: 向另一个线程发送消息。
onmessage(event) 方法中使用 event.data 来接收主线程发送的数据。
参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API (opens new window)
问题:
- worker 内代码不能操作 DOM 更新 UI,因为全局对象不再是 window,而是 DedicatedWorkerGlobalScope {}
- 不是每个浏览器都支持这个新特性
- 不能跨域加载 JS
<body>
<input type="text" placeholder="数值" id="number" />
<button id="btn">计算</button>
<script type="text/javascript">
let input = document.getElementById("number");
document.getElementById("btn").onclick = function () {
let number = input.value;
//创建一个Worker对象
let worker = new Worker("worker.js");
// 绑定接收消息的监听
worker.onmessage = function (event) {
console.log("主线程接收分线程返回的数据: " + event.data);
alert(event.data);
};
// 向分线程发送消息
worker.postMessage(number);
console.log("主线程向分线程发送数据: " + number);
};
// console.log(this) // window
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
worker.js
如下
// 1 1 2 3 5 8 13 f(n) = f(n-1) + f(n-2)
function fibonacci(n) {
return n<=2 ? 1 : fibonacci(n-1) + fibonacci(n-2) //递归调用
}
console.log(this) //DedicatedWorkerGlobalScope {name: "", onmessage: null, onmessageerror: null, cancelAnimationFrame: ƒ, close: ƒ, …}
this.onmessage = function (event) {
//使用 event.data 来接收主线程发送的数据
let number = event.data
console.log('分线程接收到主线程发送的数据: '+number)
//计算
let result = fibonacci(number)
postMessage(result)
console.log('分线程向主线程返回数据: '+result)
// alert(result) alert是window的方法, 在分线程不能调用
// 分线程中的全局对象不再是window, 所以在分线程中不可能更新界面
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
完善页面 (opens new window)
上次更新: 2023-12-26 18:29:08