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

# 为什么 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

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

完善页面

上次更新: 2024-11-28 17:23:47

← JavaScript继承模式 JavaScript赋值与浅拷贝与深拷贝解析→